Bootstrap4移行ガイドを読む(コンポーネント編、カード)
- カードコンポーネントはでかい。ヘッダーとフッターのオプション、多種多様なコンテンツ、文脈上的な背景色、強力な表示用のオプションが組み込まれている
- Flexboxで配置されている
- デフォルトで余白は設定されてないので、余白をあけたいときは空白ユーティリティクラスを利用する
- デフォルトで固定幅は設定されてないので、横幅を設定したいときはサイズオプションを利用する
- 段落のテキスト配置はテキストユーティリティクラスを利用する
- コンテンツタイプ
- ヘッダーコンテナー ...
.card-header
h*.card-header
でもヘッダーをつくれる
- フッターコンテナー ...
.card-footer
- ボディーコンテナー ...
.card-body
- ボディーコンテナーに内包される要素
- タイトル ...
.card-title
- サブタイトル ...
.card-subtitle
- テキスト ...
.card-text
(最後のテキスト要素をmargin-bottom: 0
にしたり) - リンク ...
.card-link
- 画像 ...
.card-img-*
- リスト ...
.list-group.list-group-flush
でボディーコンテナーの要素をリストの見た目にできる - 引用 ...
.blockquote
で引用のテキストを追加できる- 引用元を示すには
.blockquote-footer
を指定する
- 引用元を示すには
- タイトル ...
- ボディーコンテナーに内包される要素
- ヘッダーコンテナー ...
- ナビゲーションコンポーネントを使えば、カードのヘッダーにナビゲーションを追加できる
- タブナビゲーション
.card-header
の子要素に.nav.nav-tabs.card-header-tabs
を追加する
- ピルナビゲーション
.card-header
の子要素に.nav.nav-pills.card-header-tabs
を追加する
- タブナビゲーション
- カラーユーティリティクラスを使えばカードの文字・背景色を変更できる
- 境界ユーティリティクラスを使えば枠線の色を変更できる
.card-group
クラスで複数のカードを包めば、包まれたカードは中身が違っても幅と高さが揃うようになる.card-group
と同じ効果はほしいけど、カード同士の余白をあけたい場合は.card-deck
クラスを使う.card-columns
クラスを使えば、上部左側からカードが敷き詰められた表示にできる