Bootstrapについてゼロから学習

初学者がBootstrapについてゼロから学んだことを記述しています。

＃Bootstrapとは
　様々なブラウザや画面サイズに対応した本格的なWEBサイトを簡単に作ることができる`WEBフレームワーク`である。
　※WEBフレームワークは、WEBサイトの開発を容易にする「雛形」のこと

　●Bootstrapのメリット
　　・個人開発〜大規模開発まで幅広い用途に対応
　　・レスポンシブデザイン
　　・テンプレートやプラグインによるカスタマイズ
　　　等を簡単に実装することができ、短期間で本格的なWEBサイトを作成できる。
　●デメリット
　　・独自のルールを学習する必要がある
　　・似たようなデザインになりやすい
　　・細かくカスタマイズすると逆に工数が増える


　　

####Bootstrapの機能
#####グリッドシステム
　　グリッドシステム=画面を縦に分割して、ブロックごとに図や文章を配置する手法で、画面サイズに合わせてコンテンツの幅と数を制御できる。
　　※縦に分割した列１つ１つをグリッドという
　　グリッドシステムでは、必ず`全体を「container」または「container-fluid」というクラスで囲む`。
　　●containerを使用した場合
　　　画面幅に応じて、コンテンツや余白の幅が自動で変わる。

|ウィンドウ幅|内部コンテンツ幅|
|:-:|:-:|
|576px未満|ウィンドウ一杯|
|576〜768px未満|常に540px|
|768〜992px未満|常に720px|
|992〜1200px未満|常に960px|
|1200px以上|常に1140px|
　　●container-fluidを使用した場合
　　　画面幅に関係なく、常に画面いっぱいに広がる
　　
　　●rowとcolを使う
　　　内部コンテンツは、row(行)の中に、col(列)で作成する

```html:例):画面を等間隔で3分割する場合
  <body>
    <div class="container"> <!--全体をcontainerで囲む-->
      <div class="row"> <!--rowでcolを囲む-->
        <div class="col" style="background":red; height:200px;">A</div>
        <div class="col" style="background":yellow; height:200px;">B</div>
        <div class="col" style="background":blue; height:200px;">C</div>
      </div>
    </div>
  </body>
```
```html:例):画面を非等間隔で3分割する場合
  <body>
    <div class="container"> <!--全体をcontainerで囲む-->
      <div class="row"> <!--rowでcolを囲む-->
        <!--colのあとに「-数字」で縦に12分割のうち、どれくらいの幅にするか指定する-->
        <div class="col−３" style="background":red; height:200px;">A</div>
        <div class="col-4" style="background":yellow; height:200px;">B</div>
        <div class="col-5" style="background":blue; height:200px;">C</div>
      </div>
    </div>
  </body>
```
#####レスポンシブデザイン
　横幅が長いPC画面と、横幅が短いスマホなどの画面では表示が変わる
　**ブレイクポイント**
　　PC表示とスマホ表示が変わる境界線をブレイクポイントと言う。
　　`一般的には、768px(col-md)でPC表示とスマホ表示を切り替える`

||0〜575px|576〜767px|768〜991px|992〜1999px|1200px以上|
|:-:|:-:|:-:|:-:|:-:|:-:|
|クラス|col|col-sm|col-md|col-lg|col-xl|

```html:例):画面を非等間隔で3分割する場合【レスポンシブデザイン】
  <body>
    <div class="container"> <!--全体をcontainerで囲む-->
      <div class="row"> <!--rowでcolを囲む-->
        <!--col-md(768px)がブレイクポイントということ-->
        <div class="col-md−３" style="background":red; height:200px;">A</div>
        <div class="col-md-4" style="background":yellow; height:200px;">B</div>
        <div class="col-md-5" style="background":blue; height:200px;">C</div>
      </div>
    </div>
  </body>
```

```html:例):画面を非等間隔で3分割する場合【スマホ表示も横並び】
  <body>
    <div class="container"> <!--全体をcontainerで囲む-->
      <div class="row"> <!--rowでcolを囲む-->
        <!--col-md(768px）未満の時はそれぞれcol-4で、それ以上の時は3,4,5ということ)-->
        <div class="col-4 col-md−３" style="background":red; height:200px;">A</div>
        <div class="col-4 col-md-4" style="background":yellow; height:200px;">B</div>
        <div class="col-4 col-md-5" style="background":blue; height:200px;">C</div>
      </div>
    </div>
  </body>
```
　**画面幅に応じた要素の非表示**
　class="d-●●-none"とすると、
　`●●pxの画面以上は、特定の要素を非表示`にできる。

||0〜575px|576〜767px|768〜991px|992〜1999px|1200px以上|
|:-:|:-:|:-:|:-:|:-:|:-:|
|特定の要素を<br>非表示にするクラス|d-none|d-sm-none|d-md-none|d-lg-none|d-xl-none|

