suchen

Heim  >  Artikel  >  Web-Frontend  >  Bootstrap 面包屑导航_html/css_WEB-ITnose

Bootstrap 面包屑导航_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:18:121306Durchsuche

面包屑导航（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编码规范

    • Stellungnahme：
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Vorheriger Artikel：给产品经理讲技术｜H5基础知识：表单_html/css_WEB-ITnoseNächster Artikel：前端手机抓包流程（window）_html/css_WEB-ITnose

    In Verbindung stehende Artikel

    Mehr sehen