你的位置:首页 > 网页设计

[网页设计]Bootstrap 面包屑导航


面包屑导航(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="http://www.cnblogs.com//bootstrap/css/bootstrap.min.css" rel="stylesheet">  <script src="http://www.cnblogs.com//scripts/jquery.min.js"></script>  <script src="http://www.cnblogs.com//bootstrap/js/bootstrap.min.js"></script></head><body><ol > <li><a href="#">Home</a></li> <li><a href="#">2013</a></li> <li >十一月</li></ol></body></html>

在线运行

结果如下所示:

 

原文地址:http://www.manongjc.com/bootstrap/bootstrap_breadcrumbs.html

Bootstrap相关资料阅读:

  • Bootstrap 教程
  • Bootstrap 简介
  • Bootstrap 环境安装
  • Bootstrap CSS 概览
  • Bootstrap 网格系统
  • Bootstrap 排版
  • Bootstrap 代码
  • Bootstrap 表格
  • Bootstrap 表单
  • Bootstrap 按钮
  • Bootstrap 图片
  • Bootstrap 辅助类
  • Bootstrap 响应式实用工具
  • Bootstrap 字体图标
  • Bootstrap 下拉菜单
  • Bootstrap 按钮组
  • Bootstrap 按钮下拉菜单
  • Bootstrap 输入框组
  • Bootstrap 导航元素
  • Bootstrap 导航栏
  • Bootstrap 面包屑导航
  • Bootstrap 分页
  • Bootstrap 标签
  • Bootstrap 徽章(Badges)
  • Bootstrap 超大屏幕
  • Bootstrap 页面标题
  • Bootstrap 缩略图
  • Bootstrap 警告(Alerts)
  • Bootstrap 进度条
  • Bootstrap 多媒体对象
  • Bootstrap 列表组
  • Bootstrap 面板Panels
  • Bootstrap Well
  • Bootstrap 插件概览
  • Bootstrap 过渡效果
  • Bootstrap 模态框
  • Bootstrap 下拉菜单
  • Bootstrap 滚动监听
  • Bootstrap 标签页
  • Bootstrap 提示工具
  • Bootstrap 弹出框
  • Bootstrap 警告框
  • Bootstrap 按钮
  • Bootstrap 折叠
  • Bootstrap 轮播
  • Bootstrap 附加导航
  • Bootstrap 其他
  • Bootstrap UI 编辑器
  • Bootstrap HTML编码规范
  • Bootstrap CSS编码规范