【入門】Bootstrapの書き方　〜 タブメニュー 〜

みなさんこんにちは さくちゃん です。

本日は、基本的な「タブメニュー」について書いていきます。
前回の「ナビゲーション」についてまだ見ていない方はこちらをご覧ください。

では早速やっていきましょう！

Bootstrapの書き方　〜 タブメニュー 〜

基本的な書き方

基本的な書き方は下のようになります。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

基本は「ナビゲーション」を使います。
<ul class=”nav”> に「nav-tabs」を追記することで、「タブメニュー」になります！

様々なデザイン

pills

<ul class=”nav”> に「nav-pills」を追記することで、上の図のようになります！
書き方は

<ul class="nav nav-pills">

</ul>

と書きます。
「nav-tabs」と組み合わせると下のような図になります。

Fill and justify

幅いっぱいにタブメニューを広げたい場合には「fill」を使います。
<ul class=”nav”> に「nav-fill」を追記することで、上の図のようになります！
書き方は

<ul class="nav nav-fill">

</ul>

と書きます。

また、先ほどの「nav-pills」と組み合わせることも可能です。
書き方は

<ul class="nav nav-pills nav-fill">

</ul>

と書きます。
そして「nav-tabs」と組み合わせると下のような図になります。

「nav-fill」はレスポンシブにも対応しており、幅いっぱいに広げても問題ありません！

Dropdown

「Dropdown」形式で表示させたい場合は、下のように書きます。
それぞれのタグの意味について解説します。

<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> 
  <a class="dropdown-item" href="#">Separated link</a>
 </div>
  </li>

✅ <li class=”nav-item dropdown”>
　
　liタグに「dropdown」とclass指定することで、dropdown形式にすることができます。
　また、「dropup」「dropright」「dropleft」と指定するとそれぞれ「上方向」「右方向」「左方
　向」に表示することができます。

✅ <a class=”nav-link dropdown-toggle” data-toggle=”dropdown” href=”#” role=”button” aria-haspopup=”true” aria-expanded=”false”>Dropdown</a>
　
　このコードは、ドロップダウンボタンを表示させるためのコードです。

✅ <div class=”dropdown-menu”>

　<div class="dropdown-menu">はドロップダウンのメニューを作るコードです。
　この<div class="dropdown-menu">の中にメニューを書いていきます。

✅ <a class=”dropdown-item” href=”#”>Action</a>
　 <a class="dropdown-item" href="#">Action</a>はドロップダウンメニューの要素です。
　class名に「dropdown-item」と指定し、「href=”リンク”」でリンク先を指定します。

まとめ

今回は基本的な「タブメニュー」の書き方について紹介しました。
今回紹介した内容は、一部の内容なので、もっと知りたい方はこちらをご覧ください。