Bootstrapで使える表現メモ＃２


# テーブル
          <table class="table　table-hover">
            <thead>
              <tr><th>Plan A</th><th>Plan B</th></tr>
            </thead>
            <tbody>
                <tr><td>AA</td><td>B</td></tr>
                <tr><td>AAA</td><td>BBB</td></tr>
                <tr><td>AAAA</td><td>BBBB</td></tr>
            </tbody>
          </table>

でテーブルのクラスを使用できる。
タイトルはthead,中身はtbodyタグで囲む。
table-hoverで選択中の行の背景色が変わる。

# タブ
        <h2 class="mg-5 text-center">How to use</h2>
        <div class="container">
          <ul class="nav nav-tabs">
            <li class="nav-item"><a href="#ios" class="nav-link active" data-toggle="tab">iOS</a></li>
            <li class="nav-item"><a href="#android" class="nav-link" data-toggle="tab">android</a></li>
          </ul>
          <div class="tab-content py-5">
            <div id="ios" class="tab-pane active">
                <p>HEllo iOS.HEllo iOS.HEllo iOS.HEllo iOS.HEllo iOS.HEllo iOS.</p>
            </div>
            <div id="android" class="tab-pane">
                <p>HEllo android.HEllo android.HEllo android.HEllo android.HEllo android.HEllo android.</p>
            </div>
          </div>
        </div>

でタブを作ることができる。
タブはulタグの中にliタグでつくる。
ulには"nav nav-tabs"クラス、
liタグには"nav-item"クラスをつけ、最初に表示してほしいタブに"active"クラスを追加する。
liタグの中にはaタグををつくり、リンク先に#〇〇、クラス名はtav-linkにする。
data-toggle="tab"と書くことでタグの切り替えを行うことができる。

タブの中身はtab-contentクラスをもつdivタグを書く。
その中に先ほどのリンク先に書いた〇〇をidとし、tab-paneクラスを持つdivタグを書くとそれぞれのタグの中身を書くことができる。

#ツールチップ

```
<span class="font-weight-bold text-info" data-toggle="tooltip" title="ツールチップだよ！" data-placement="bottom">カーソルをここへ</span> 
```


spanタグで囲み、
・data-toggle="tooltip" 
・title="(表示したい文字列)" 
を追加する。

通常は文字の上にツールチップが出てくるが
・data-placement="bottom"
と書くことで下に表示することができる。

また、

    <script>
      $(function(){
        'use strict';
        $('[data-toggle="tooltip"]').tooltip();
      })
    </script>

も追記することで動作する。

#　ナビバー
```
<nav class="navbar navbar-expand navbar-light">
          <a href="" class="navbar-brand">Logo</a>
          <ul class="navbar-nav">
            <li class="nav-item"><a href="" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="" class="nav-link">Link</a></li>
          </ul>
        </nav>
```

全体をnavタグで囲み、class="navbar navbar-expand"を追記。
そのに書くロゴリンクはclass="navbar-brand"、ulタグには"navbar-nav"、
その中にリストのliタグにはclass="nav-item"、リンクタグにはclass="nav-link"
を書くことでナビバーが実装できる。

# ハンバーガーメニュー

        <nav class="navbar navbar-expand-sm navbar-light">
          <a href="" class="navbar-brand">Logo</a>
          <button class="navbar-toggler" data-toggle="collapse"
          data-target="#menu">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div id="menu" class="collapse navbar-collapse">
              <ul class="navbar-nav">
                  <li class="nav-item"><a href="" class="nav-link">Link</a></li>
                  <li class="nav-item"><a href="" class="nav-link">Link</a></li>
                  <li class="nav-item"><a href="" class="nav-link">Link</a></li>
              </ul>
          </div>
        </nav>

buttonタグに
・class="navbar-toggler" 
・data-toggle="collapse"（ブラウザ幅に対応して開閉する）
・data-target="#〇〇"（開くメニューを指定）
を書き、
spanタグにclass="navbar-toggler-icon"と書くとハンバーガーメニューのアイコンを使用できる。

sm以上のときにexpandするようにnavタグにはnavbar-expand-smを追加。

# アラート
```
<div class="alert alert-info text-center mb-0 rouded-0 alert-dismissible fade show">
        Alert!Alert!Alert!Alert!Alert!
        <button class="close" data-dismiss="alert">
          &times;
        </button>
</div>
```

divタグの中に
class="
alert
alert-info（文字色指定）
text-center（中央ぞろえ）
mb-0（下の余白がなくなる
rouded-0（丸角がなくなる）
alert-dismissible（×ボタンで消える）
fade show"（ゆっくり消える）
を書く。

×ボタンになるbuttonタブには
class="close" 
data-dismiss="alert"
を書くことで押したらアラートが消える仕様を実装できる。

# まとめ

以上のようにBootstrapは簡単にUIデザインを作ることができる。
その他の書き方は公式サイト参照するとよい。
https://getbootstrap.com/