【Bootstrapその⑦】Components系のカスタムⅣ～ナビ系の機能3選～【学習積み上げ】

引き続きBootstrapの学習中です、マサです。

Components系のまとめも終わりに近づいて来ました。

今回はナビやヘッダーに使える機能についての紹介です。

ではいきましょう。

Components系のカスタム

ナビ系に使える機能とは

まずはいつもどおり、一例を見ていきましょう。

ナビと言うだけあって、そのままNavsというものがあります。

Navs

Navs(ナビ)では, ナビゲーションコンポーネントを利用するためのドキュメントと例を示します。ナビの使い方の例を示します。

公式より

ナビはヘッダーやフッターなどではよく使われますよね。
サイトを深く構成する上では欠かせないですし、ブログなんかでも使い勝手が良さそうです。

こちらに示した画像のように、機能は多めに使っていますが、

サイトの特徴や構成を考えて機能を絞って使うと良いですね。

コードはこんな感じ。

  <div class="container my-5">
    <ul class="nav nav-tabs nav-pills navbar navbar-expand-lg navbar-dark bg-dark" id="myTab" role="tablist">
      <!-- nav-tabsを指定して、下のtab-content～を追加することで、Collapseのように押すとメッセージが出てくるようにできる。 -->
      <!-- nav-pillsでボタンの色などを変更。 -->
      <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="false">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Menu</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </li>
    </ul>  

    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">トップページです。</div>
      <div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">こんにちは</div>
    </div>
  </div>

一番基本的な形は割と簡単で、

nav>li.nav-item>a.nav-link

と最低限のこれだけです。

しかも元からFlexが効いてあるので、勝手に横並びになってくれています。

また、前回やったボタン系に関するカスタムを併用することで、上記の画像とコードのようにナビにCollapseやDropdownを装飾することもできます。

www.appatwi.com

他にも、ボタンを縦並びにすることもできたりと、オプションが様々ですので、使いたい方は公式を御覧ください。

Navs - Bootstrap 4.4 - 日本語リファレンス

そして、ナビに関するデザインはあと2つあります。

NavbarとBreadcrumbです。

Navbar(ナビバー)に関しては、そのままの意味でNavのバーですね。

極端な話、先ほどのNavのコードに、Navbarに必須なコードを最低限class名に記述するだけで、こんな感じになります。

 <ul class="nav nav-tabs nav-pills navbar navbar-expand-lg navbar-dark bg-dark" id="myTab" role="tablist">

追加したのは正確には4つです。

navbarとnavbar-expand-lgとnavbar-darkとbg-dark

Navbarには必須のclass名である、navbarとバーの大きさを決めるnavbar-expand-lg(sm、mdなども)と、色を決めるnavbar-dark(他にも色名あり)を記述します。(bg-darkは背景色なのでどっちでもOK)

厳密にいうと、もう少し細かい違いなどがありますが、詳しくは公式を見るか、そのままコピペして使っちゃいましょう。

Navbar - Bootstrap 4.4 - 日本語リファレンス

また、Breadcrumb(ブレッドクラム )は、パンくずリストと呼ばれるもので、ブログなどでカテゴリ分けしたときによく見るやつですね。

こんな感じです。

これも使い方は簡単で、

nav>ol>liのリストを作ってあげて、breadcrumbとbreadcrumb-itemのclass名を追加するだけ。

    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item active" aria-current="page">HOME</li>
      </ol>
    </nav>
    
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">HOME</a></li>
        <li class="breadcrumb-item active" aria-current="page">PROGRAMMIG</li>
      </ol>
    </nav>
    
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">HOME</a></li>
        <li class="breadcrumb-item"><a href="#">PROGRAMMIG</a></li>
        <li class="breadcrumb-item active" aria-current="page">BOOTSTRAP</li>
      </ol>
    </nav>

あとは開いてるページにavtiveをつけています。

これもほぼコピペで済みます、簡単ですね。

Breadcrumb - Bootstrap 4.4 - 日本語リファレンス

おわりに

今回はナビ系に使える便利機能の紹介でした。

まとめると、

• Navs
• Navbar　★便利
• Breadcrumb

特にNavbarにおいては、メニューなどの他に検索窓も楽に実装できるのでとても便利じゃないかなと思いました！

ホームページやブログなんかでは必須のデザインですから、覚えておけば使える場面があるかもしれないですね。

次は、ページ遷移系に使える便利機能についてまとめます。

www.appatwi.com

それでは。