Bootstrap 麵包屑導航,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="/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.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編碼規範