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

jquery.AutoComplete.js中文修正版(支持firefox)

Apr 09 Javascript

JS模式之单例模式基本用法

Jun 30 Javascript

jQuery事件绑定用法详解(附bind和live的区别)

Jan 19 Javascript

快速解决js动态改变dom元素属性后页面及时渲染的问题

Jul 06 Javascript

jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】

Mar 09 Javascript

Angular 5.0 来了! 有这些大变化

Nov 15 Javascript

vue-cli3.0使用及部分配置详解

Aug 29 Javascript

vue设计一个倒计时秒杀的组件详解

Apr 06 Javascript

你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)

Apr 15 Javascript

JS将时间秒转换成天小时分钟秒的字符串

Jul 10 Javascript

javascript读取本地文件和目录方法详解

Aug 06 Javascript

javascript数组includes、reduce的基本使用

Jul 02 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

压力如何影响浓缩咖啡品质

2021/03/03 咖啡文化

php操作xml入门之cdata区段

2015/01/23 PHP

简单的php+mysql聊天室实现方法(附源码)

2016/01/05 PHP

php获取flash尺寸详细数据的方法

2016/11/12 PHP

php 截取GBK文档某个位置开始的n个字符方法

2017/03/08 PHP

详解PHP多个进程配合redis的有序集合实现大文件去重

2019/03/06 PHP

flexigrid 类似ext grid的JS表格代码

2010/07/17 Javascript

Jquery插件之打造自定义的select标签

2011/11/30 Javascript

用jquery实现点击栏目背景色改变

2012/12/10 Javascript

c#+jquery实现获取radio和checkbox的值

2020/09/12 Javascript

如何改进javascript代码的性能

2015/04/02 Javascript

js实现滚动条滚动到页面底部继续加载

2015/12/19 Javascript

vue的diff算法知识点总结

2018/03/29 Javascript

webpack 样式加载的实现原理

2018/06/12 Javascript

详解axios中封装使用、拦截特定请求、判断所有请求加载完毕）

2019/04/09 Javascript

实现一个 Vue 吸顶锚点组件方法

2019/07/10 Javascript

基于javascript实现移动端轮播图效果

2020/12/21 Javascript

Python批量更改文件名的实现方法

2017/10/29 Python

Python之dict(或对象)与json之间的互相转化实例

2018/06/05 Python

python re库的正则表达式入门学习教程

2019/03/08 Python

Python使用sqlalchemy模块连接数据库操作示例

2019/03/13 Python

解决django的template中如果无法引用MEDIA_URL问题

2020/04/07 Python

python函数超时自动退出的实操方法

2020/12/28 Python

Marc Jacobs官方网站：美国奢侈品牌

2017/08/29 全球购物

APM Monaco中国官网：来自摩纳哥珠宝品牌

2017/12/27 全球购物

青年创业培训欢迎词

2014/01/10 职场文书

倡议书格式范文

2014/04/14 职场文书

土地转让协议书

2014/04/15 职场文书

企业文明单位申报材料

2014/05/16 职场文书

生物科学专业自荐书

2014/06/20 职场文书

2015出纳试用期工作总结

2014/12/12 职场文书

2015年感恩母亲节的演讲稿

2015/03/18 职场文书

2015年班干部工作总结

2015/04/29 职场文书

Django REST framework 限流功能的使用

2021/06/24 Python

JS数组去重详情

2021/11/07 Javascript

JavaScript实现栈结构详细过程

2021/12/06 Javascript