首页 > web前端 > html教程 > Bootstrap 面包屑导航_html/css_WEB-ITnose

Bootstrap 面包屑导航_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:18:12
原创
1342 人浏览过

面包屑导航(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>
登录后复制

在线运行

结果如下所示:

 

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编码规范
  • 相关标签:
    来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板