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 相关文章推荐
JS 非图片动态loading效果实现代码
Apr 09 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
全面了解js中的script标签
Jul 04 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
PHP的反射机制实例详解
2017/03/29 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
vue组件发布到npm简单步骤
2017/11/30 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
python实现调用其他python脚本的方法
2014/10/05 Python
python中正则表达式的使用详解
2014/10/17 Python
python实现kMeans算法
2017/12/21 Python
windows下python和pip安装教程
2018/05/25 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
python实现文件的分割与合并
2019/08/29 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
求职自荐信范文格式
2013/11/29 职场文书
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
前台岗位职责范本
2015/04/16 职场文书
个人承诺书格式范文
2015/04/29 职场文书
离婚承诺书格式范文
2015/05/04 职场文书