ぱそくま ろご
開発 > Bootstrap > Bootstrap パンくずリスト

Bootstrap パンくずリスト

Bootstrap パンくずリスト

表示ページのロケーションをあらわすリストをパンくず(Breadcrumb)リストといいます。Bootstrapでこれを作るには

  1. パンくずリストの大枠となる「.breadcrumb」をもつolタグ(ulタグでも可)を作成。
  2. その中にロケーションアイテムとなる「.breadcrumb-item」をもつliタグを作成。

以上です。カレントページのliタグには「.active」を追加してくだい。そうすると、色が反転します。



例:Bootstrap パンくずリスト


<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">開発</a></li>
  <li class="breadcrumb-item"><a href="#">Bootstrap</a></li>
  <li class="breadcrumb-item active">Bootstrap パンくずリスト</li>
</ol>

Bootstrap パンくずリストの表示

パンくずリストはolタグの代わりにnavタグでも可能です。navタグを使用するとliタグがいらないのでちょっとすっきりします。

例:Bootstrap navタグを使ったパンくずリスト


<nav class="breadcrumb">
  <a class="breadcrumb-item" href="#">開発</a>
  <a class="breadcrumb-item" href="#">Bootstrap</a>
  <span class="breadcrumb-item active">Bootstrap パンくずリスト</span>
</nav>

Bootstrap navタグを使ったパンくずリストの表示