Bootstrap 3.3.7 ナビゲーションとコンポーネント

Bootstrapにはナビゲーション用のGUIコンポーネントが多数含まれている。ここでは基本的な使い方を説明する。
Tags:

リストグループ

Bootstrapにはボタングループやツールバーのほか、ナビゲーション向けのGUIコンポーネントも用意されている。リストグループは項目をまとめて見やすく表示する一覧で、別ページへ移動したり項目を選択したりするインターフェースとしてよく使われる。

<ul class="list-group">
  <li class="list-group-item">Item</li>
</ul>

外側の要素にclass="list-group"を指定し、各項目にclass="list-group-item"を指定する。同じクラスはリンクにも使える。

<div class="list-group">
  <a href="#" class="list-group-item">Item</a>
</div>

状態を表すクラスにはactiveとdisabledがある。色付きのコンテキストクラスには、list-group-item-success、list-group-item-info、list-group-item-warning、list-group-item-dangerがある。

パンくずリスト

パンくずリストは、ページ階層の中で現在位置を示すナビゲーションである。Bootstrapでは、リストにbreadcrumbクラスを付けて作成する。

<ol class="breadcrumb">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li>Three</li>
</ol>

区切り文字はBootstrapの標準スタイルで表示される。パンくずリストは、ナビゲーション系コンポーネントの中でも特に単純なものといえる。

ページネーション

ページネーションは、複数ページを順番に移動するためのリンクを表示する。リストにpaginationクラスを追加する。

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

現在のページにはactive、利用できないリンクにはdisabledを使う。

<li class="active"><a href="#">5</a></li>
<li class="disabled"><a href="#">Prev</a></li>

中央に揃える場合は、テキスト中央揃えの要素で囲む。サイズ違いはpagination-smとpagination-lgで指定できる。

<ul class="pagination pagination-sm">
<ul class="pagination pagination-lg">

タブは、navとnav-tabsを指定したul要素で作成する。

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Page 1</a></li>
</ul>

選択中のタブにはactiveを付ける。ピル型のナビゲーションは、nav-tabsをnav-pillsに置き換えるだけで作成できる。

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">A</a></li>
  <li role="presentation"><a href="#">B</a></li>
</ul>

どちらも基本のマークアップは同じで、表示デザインだけが異なる。

ナビゲーションバー

ナビゲーションバーは、多くのアプリケーションやWebサイトで使われる、より複雑なナビゲーションインターフェースである。通常はnav要素、コンテナ、リンクを組み合わせて作る。

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <a class="navbar-brand" href="#">Link</a>
  </div>
</nav>

重要なクラスにはnavbar-fixed-top、navbar-fixed-bottom、navbar-inverseがある。固定ナビゲーションバーは、ページをスクロールしてもブラウザの上部または下部に表示され続ける。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">One</a>
    <a class="navbar-brand" href="#">Two</a>
    <a class="navbar-brand" href="#">Three</a>
  </div>
</nav>

これらのクラスを使うことで、Bootstrapではリストナビゲーション、パンくずリスト、ページネーション、タブ、ピル、固定ナビゲーションバーを、HTMLの小さな変更だけで利用できる。