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 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
js编写选项卡效果
May 23 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
vue el-table实现行内编辑功能
Dec 11 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读取和编写XML DOM的实现代码
2011/02/03 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
详解python 注释、变量、类型
2018/08/10 Python
Django中的ajax请求
2018/10/19 Python
python实现两张图片的像素融合
2019/02/23 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
后勤岗位职责
2013/11/26 职场文书
骨干教师培训制度
2014/01/13 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
病假条格式范文
2015/08/17 职场文书
高质量“欢迎词”
2019/04/03 职场文书
如何使用pdb进行Python调试
2021/06/30 Python
Python装饰器详细介绍
2022/03/25 Python
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL