Bootstrap4移行ガイドを読む（コンポーネント編、カード）

カード - Bootstrap4移行ガイド

• カードコンポーネントはでかい。ヘッダーとフッターのオプション、多種多様なコンテンツ、文脈上的な背景色、強力な表示用のオプションが組み込まれている
• Flexboxで配置されている
• デフォルトで余白は設定されてないので、余白をあけたいときは空白ユーティリティクラスを利用する
• デフォルトで固定幅は設定されてないので、横幅を設定したいときはサイズオプションを利用する
• 段落のテキスト配置はテキストユーティリティクラスを利用する
• コンテンツタイプ
  • ヘッダーコンテナー ... .card-header
    • h*.card-header でもヘッダーをつくれる
  • フッターコンテナー ... .card-footer
  • ボディーコンテナー ... .card-body
    • ボディーコンテナーに内包される要素
      • タイトル ... .card-title
      • サブタイトル ... .card-subtitle
      • テキスト ... .card-text （最後のテキスト要素を margin-bottom: 0 にしたり）
      • リンク ... .card-link
      • 画像 ... .card-img-*
        • 画像の配置変更 ... 画像の配置は変更できる。たとえば .card-img-top は画像をカードの上に置く
        • 画像のオーバーレイ ... 画像の上にテキストを重ねることができる。.card-img と同じ階層に .card-img-overlay を置く
      • リスト ... .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 クラスを使えば、上部左側からカードが敷き詰められた表示にできる