初学者が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(列)で作成する

例):画面を等間隔で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>

例):画面を非等間隔で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

例):画面を非等間隔で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>

例):画面を非等間隔で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以上
特定の要素を非表示にするクラス	d-none	d-sm-none	d-md-none	d-lg-none	d-xl-none

例):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以上
特定の要素を表示するクラス	d-block	d-sm-block	d-md-block	d-lg-block	d-xl-block

例):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の

タグ内にcssファイルのパスを記述
　　　
　　●HTMLの直後にjsファイルのパスを記述
　　　

画像やブロック要素の調整

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%

　　　高さを指定する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%

※横幅、高さを%で指定した場合、親要素を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＞で囲む
　　