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/