Bootstrap(勉強メモ)

※学習時のメモです。
## Bootstrapとは
HTML、CSS、JavaScriptからなる巨大なライブラリ（コード集） 
twitterのような見た目のサイトを作る為の部品が多い 
Bootstrap4の利用には、jQueryとpopper.jsを利用する  

#### * Bootstrapの読込み  
CDNを使う：Bootstrapなどの公開ライブラリを自由に使えるよう、Web上に設置(ホスティング)してくれるサービス  
[Bootstrap](https://getbootstrap.com/docs/4.3/getting-started/introduction/)の「Quick start」ならびに「Starter template」のサンプルコードをコピーして使う。ただし lang="en" を lang="ja" にする  

〔Bootstrap Template〕

```html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

        <title>Hello, world!</title>
    </head>
    <body>
        <h1>Hello, world!</h1>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS, then Font Awesome -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
    </body>
</html>
```

#### * viewportの設定
スマホ対応の為に設定する  
viewport：スマホ、PC画面の表示領域。head要素内のmetaタグで指定。  
```<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">```  
↑Bootstrapのテンプレに記載されたコードの意味👇  
・表示領域の横幅をデバイスと同じ横幅にする
（width=device-width)  
・表示倍率を1倍にする（initial-scale=1）  
・iOSのSafariで表示倍率を自動的に縮小を無効化（shrink-to-fit=no）  

#### ●レスポンシブデザイン：多様な画面サイズに適応する様に配慮しながらページを作成する手法  
基本はメディアクエリ：特定の表示環境に対してだけCSSを適用  
※CSSの優先順位には影響しない為、上方に広い条件、下方に狭い条件を記述  
表示内容が切り替わるサイズ幅👉ブレイクポイント  

#### ●グリッドシステム：横幅全体が12カラム(列)で構成、横幅に割り当てるカラム数を指定し、要素を配置していく  

(使い方)  
①グリッドを使う範囲を囲うブロック要素にcontainerクラスをつける。 
②containerのブロック中にブロック要素のrowクラスを用意 
③rowの中に要素を配置し、カラム数を設定 
・カラム数の指定：```col-[画面サイズ]-[カラム数]```  

```html
<div class="container">
       <div class="row">
             <div class="col-md-6">col-md-6</div>
             <div class="col-md-6">col-md-6</div>
       </div>
</div>
```  
col-md-6 👉　ｳｲﾝﾄﾞｳ幅がmd(ﾀﾌﾞﾚｯﾄ=768px)以上の時に6ｶﾗﾑ分を使用、それ未満は通常のdivの挙動で横幅100％  
col-*　：～575px スマホ縦 
col-sm-* ：576～767px スマホ横 
col-md-* ：768～991px タブレット 
col-lg-* ：992～1199px デスクトップPC 
※異なるサイズを同時に指定すると、サイズが大きいものが優先される。col-6 col-lg-4と指定→スマホとタブレットでは6カラム、デスクトップでは4カラム幅になる。  

・隙間を空ける 
```offset-[画面サイズ]-[カラム数]``` 
```<div class="offset-md-2 col-md-5">offset-md-2 col-md-5</div>```

#### ●Bootstrap  
HTMLの見た目をBootstrapのようにキレイにするには、基本的にclassを指定する  

###### ・```<table>```要素(表)に```class="table"```をつけるだけで見栄えが良くなる  
他にも… 
table-striped:行ごとに背景色が交互に変わる 
table-borderd:各セルに枠がつく 
table-hover:マウスを乗せると行がハイライトされる 
table-sm:余白を詰めてコンパクトに 
∴class属性を複数指定も可
```<table class="table table-striped…">```  
    
###### ・< input>要素に```form-control```クラスを付けるだけで、かっこよくなる。  
また、各要素をブロックレベル要素で囲み、```form-group``クラス追加で、要素間に余白が入る形でフォーム部品が配置される。  

```html
<form>
    <div class="form-group">
        お名前
        <input type="text" class="form-control">
    </div>
