编程 Javascript

Bootstrap CSS组件之面包屑导航(breadcrumb)

Posted in Javascript onDecember 17, 2016

面包屑breadcrumb一般用于导航，表示当前页面所在的位置
面包屑可以设置其他相关的小标记内容，比如标签、徽章标记等。

//源码
//基础样式
.breadcrumb {
 padding: 8px 15px;
 margin-bottom: 20px;
 list-style: none;
 background-color: #f5f5f5;
 border-radius: 4px;
}
//所有li项都是内联块方式
.breadcrumb > li {
 display: inline-block;
}
//并且li项才起作用
.breadcrumb > li + li:before {
 padding: 0 5px;
 color: #ccc;
 content: "/\00a0";
}
//设置当前项的颜色
.breadcrumb > .active {
 color: #777;
}

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Bootstrap从3.0版本开始全面支持移动平台，贯彻移动先行宗旨 -->
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <title>Bootstrap 101 Template</title>

 <!-- Bootstrap -->
 <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

 </head>
 <body>
 <ul class="breadcrumb">
  <li>HTML</li>
  <li>JS</li>
  <li>CSS</li>
 </ul>
 <!-- bootstrap是基于jQuery-->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 </body>
</html>

本文系列教程整理到：Bootstrap基础教程专题中，欢迎点击学习。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap CSS组件之面包屑导航(breadcrumb)

- Author -

github_34514750

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

告诉大家什么是JSON

Jun 10 Javascript

跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明

May 04 Javascript

IE6、IE7中获取Button元素的值的bug说明

Aug 28 Javascript

js事件冒泡实例分享(已测试)

Apr 23 Javascript

div模拟选择框示例代码

Nov 03 Javascript

使用jQuery制作遮罩层弹出效果的极简实例分享

May 12 Javascript

AngularJS 指令详细介绍

Jul 27 Javascript

微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例

Oct 13 Javascript

利用JavaScript实现拖拽改变元素大小

Dec 14 Javascript

jQuery实现页面滚动时智能浮动定位

Jan 08 Javascript

基于dataset的使用和图片延时加载的实现方法

Dec 11 Javascript

ES6 Symbol数据类型的应用实例分析

Jun 26 Javascript

Bootstrap CSS组件之分页(pagination)和翻页(pager)

Dec 17 #Javascript

Bootstrap CSS组件之大屏幕展播

Dec 17 #Javascript

Bootstrap CSS布局之图像

Dec 17 #Javascript

Bootstrap CSS布局之按钮

Dec 17 #Javascript

Bootstrap CSS布局之表单

Dec 17 #Javascript

Bootstrap CSS布局之表格

Dec 17 #Javascript

Bootstrap CSS布局之代码

Dec 17 #Javascript