Bootstrap 面包屑导航(Breadcrumbs)
2016-01-27 00:00
681 查看
摘要: Bootstrap 面包屑导航(Breadcrumbs)
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。
Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.css)中下面所示的 class 自动被添加:
下面的实例演示了面包屑导航:
尝试一下 »
结果如下所示:
原文地址:http://www.phplearn.cn/bootstrap/bootstrap-breadcrumbs.html
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。
Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.css)中下面所示的 class 自动被添加:
.breadcrumb > li + li:before { color: #CCCCCC; content: "/ "; padding: 0 5px; }
下面的实例演示了面包屑导航:
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 面包屑导航</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">2013</a></li> <li class="active">十一月</li> </ol> </body> </html>
尝试一下 »
结果如下所示:
原文地址:http://www.phplearn.cn/bootstrap/bootstrap-breadcrumbs.html
相关文章推荐
- Bootstrap 分页
- Bootstrap 标签
- Bootstrap 徽章(Badges)
- Bootstrap 超大屏幕(Jumbotron)
- Bootstrap Frontend Demo
- bootstrap学习总结
- bootstrap datetimepicker 位置错误
- BootStrap基础入门
- angular Tabs (ui.bootstrap.tabs)
- Bootstrap-datepicker 用法
- Bootstrap-table custome-ajax用法
- Bootstrap学习
- JS组件Bootstrap Select2使用方法详解
- Ubuntu 下的flask+bootstrap 环境搭建
- JS组件中bootstrap multiselect两大组件较量
- JS组件Form表单验证神器BootstrapValidator
- JS组件Bootstrap Select2使用方法详解
- Bootstrap 表格
- Bootstrap 表单
- Bootstrap 按钮