</form>
```  
###### ・横に並べる：Bootstrapでは通常、フォームの各要素は横幅100%で表示され、縦に並ぶ。要素の左右にラベル（<label> 要素）を配置したい場合、グリッドのところで説明した```row```や```col-*-*```クラスを利用する  
ラベルには```col-form-label```クラスを追加  

###### ・アクセサリをつける 
①アクセサリをつけたい部品の親要素に```input-group```クラスをつける  
②アクセサリをつけたい要素自身にもクラスを付与  
```input-group-prepend```で左端(要素の前)、 
```input-group-append```で右端(要素の後ろ)にアクセサリ追加 
アクセサリに表示したい文字列は<span>要素で囲い、```input-group-text```クラスを追加 
 
```html
<form>
      郵便番号
      <div class="form-group input-group">
          <!-- 左端につけるアクセサリ -->
          <div class="input-group-prepend">
              <span class="input-group-text">〒</span>
          </div>
          <input type="text" class="form-control" placeholder="000-0000">
      </div>
</form>
```

###### ・ボタン 
(< a>< button>< input>)を、Bootstrap風の見た目のボタンに変更 
```btn```および```btn-[色の種類]```クラスを追加  

```html
<a href="#" class="btn btn-primary">aボタン</a>
<input type="submit" class="btn btn-primary" value="inputボタン">
<button class="btn btn-primary" type="submit">buttonボタン</button>
```  
btn-blockクラス追加で、指定カラム数の幅に対して100％幅表示
  
```html
<div class="row"> 
  <div class="col-8">xxx</div> 
  <div class="col-4">
    <button type="button" class="btn btn-primary btn-block">Block level button</button> 
    <button type="button" class="btn btn-secondary btn-block">Block level button</button> 
  </div> 
</div>
``` 

###### ・ドロップダウンメニュー 
親要素< div>に```dropdown-menu```、子要素< a>に```dropdown-item```クラスを追加(ul、liは使わない)  

```html
<div class="dropdown">
    <button type="button" class="btn btn-light dropdown-toggle"data-toggle="dropdown">
       操作
    </button>
    <!-- 選択肢 -->
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">返信</a>
        <a class="dropdown-item" href="#">転送</a>
        <div class="dropdown-divider"></div> <!--区切り線？-->
        <a class="dropdown-item" href="#">削除</a>
    </div>
</div>
```  

###### ・タブを使ったナビゲーション  
複数コンテンツを切替え表示したいときに使う。タブのナビゲーションを使う事で、今どのコンテンツが表示されているかが分かりやすい。 
< ul>に```nav```と```nav-tabs```クラス、< li>に```nav-item```クラス、< a>に```nav-link```クラスを追加。「現在このコンテンツを表示しています」状態を表示するには、< a>に```active```クラス追加。  

```html
<ul class="nav nav-tabs">
    <li class="nav-item"><a href="#" class="nav-link active">収入</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>
```  

###### ・ナビゲーションバー  
サイト上部につくメニュー。横幅で表示を切り替え。  
①ベースのナビゲーションバーを作る 
(1)< nav>要素に```navbar```と```navbar-expand```クラス追加 
(2)バーの中に表示する内容の色決め。```navbar-light```で背景色明るく、```navbar-dark```で暗め。 
(3)背景色は```bg-[色の種類]```追加。今回は```btn-light``` 
(4)左端に表示されるサイト名は< a>要素で囲みリンク設定。必ず```navbar-brand```を追加する。 

②メニュー項目を追加 
(1)リスト< ul>を追加し、各メニュー項目はリストアイテム< li>にする。また、リンクとして設定。 
(2)< ul>に```navbar-nav```、< li>へ```nav-item```、< a>に```nav-link```クラス追加。 
(3)どのコンテンツを表示しているかを分かりやすくするために、該当のメニュー項目に```active```クラスを追加。 

③ドロップダウン型のメニュー項目追加 
ドロップダウンを開くとサブメニューが表示されるよう設定 
(1)追加するリストアイテムの< li>に```dropdown```クラスを追加 
(2)追加したリストアイテムの< a>に```dropdown-togle```クラス追加 
(3)サブメニューは追加したリストアイテムの下に、ドロップダウンメニューセクションで紹介したのと同じように< div>< a>追加 
(4)ドロップダウン化した< a>に```data-toggle="dropdown"```属性を追加 

④スマホ画面幅の場合、メニューを折りたたむ  
(1)< nav>につけていた```navbar-expand```を```navbar-expand-[画面サイズ(lgやsm)]```にする。※グリッド参照 
画面サイズ未満の時、メニュー表示が変わる。 
(2)3本線のボタンを用意。以下のような< button>要素を追加。 
これをサイト名のリンク(< a href="#" class="navbar-brand">)直前に書くとボタンは左側、リンク直後に書くと右側に表示される。

```html
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-bar">
    <span class="navbar-toggler-icon"></span>
