Cards

CH7 59
課程練習下載
Bootstrap 路徑 : Components / Card

| Card 基本架構 | 範例

Bootstrap-card-基本架構01

  • Card 是使用 flex 建構
    • .card
      • img.card-img-top ( .card-img-top 為上方兩側有圓角 ,.-card-img-bottom 為下方兩側有圓角 )
      • .card-body
        • .card-title
        • .card-subtitle .text-muted ( 如果沒有副標可略 )
        • .card-text
        • a .btn .btn-顏色
  • .card-text 範例
    • 開發者中具顯示 .card-text:last-child { margin:0; }
    • :laste-child 表示最後一個子元素
    • 參考文章 : MDN web – :last-child

| Card – header and footer | 範例

Bootstrap-card's header and footer

  • .card 內加入 .card-header.card-footer
  • .card-header 上方呈現圓角,.card-footer 則下方呈現圓角
<div class="card text-center">
  <div class="card-header">Featured</div>
  <div class="card-body">...</div>
  <div class="card-footer text-muted">2 days ago</div>
</div>

| Card – Quote |

Bootstrap-card's quote

<div class="card">
  <div class="card-header">Quote</div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Sizing

| Card – 透過 Grid 調整卡片大小 Using grid markup | 範例

  • 使用網格,根據需求按照行與列包裝卡片
    • .row.col 包覆 .card
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">...</div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">...</div>
    </div>
  </div>
</div>

| Card – Text alignment 文字對齊 |

  • 使用 text-align Classes 來改變文字的方向 ( 靠左 , 靠右 , 置中 )
    • .text-left , .text-right , .text-center

| Card – Navigation 導覽 | 範例

使用 Bootstrap Nav components 在 card 內添加 navigation

  • .card-header-tabs 導覽元件示意圖 ↓
    Bootstrap-.card-header-tabs-導覽元件示意圖

  • .card-header-pills 導覽元件示意圖 ↓

Bootstrap-.card-header-pills--導覽元件示意圖

  • 不論是 .card-header-tabs.card-header-pills 都要加上對應的 Class name 讓它顯示正常
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">...</div>
</div>

| Images overlays 圖片覆蓋 | 範例

Bootstrap-Images-overlays-圖片覆蓋

  • img 加上 .card-img ( 四角圓角 )
    • .card-img-top 上方圓角
    • .card-img-bottom 下方圓角
  • .card 內的 .card-body 換成 .card-img-overlay 包覆內文 .card-title.card-text
<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

| Horizontal 水平排列 | 範例

Bootstrap-Horizontal-水平排列

  • 使用 Grid ( .row 與 .col- )實現卡片水平排列
    • .col- 可加入響應式斷點

| Card style | 範例

  • Background and color , border
    • 帶入 Utilities / Color 中的 Class 可以更換卡片背景色與外框顏色
      • .bg-主題色 , .border-主題色
    • 卡片背景色變透明

| Card layout |

  1. .card-group 範例
    • 卡片群組化 ( 直式排列變示意圖橫式排列 ) ,中間沒有 gutter
    • .card-group 包覆 .card 結構

Bootstrap-.card-group中間沒有gutter

<div class="card-group">
    <div class="card">...</div>
</div>
  1. .card-deck 範例
    • 卡片群組化 ( 直式排列變示意圖橫式排列 ) ,中間有 gutter
    • .card-deck 包覆 .card 結構

Bootstrap-.card-deck中間有gutter

<div class="card-deck">
    <div class="card">...</div>
</div>
  1. .card-columns 範例
    • 能容納的 card非常多,是瀑布流的排版,由上至下左至右排列自行調整大小,與 Grid 的 column 是不同的。

| 課堂問與答 | 出處

『 問 』請問 .card-group.card-deck 裡面的卡片可以一樣透過加上 row 和 col- 修改成不同欄寬嗎?
『 答案 』範例


資料來源

最後修改日期: 12 3 月, 2020

作者