Bootstrap ナビゲーション要素

この記事では、Bootstrap フレームワークで提供されるさまざまなナビゲーション要素、つまりナビゲーションバー、パンくずリスト、ページネーションなどについて説明し、これらの要素を使用して Web サイトのナビゲーションシステムを作成する方法について解説します。

一、ナビゲーションバー (Navbar)

1. 概要

ナビゲーションバーは、Web サイトのヘッダー部分に配置され、サイトの主要セクションへのリンクを提供する重要な要素です。ユーザーが Web サイト内をスムーズに移動できるようにします。

2. 種類

Bootstrap は、さまざまな種類のナビゲーションバーを提供しています。

種類	説明
固定トップ (fixed-top)	画面の上部に固定表示されるナビゲーションバーです。スクロールしても常に表示されます。
レスポンシブ (responsive)	画面サイズに応じてレイアウトが変化するナビゲーションバーです。スマートフォンなどの小さな画面では、ハンバーガーメニューが表示されます。
反転 (navbar-inverse)	背景色が暗く、文字色が明るいナビゲーションバーです。

3. コード例


<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">ブランド名</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">ホーム</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </div>
</nav>

4. コンポーネント

ナビゲーションバーには、以下のようなコンポーネントを含めることができます。

ブランドロゴ
ナビゲーションリンク
フォーム
ボタン

二、パンくずリスト (Breadcrumb)

1. 概要

パンくずリストは、現在のページが Web サイト内のどこに位置しているかをユーザーに示すために使用されます。階層構造を持つ Web サイトで特に役立ちます。

2. コード例


<ol class="breadcrumb">
  <li><a href="#">ホーム</a></li>
  <li><a href="#">サービス</a></li>
  <li class="active">Web 制作</li>
</ol>

3. カスタマイズ

パンくずリストの区切り文字、色、フォントなどをカスタマイズすることができます。

三、ページネーション (Pagination)

1. 概要

ページネーションは、大量のコンテンツを複数のページに分割し、ユーザーがページ間を簡単に移動できるようにするために使用されます。

2. 種類

種類	説明
デフォルトページネーション	番号が順番に表示される、一般的なページネーションです。
左右矢印ページネーション	前ページと次ページへのリンクのみを表示するページネーションです。
数字ページネーション	指定した数の番号のみを表示し、それ以外は省略記号で表すページネーションです。

3. コード例


<nav>
  <ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</nav>

4. 状態

CSS クラスを使用して、ページネーションの активное состояние、無効状態などを表現できます。

四、タブナビゲーション (Tabs)

1. 概要

タブナビゲーションは、1 つのページ内に複数のコンテンツブロックを整理し、ユーザーがタブをクリックして表示を切り替えられるようにするために使用されます。

2. 種類

水平タブ、垂直タブ、ドロップダウンメニュータブなど、さまざまな種類のタブナビゲーションがあります。

3. コード例


<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">ホーム</a></li>
  <li><a data-toggle="tab" href="#profile">プロフィール</a></li>
  <li><a data-toggle="tab" href="#messages">メッセージ</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <p>ホームコンテンツ</p>
  </div>
  <div id="profile" class="tab-pane fade">
    <p>プロフィールコンテンツ</p>
  </div>
  <div id="messages" class="tab-pane fade">
    <p>メッセージコンテンツ</p>
  </div>
</div>

4. イベント

JavaScript イベントを使用して、タブの切り替えイベントを監視できます。

五、ナビゲーションピル (Pills)

1. 概要

ナビゲーションピルは、タブナビゲーションと似ていますが、よりシンプルなスタイルです。

2. コード例


<ul class="nav nav-pills">
  <li class="active"><a href="#">ホーム</a></li>
  <li><a href="#">プロフィール</a></li>
  <li><a href="#">メッセージ</a></li>
</ul>

3. 状態

CSS クラスを使用して、ナビゲーションピルの активное состояние、無効状態などを表現できます。

まとめ

この記事では、Bootstrap フレームワークで提供されるさまざまなナビゲーション要素について、詳細なコード例と解説とともに説明しました。これらの要素を使用することで、Web サイトのナビゲーションシステムを迅速に作成できます。

Bootstrap ナビゲーション要素に関する Q&A

Q1: ナビゲーションバーを画面上部に固定するにはどうすればよいですか？

A1: ナビゲーションバーのクラスに "navbar-fixed-top" を追加します。

Q2: パンくずリストの区切り文字を変更するにはどうすればよいですか？

A2: CSS で .breadcrumb > li + li:before の content プロパティを変更します。

Q3: ページネーションで現在アクティブなページを強調表示するにはどうすればよいですか？

A3: 現在アクティブなページの <li> 要素に "active" クラスを追加します。