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 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
JS实现一个简单的日历
Feb 22 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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
我的论坛源代码(六)
2006/10/09 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
jquery 笔记 事件
2011/11/02 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
军训自我鉴定
2013/12/14 职场文书
会计专业自荐信
2014/06/03 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
行政主管岗位职责
2015/02/03 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书