https://namikuguri.hatenablog.com/entry/2018/03/18/093329

グローバル設定、見出し、本文、リスト、リンクなどインライン要素の文字の体裁
見出しは h1 〜 h6 まで利用可能（HTML上見出しではなくとも、.h1 〜 .h6 クラスを使うことで同等の見た目にできる）
<small class="text-muted"> を見出しのHTMLの中に入れると、そばに小さめの補助文をつけることができる
見出しをより目立たせたい場合は、h1 よりさらに大きな表示見出しを使う。表示見出しは .display-1 〜 .display-4 まで4段階ある
段落を目立たせるには .lead クラスを適用
mark、del、s、ins、u、small、strong、em 要素にも装飾がほどこされている
abbr 要素は下線を追加、マウスオーバーしたときにヘルプカーソルが出るように見た目を変更
マークなしリストにしたい場合は .list-unstyled クラスを使う
横並びリストは .list-inline とその子要素に .list-inline-item を適用して実装する
dl と dd 要素を横並びにした水平定義リストをつくるにはグリッドを使う
ブレークポイントに合わせて html 要素の文字サイズを変更することをBootstrapではおこなっていないが、やろうと思えばカスタマイズで簡単にできる

長いコードブロックのために .pre-scrollable クラスが用意されている。これは枠の最大の高さを 340px に設定し、それを超えた場合はY軸にスクロールバーを出現させる
変数を示すには var 要素を使う
ユーザー入力を示すには kbd 要素を使う
プログラムからのサンプル出力を示すには samp 要素を使う

Bootstrapの画像は .img-fluid クラスでレスポンシブになる。このクラスには max-width:100%; height:auto; が適用されている
.img-thumbnail というサムネイル用のクラスがあり、これは画像に丸みを帯びた1pxの境界線をつける
画像の四隅を丸めるには .rounded クラスを使う
画像の配置は横の配置ユーティリティクラスや文字の中央揃えクラスを使う
picture 要素を使う場合、.img-* クラスは picture 要素ではなく img タグにつける

サードパーティのテーブルに影響を与えないため、テーブルの設定は .table クラスを指定した場合に反映されるように設定
基本テーブルの見た目は行に横線だけが入った見た目
テーブルの線を消すには罫線ユーティリティクラスを指定する
thead 要素の色を変更するには .thead-light や .thead-dark クラスを指定する
交互に色が変わるテーブルにするには table 要素に .table-striped クラスを指定する。" tbody 内" の要素の色が変わる
テーブルの横線に加えて縦線を追加するには、.table-bordered クラスを指定する
行にマウスオーバーしたときに背景を変えるには .table-hover クラスを指定する。" tbody 内" の要素の色が変わる
余白を減らして、テーブルをコンパクトな見た目にするには .table-sm クラスを指定する
個々のセルや行に色付けするには、.table-primary クラスなどを指定する
caption 要素は要素に対してスタイルを設定済み
レスポンシブ対応のために、モバイルなどでウィンドウを飛び出るテーブルには、.table-responsive クラスを指定してテーブルを水平方向にスクロール可能にする
.table-responsive クラスは -sm などのサフィックスをつけることで、水平方向のスクロール許可のブレークポイントを指定できる