编程 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 相关文章推荐

innerhtml用法 innertext用法以及innerHTML与innertext的区别

Oct 26 Javascript

Javascript 解疑

Nov 11 Javascript

js局部刷新页面时间具体实现

Jul 04 Javascript

JS如何将UTC格式时间转本地格式

Sep 04 Javascript

js使用数组判断提交数据是否存在相同数据

Nov 27 Javascript

Javascript验证用户输入URL地址是否为空及格式是否正确

Oct 09 Javascript

JavaScript驾驭网页－DOM

Mar 24 Javascript

Jquery Easyui日历组件Calender使用详解（23）

Dec 18 Javascript

JavaScript字符串对象(string)基本用法示例

Jan 18 Javascript

基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能

May 16 Javascript

JavaScript如何实现监听键盘输入和鼠标监点击

Jul 20 Javascript

JavaScript canvas实现跟随鼠标移动小球

Feb 09 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