</button>
```
(3)```<ul class="navbar-nav">```の要素を加工親要素< div>を記述。 
その< div>に```collapse```と```navbar-collapse```クラスを追加し、```id="nav-bar"```というid属性を追加。 
nav-barというIDは3本線の< button>で```data-target="#nav-bar"```と設定したことによる。```data-target```の設定内容を変更している場合、その内容と< div>のID属性が同じ名前になるようにする。  

```html
    <nav class="navbar navbar-expand-sm navbar-light bg-light">
            <!-- ホームへ戻るリンク。ブランドロゴなどを置く。 -->
            <a href="#" class="navbar-brand">P&amp;K</a>

            <!-- 横幅が狭いときに出るハンバーガーボタン -->
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-bar">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- メニュー項目 -->
            <div class="collapse navbar-collapse" id="nav-bar">
                <ul class="navbar-nav">
                    <li class="nav-item active"><a href="#" class="nav-link">子犬</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">子猫</a></li>
                    <li class="nav-item dropdown">
                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">会社情報</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">ビジョン</a>
                            <a class="dropdown-item" href="#">会社概要</a>
                            <a class="dropdown-item" href="#">地図</a>
                            <a class="dropdown-item" href="#">沿革</a>
                        </div>
                    </li>
                    <li class="nav-item"><a href="#" class="nav-link">お問い合わせ</a></li>
                </ul>
            </div>
        </nav>
```  

⑤バッジ（ラベル） 
テキストなどに装飾したい場合、```badge```と```badge-[色の種類]クラスを追加。
 
###### ・ボタンの中で件数表示するバッジ 
ボタンの表示内容に数値を追加し、新着通知の件数を表示するには、数値を< span>で囲み、```badge```と```badge-pill```,```badge-[色の種類]```の3つのクラスを追加。  

```html
<button class="btn btn-primary">
    受信トレイ <span class="badge badge-pill badge-light">7</span>
</button>
```  

⑥アラート：何らかのアクションを行ったときに結果を表示 
```alert```と```alert-[色の種類]```クラスを追加 
(ユーザー登録などに成功・失敗した結果など) 

⑦カード 
情報をグループ化したいときに、ブロック要素に```card```クラスを追加するだけ。 
```card```クラスの要素の中に、タイトル用ブロック(```card-header```クラスを付けた要素)と、本文用ブロック(```card-body```クラスを付けた要素)を中に入れる。 

```html
<div class="card">
    <div class="card-header">
        新着情報
    </div>
    <div class="card-body">
        <a href="#">友達リクエストが1件あります</a><br />
        <a href="#">メッセージが3件届いています</a><br />
        <a href="#">今日開催のイベントがあります</a><br />
    </div>
</div>
```  

###### (参考) 
ユーティリティクラス：margin,paddingなどのCSSを書かなくて済む。 
・marginとpadding 
 用意された命令を使い、```[余白の種類][余白の場所]-[余白の大きさ]```の記述で使う。 
たとえば```mt-1``` なら「ほんの少しの margin-top の余白」、pb-4 なら「割と広い padding-bottom の余白」となる  

・border 
ブロック要素に罫線を引く```border```クラス、border-[罫線の場所]クラスがある。
・text-align(文字の寄せ) 
```text-[寄せる方向]```  

・Flexboxモデル 
横並びにしたい複数要素を囲った親要素に```d-flex```と```flex-low```クラスをつける。  
要素を寄せる方向や各要素間の余白を、```justify-content```クラスで決められる。 
```justify-content-start```左寄せ(要素間余白なし) 
```justify-content-end```右寄せ(要素間余白なし) 
```justify-content-center```中央寄せ(要素間余白なし) 
```justify-content-between```最初が左端、最後が右端、残りは均等余白で 
```justify-content-around```すべて均等な余白で
    
⑦外部アイコン追加(Font Awesome) 
・BootstrapのHTMLテンプレートの< body>の下方、< script>の要素が記述されている場所に、以下を入れる。  

```HTML
<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
```  

 ・[Font Awsome](https://fontawesome.com/icons?d=gallery&m=free)でアイコンを選び、詳細ページで記述方法が表示されるので、タグの文字列にカーソルを合わせコピー。 
コピーした記述を使いたい場所にペースト。