Bootstrapでナビゲーションバーを作成する方法

Bootstrapでナビゲーションバーを作成する方法

ナビゲーションバーの設置

ナビゲーションバーは「nav」タグに.navbarを指定することで作成することができます。

そして、ナビゲーションバーの文字色と背景色を指定します。

• 背景が黒系の場合は .navbar-dark
• 白系の場合は .navbar-light

スポンサーリンク

背景色は次のスタイルが用意されているので、お好みの色を選択します。

■ HTMLイメージ

■ HTMLサンプル

<nav class="navbar navbar-dark bg-info">
  <a href="#" class="navbar-brand">Bootstrap</a>
</nav>

ナビゲーションバー上にメニューを設置する

ナビゲーションバー上にメニューを設置するには、「nav」タグに.navbar-expand-smを指定、そして次のように「<div class="navbar-nav">」タグ内にメニューの内容を追加します。

メニューの配置位置は次のスタイルで指定できます。

• 左寄せ　　：justify-content-start
• 中央寄せ　：justify-content-center
• 右寄せ　　：justify-content-end

■ HTMLイメージ

■ HTMLサンプル

<nav class="navbar navbar-expand-sm navbar-dark bg-info">
  <a href="#" class="navbar-brand">Bootstrap</a>
  <div class="collapse navbar-collapse justify-content-end" id="navmenu">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">新規作成</a>
      <a class="nav-item nav-link disabled" href="#">編集</a>
      <a class="nav-item nav-link disabled" href="#">一覧表示</a>
    </div>
  </div>
</nav>

スポンサーリンク

メニューにドロップダウンリストを追加する

メニューにドロップダウンリストを追加するには、.dropdown、.dropdown-toggle、.dropdown-menu、.dropdown-itemなどのスタイルを設定します。

■ HTMLイメージ

■ HTMLサンプル

<nav class="navbar navbar-expand-sm navbar-dark bg-info">
  <a href="#" class="navbar-brand">Bootstrap</a>
  <div class="collapse navbar-collapse justify-content-end" id="navmenu">
    <div class="navbar-nav dropdown">
      <a class="nav-item nav-link dropdown-toggle active" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">新規作成</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">基本データ作成</a>
        <a class="dropdown-item" href="#">詳細データ作成</a>
      </div>
      <a class="nav-item nav-link disabled" href="#">編集</a>
      <a class="nav-item nav-link disabled" href="#">一覧表示</a>
    </div>
  </div>
</nav>

ナビゲーションバー上に入力フォームを設置する

ナビゲーションバー上に入力フォームを設置するには、「form」タグに.form-inlineを指定することで作成することができます。

■ HTMLイメージ

■ HTMLサンプル

<nav class="navbar navbar-dark bg-info">
  <a href="#" class="navbar-brand">Bootstrap</a>
  <div class="navbar-collapse justify-content-end">
      <form class="form-inline">
        <input class="form-control mr-sm-1" type="search">
        <button class="btn btn-info" type="submit">検索</button>
      </form>
  </div>
</nav>