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个精彩的专题:

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

Javascript 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
采用call方式实现js继承
May 20 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
node thread.sleep实现示例
Jun 20 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
Vue.js中的高级面试题及答案
Jan 13 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
You might like
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
php jsonp单引号转义
2014/11/23 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
AngularJS语法详解(续)
2015/01/23 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
如何基于Python实现自动扫雷
2020/01/06 Python
Python中无限循环需要什么条件
2020/05/27 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
学校安全工作制度
2014/01/19 职场文书
数学检讨书1000字
2014/02/24 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
社区维稳工作方案
2014/06/06 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
学习十八大的感悟
2015/08/11 职场文书