YuHo のブログ

Laravel, PHP, JavaScript

Bootstrap 4 : Content

Reboot

ブラウザの初期設定を上書きするところから Bootstrap を考える。

Typography

.h{N}

.h1, .h2 などを p タグなどに適用すると h1 や h2 タグと同じ外見になる。

.text-muted

h1 タグなどの内側の small タグに適用すると、それを少しだけ目立たなくできる。

.display-{N}

h1 タグに .display-1 を適用すると、ヘッディングをより目立たせることができる。

.lead

p タグに適用すると、それをより目立たせることができる。

.blockquote

blockquote タグに .blockquote を適用する。

.blockquote-footer

blockquote タグの内側の footer タグに .blockquote-footer を適用すると、その部分を薄い色の文字で表示できる。引用元などを示す。
引用文献は更に cite タグで囲む。

.list-unstyled

リストの直接の小要素のスタイルを削除する。

.list-inline

リストを横に表示。先頭の点も削除。

.list-inline-item

.list-inline が適用された要素の内側の要素に適用する。

Code

.pre-scroll

pre タグに適用すると、最大の高さを350pxに限定して、それを超える場合はスクロールバーを表示する。

Images

.image-fluid

イメージの最大幅を100%に最大高さを auto にする。

.image-thumnail

イメージの周りに1pxの角が丸まった境界線を引く。

Tables

.table

table タグに適用して、Bootstrap のテーブルを利用する。背景が白色で文字が黒色。ボーダーは行のみ描写される。

.table-dark

table タグに適用して、Bootstrap のテーブルを利用する。背景が黒色で文字が白色。同時に .table も適用する必要がある。

.thead-light

thead タグに適用して、Bootstrap のテーブル・ヘッダーの挙動を変更する。背景が灰色で文字が黒色。

.thead-dark

thead タグに適用して、Bootstrap のテーブル・ヘッダーの挙動を変更する。背景が黒色で文字が白色。

.table-striped

table タグに適用して、tbody タグの挙動を変更する。背景が白色と灰色の行が交互に表示される。

.table-bordered

table タグに適用して、Bootstrap のテーブルの挙動を変更する。列にもボーダーを描写する。

.table-hover

table タグに適用して、Bootstrap のテーブルの挙動を変更する。tbody タグの内部に影響。マウスのホバー時に行をハイライト。

.table-sm

table タグに適用して、Bootstrap のテーブルの挙動を変更する。table タグの全体に影響。(特に上下の)パッディングを半分にする。

.table-{CONTEXTUAL}

tr タグ、または td タグに適用して、Bootstrap のテーブルの挙動を変更する。テーブルの列、または行に影響。表示色を変更する。.table-dark と共に利用することは基本的には不可能。

  • table-active
  • table-primary
  • table-secondary
  • table-success
  • table-danger
  • table-warning
  • table-info
  • table-light
  • table-dark

.table-responsive{-BR}

table タグの親要素となる div タグに適用して、テーブルの挙動を変更する。水平方向に表示し切れないテーブルの部分をスクロールで表示する。ブレーク・ポイントを指定すると、ウィンドウのサイズがそれより小さい場合に、表示しきれない部分をスクロールで表示する。

Figures

.figure

figure タグに適用して、Bootstrap のフィギュアを利用する。

.figure-img

figure タグの小要素の img タグに適用して、Bootstrap のフィギュアを利用する。

.img-fluid

figure タグの小要素の img タグに適用して、Bootstrap のフィギュアを利用する。.figure-img と共に適用する。

.figure-caption

figure タグの小要素の figcaption タグに適用して、Bootstrap のフィギュアを利用する。