パンくずリストは、Web サイトの階層情報に基づいた表示方法です。ブログを例に挙げると、ブレッドクラムには公開日、カテゴリ、またはタグを表示できます。これらは、ナビゲーション階層内の現在のページの位置を表します。
Bootstrap のブレッドクラムは、.breadcrumb クラスを備えた単純な順序なしリストです。セパレータは、CSS (bootstrap.min.css) で以下に示すクラスを通じて自動的に追加されます:
.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>
ログイン後にコピー
オンラインで実行
結果は次のとおりです:
ブートストラップ関連情報の読み取り:
ブートストラップ チュートリアル ブートストラップの概要 ブートストラップ環境のインストール ブートストラップ CSS の概要 ブートストラップ グリッド システム ブートストラップ レイアウト ブートストラップ コード ブートストラップ テーブル ブートストラップ フォーム ブートストラップ ボタン ブートストラップ イメージ ブートストラップ ヘルパー クラス ブートストラップ レスポンシブ ユーティリティ ブートストラップ フォント アイコン ブートストラップ ドロップダウン メニュー ブートストラップ ボタン グループ ブートストラップ ボタン ドロップダウン メニュー ブートストラップ入力ボックスグループ ブートストラップナビゲーション要素 ブートストラップ ナビゲーション バー ブートストラップ ブレッドクラム ナビゲーション ブートストラップ ページネーション ブートストラップ タグ ブートストラップ バッジ (バッジ) ブートストラップ特大画面 ブートストラップ ページ タイトル ブートストラップのサムネイル ブートストラップのアラート) ブートストラップの進行状況バー ブートストラップ マルチメディア オブジェクト ブートストラップ リスト グループ ブートストラップ パネル パネル ブートストラップ ウェル ブートストラップ プラグインの概要 ブートストラップ トランジション エフェクト ブートストラップ モーダル ボックス ブートストラップ ドロップ-ダウンメニュー ブートストラップスクロール 監視 ブートストラップタブ ブートストラップ プロンプト ツール ブートストラップ ポップアップ ボックス ブートストラップ アラート ボックス ブートストラップ ボタン ブートストラップ カルーセル ブートストラップ追加ナビゲーション ブートストラップその他 Bootstrap UI Editor Bootstrap HTMLコーディング仕様 ブートストラップ CSS コーディング仕様
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
