「Bootstrap4最速の入門書(導入/コンポーネントその1)」の感想・備忘録1

管理者

3年前

posted with ヨメレバ

Amazonで見る

Kindleで見る

kindle本「Bootstrap4最速の入門書(導入/コンポーネントその1)」のまとめ。

点数
感想
基本
グリッドシステム

点数

80点

感想

サンプルソースがシンプルで、読みやすかった。

Bootstrap4についての書籍であり、Bootstrap5ではクラス名が変更されてしまったものがいくつかあった。

仕方がないことだが、Bootstrap5を使う場合は本書の内容をそのまま使うことができないのが残念。

基本

セットアップ

Bootstrap4にはjQueryとpopper.jsが必要である。
getbootstrap.com⇒Download⇒Compiled CSS and JS、でダウンロードすることができる。
Bootstrap本体にはpopper.jsが組み込まれたbootstrap.bundle.jsが含まれている。通常はこれを使用する。

<!-- head内 -->
<link rel="stylesheet" href="bootstrap-4.5.2-dist/css/bootstrap.min.css">

<!-- bodyの最後 -->
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="bootstrap-4.5.2-dist/js/bootstrap.bundle.min.js"></script>

背景色

.bg-primaryなど

<p class="bg-warning">bg-warning</p>
<p class="bg-info">bg-info</p>

幅と高さ

.w-25, .w-50, .w-75, .w-100, .w-auto
.h-25, .h-50, .h-75, .h-100, .h-auto

垂直配置

.align-topなど

※ CSSのvertical-alignの指定となるので、tdまたはインライン要素のみに有効。

<table class="bg-warning" style="height: 50px">
  <tr>
  <td class="align-top">align-top</td>
  <td class="align-middle">align-middle</td>
  <td class="align-bottom">align-bottom</td>
  </tr>
</table>

ブレークポイント

.pl-sm-3
.mt-md-4
.text-md-center

など、横幅によってレイアウトを変化させるための指定。
※ CSSのメディアクエリの指定となる。

sm >= 576px
md >= 768px
lg >= 992px
xl >= 1200px

<p class="text-md-center">text-md-center</p>

グリッドシステム

.containerまたは.container-fruidの中に.rowで行を格納し、.rowの中に.colで列を格納する。
グリッド数を指定する場合は.col-xとする。
一般的にはグリッド数を指定する。

<div class="container">
  <div class="row">
    <div class="col-3 bg-secondary">3</div>
    <div class="col-9 bg-success">9</div>
  </div>
</div>

Bootstrap5では.rowに.g-1や.g-5などを指定することで、グリッド間の左右の余白を指定できるようになった。（ガター）

折り返し

グリッド数が12を超えた段階で折り返される。

<div class="container">
  <div class="row">
    <div class="col-10 bg-warning">10</div>
    <div class="col-3 bg-info">3</div>
  </div>
</div>

グリッド数指定なし

グリッド数を指定しない場合、.colのグリッド数は12/列数となる。

<div class="container">
  <div class="row">
    <div class="col bg-secondary">6</div>
    <div class="col bg-success">6</div>
  </div>
  <div class="row">
    <div class="col bg-secondary">4</div>
    <div class="col bg-success">4</div>
    <div class="col bg-info">4</div>
  </div>
</div>

グリッド数指定ありとなしの混在

.colと.col-xが混在する場合、.colには残りのグリッドが割り当てられる。

<div class="container">
  <div class="row">
    <div class="col-6 bg-warning">6</div>
    <div class="col bg-info">3</div>
    <div class="col bg-success">3</div>
  </div>
</div>

レスポンシブ

.col-md-3
.col-lg-4

など、ブレークポイントを指定することでレスポンシブになる。

<div class="container">
  <div class="row">
    <div class="col-12 col-md-3 bg-warning">768px以上は3、未満は12</div>
    <div class="col-12 col-md-9 bg-info">768px以上は9、未満は12</div>
  </div>
</div>

表示順指定

.order-1
.order-2
.order-first
.order-last

など、タグの記述とは異なる表示順にすることができる。
.order-md-1のようにブレークポイントを指定することも可能。

<div class="container">
  <div class="row">
    <div class="col-3 order-3 bg-warning">order-3</div>
    <div class="col-3 order-1  bg-info">order-1</div>
    <div class="col-3 order-2 bg-success">order-2</div>
  </div>
</div>

オフセット

.offset-3
.offset-md-4

<div class="container">
  <div class="row">
    <div class="col-4 offset-5">col-4 offset-5</div>
    <div class="col-4">col-4は折り返しとなる</div>
  </div>
</div>

ネスト

.colの中に.rowを追加する。

<div class="container">
  <div class="row">
    <div class="col-8 bg-warning">8
      <div class="row">
        <div class="col-6">6
        </div>
        <div class="col-6">6</div>
      </div>
    </div>
    <div class="col-4 bg-info">4</div>
  </div>
</div>