Bootstrapで遊ぶ１１（ナビゲーションバーの作成）

おつかれさまです。

次に触ってみるコンポーネントは「ナビゲーション」、これはよくホームで上の方に「概要」とか「住所」とかいろいろ横リストになっているアレです。そーいえば、むかしのメモでCSSから自力で作ったことありましたね（大変だった）、

shachicode.hatenablog.com

この横リストを簡単に作成する機能がBootstrapには実装されています、基本的にはCSSのリストと同じような作り方です。

** 1. ナビゲーションの標準仕様

まずは普通に「ul」と「li」を使ってリストを作ります。

<h1>ナビゲーションのテスト</h1>
<ul>
  <li>残業</li>
  <li>休出</li>
  <li>昇格（廃止）</li>
</ul>

こんな感じ、
f:id:sutokun:20180708142910p:plain

この「ul」に「nav」、「li」に「nav-item」を付けると、いい感じになる、

<h1>ナビゲーションのテスト</h1>
<ul class="nav">
  <li class="nav-item">残業</li>
  <li class="nav-item">休出</li>
  <li class="nav-item">昇格（廃止）</li>
</ul>

f:id:sutokun:20180708175643p:plain

ムムッ、なんか微妙・・・、いや横リストにはなったけど、なんかaタグ使わないといけないのか、もうちょい調べてみるとaタグに「nav-link」というクラス名が必要らしい。

<h1>ナビゲーションのテスト</h1>
<ul class="nav">
  <li class="nav-item"><a href="#" class="nav-link">残業</a></li>
  <li class="nav-item"><a href="#" class="nav-link">休出</a></li>
  <li class="nav-item"><a href="#" class="nav-link">昇格（廃止）</a></li>
</ul>

f:id:sutokun:20180708180254p:plain

あーこれこれ、この感じ、リストで作った項目を横リストでいい感じに並べてくれます。

** 2. タブ仕様
ナビゲーションの標準仕様では単なる横並びなので、面白みがありません、このナビゲーションをタブ形式に変えてみます。変更方法は「ul」のクラス名に「nav-tabs」を追記するだけ。

<h1>ナビゲーションのテスト</h1>
<ul class="nav nav-tabs">
  <li class="nav-item"><a href="#" class="nav-link">残業</a></li>
  <li class="nav-item"><a href="#" class="nav-link">休出</a></li>
  <li class="nav-item"><a href="#" class="nav-link">昇格（廃止）</a></li>
</ul>

f:id:sutokun:20180708181605p:plain

おお、タブっぽくなた、さらに表示させたい「li」に「active」を追記すると更にタブっぽくなる。

<h1>ナビゲーションのテスト</h1>
<ul class="nav nav-tabs">
  <li class="nav-item"><a href="#" class="nav-link">残業</a></li>
  <li class="nav-item"><a href="#" class="nav-link active">休出</a></li>
  <li class="nav-item"><a href="#" class="nav-link">昇格（廃止）</a></li>
</ul>

f:id:sutokun:20180708183405p:plain

おおー、ええやん、なるほど、「li」に「active」をつけたナビゲーションHTMLをそれぞれのページで用意しておけば、ページのタブをめくるようなアクションができるかな。

このタブ幅ですが、文字数に応じて左詰めになっています、このタブ幅を画面全体100%に対して等分で表示するには「nav-fill」を追記します。
f:id:sutokun:20180708232020p:plain

今は３項目しかないので微妙だけど、タブ数が増えるとこっちの方がいいかな。

ちなみにこのタブ形式ですが、ボタンっぽい見ためにするピル形式という仕様も備えられています、クラス名を「tabs→pills」にすると変化します。
f:id:sutokun:20180708231208p:plain

タブ形式と同じように「休出」の項目に「active」を適応させています。

** 3. ナビゲーションのレスポンシブ対応
スマホのように小さい画面でナビゲーションを見たとき、不本意に改行されたりすることはよくあります、PC画面とスマホ画面それぞれでいい感じになるよう、ナビゲーションにもレスポンシブ対応させます。

まず、前回作成したピル形式のナビゲーション、

<h1>ナビゲーションのテスト</h1>
<ul class="nav nav-pills">
  <li class="nav-item"><a href="#" class="nav-link">残業</a></li>
  <li class="nav-item"><a href="#" class="nav-link active">休出</a></li>
  <li class="nav-item"><a href="#" class="nav-link">昇格（廃止）</a></li>
</ul>

f:id:sutokun:20180714090322p:plain

この「ul」のクラス名に「flex-column flex-lg-row」を追記します、「flex-column」がリストを縦並びにさせる機能で、「flex-lg-row」がどの画面サイズで変化させるか、を指定します。

<h1>ナビゲーションのテスト</h1>
<ul class="nav nav-pills flex-column flex-lg-row">
  <li class="nav-item"><a href="#" class="nav-link">残業</a></li>
  <li class="nav-item"><a href="#" class="nav-link active">休出</a></li>
  <li class="nav-item"><a href="#" class="nav-link">昇格（廃止）</a></li>
</ul>