はじめに

以前Rails Tutorialを勉強していたときに写経で触ったことがあったBootstrap4について改めて勉強したのでまとめていこうと思う。

CDNによる読み込みとBootstrap4の試運転

CDNによる読み込み

公式ドキュメント-日本語版-にも記述されているが、

Bootstrap4のCSSを<head>内部で読み込む
JSのプラグインを</body>直前で読み込む

ことでBootstrap4を読み込むことができる。

Bootstrap4の試運転

上記を元に読み込んでみて、Bootstrap4を試運転してみました。

See the Pen PoNwZrX by KKZoo (@kkzoo) on CodePen.

ナビゲーションバーについて

<nav>内部に記述することで、サイトのヘッダーやフッターに用いられるバーのデザインを作ることができる。

See the Pen qBZEZYM by KKZoo (@kkzoo) on CodePen.

fixedで上下に固定

今回は下に固定したが<nav>内部にfixed-topもしくはfixed-bottomで位置を固定することができる。参照

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

ハンバーガーボタンの実装

<nav></nav>の内側に記述し、<nav>タグ内のnavbar-expand-lgにて横幅を設定してその横幅に反応して、ハンバーガーボタンと横並びのボタンを入れ替えることができる。

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTextContent" aria-controls="navbarTextContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTextContent">
        ~中略~
      </div>

グリッドシステムについて

グリッドシステムとはflexboxを用いてサイトの大まかなレイアウトを容易に作成できるシステム。

windowの横幅を12分割した際の何分割を割り当てるのかでレイアウトを調整できる。
flexboxを細かく設定する手間が省ける。

window幅によるブレークポイントの表

	Extra small	Small	Medium	Large	Extra large
最大横幅	None(auto)	540px	720px	960px	1140px
クラス名	.col-	.col-sem-	.col-md-	.col-lg-	.col-xl-

実際に使ってみた

See the Pen グリッドについて by KKZoo (@kkzoo) on CodePen.

実際に使ってみてわかったこと

paddingは枠の内側に左右に対して入っている(画像が入ってる奴がわかりやすい)
上下には余白がないのでmb-*かmt-*でマージンをつける必要がある。

終わりに

Bootstrap4にはチートシートがあるので、他にデザインをみたい場合は公式ドキュメントやチートシートを有効活用していく必要がある。

Bootstrap 4 Cheat Sheet

KKZooの備忘録

Bootstrap4の基礎勉強