```html:例):768px以上はAの要素を非表示
  <body>
    <div class="container"> <!--全体をcontainerで囲む-->
      <div class="row"> <!--rowでcolを囲む-->
        <!--md(768px）以上の時はそれぞれcol-4で、それ以上の時はA要素を非表示ということ)-->
        <div class="col-１２ d-md-none" style="background":red; height:200px;">A</div>
        <div class="col-６ col-md-8" style="background":yellow; height:200px;">B</div>
        <div class="col-６ col-md-４" style="background":blue; height:200px;">C</div>
      </div>
    </div>
  </body>
```

　**画面幅に応じた要素の表示**
　class="d-none d-●●-block"とすると、
　`●●pxの画面以上は、特定の要素を表示する`ことができる。

||0〜575px|576〜767px|768〜991px|992〜1999px|1200px以上|
|:-:|:-:|:-:|:-:|:-:|:-:|
|特定の要素を<br>表示するクラス|d-block|d-sm-block|d-md-block|d-lg-block|d-xl-block|

```html:例):768px以上はAの要素を表示
  <body>
    <div class="container"> <!--全体をcontainerで囲む-->
      <div class="row"> <!--rowでcolを囲む-->
        <!--md(768px）未満の時はA要素を非表示で、768px以上の時はA要素を表示する)-->
        <div class="col-１２ d-none d-md-block" style="background":red; height:200px;">A</div>
        <div class="col-8" style="background":yellow; height:200px;">B</div>
        <div class="col-4" style="background":blue; height:200px;">C</div>
      </div>
    </div>
  </body>
```

　**②シンプルで見やすいテーブル**
　　
　**③デザインされたボタン**
　　
####Bootstrapの仕組み
　CSSとJavaScriptにより構成されている。
　Bootstrapを使用するには
　①ネット上のBootstrapファイルを読み込んで使う...CDN(Contents Delivery Network)
　②ソースファイルをダウンロードして使う
　③コンパイル済みのファイルをダウンロードして使う
　※本記事では③を仕様

####Bootstrapの読み込み
　　●HTMLの<head>タグ内にcssファイルのパスを記述
　　　<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
　　●HTMLの</body>直後にjsファイルのパスを記述
　　　<script src="./bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

####画像やブロック要素の調整
#####img-fluid
　　画像の幅をブロック幅に合わせて表示する
　　＜img src="ファイル名" Class="img-fluid"＞

#####paddingとmargin
　　padding...　class="**p●-X**"
　　margin...　class="**m●-X**"

　　方向を指定する(●の部分)
|記述方法|t|r|b|l|x|y|無し|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|間隔を開ける方向|上|右|下|左|上下|左右|上下左右|

|記述方法|0|1|2|3|4|5|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|間隔|0|0.25rem|0.5rem|1rem|1.5rem|3rem|

#####Bootstrap特有のclass
######①左寄せ、中央寄せ、右寄せ
　　**左寄せ**...　class="text-left"
　　**中央寄せ**...　class="text-center"
　　**右寄せ**...　class="text-right"
　　
######②見出し
　　**h1**...　＜h1＞＜/h1＞　または　class="h1"
　　**h2**...　＜h2＞＜/h2＞　または　class="h2"

######③リスト
　　**＜li＞＜/li＞のデフォルト設定の点を削除**...　class="list-unstyled"
　　**リストでテキストを横並びにする**...　＜ul class="list-inline"＞
　　　　　　　　　　　　　　　　　　　　＜li class="list-inline-item"＞＜/li＞
　　　　　　　　　　　　　　　　　　＜/ul＞

######④幅や高さの指定
　　**幅や高さを指定するclass**
　　　`幅を指定するclass`

|記述方法|w-25|w-50|w-75|w-100|mw-100|w-auto|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|意味|width:25%|width:50%|width:75%|width:100%|width:100%|max-width:100%|width:auto|

　　　`高さを指定するclass`

|記述方法|h-25|h-50|h-75|h-100|mh-100|h-auto|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|意味|height:25%|height:50%|height:75%|height:100%|height:100%|max-height:100%|height:auto|

※横幅、高さを%で指定した場合、親要素を100%とした時の割合で表示される

######⑤float
　　グリッドシステムを無視して要素を横並びにする場合、
　　通常のHTML/CSSのようにfloatを使用

　　**左寄せ**...　class="float-left"
　　※floatさせる要素自体に指定
　　**右寄せ**...　class="float-right"
　　※floatさせる要素自体に指定
　　**float解除**...　class="clear-fix"
　　※floatさせる要素全体を囲む親要素に指定

######⑥ナビゲーションバーの型
　　「navbar」「navbar-expand-ブレイクポイント」の2つのclassを記述
　　＜nav class="navbar navbar-expand-ブレイクポイント＞
　　　　リストでナビゲーションバーを作成する場合は、ulに「navbar-nav」というclassを記述
　　　　＜ul class="navber-nav"＞
　　　　　liに「nav-item」、aに「nav-link」というclassを記述
　　　　　＜li class="nav-item"＞＜a href="●●" class="nav-link＞XXXX＜/a＞＜/li＞
　　　　　
　　　　＜/ul＞
　　＜/nav＞ナビゲーションバーは＜nav＞で囲む