:::

18. 卡片

一、關於卡片

  1. BootStrap4 的卡片整合了 BootStrap3 的面板 (panels)、wells、縮圖 (thumbnails) ...等功能。
  2. 基本的卡片結構(若沒指定尺寸,會是滿版)
    <div class="card">
      <div class="card-header">卡片頁首</div>
      <img class="card-img-top" src="上方圖片.jpg" alt="上方圖片">
      <div class="card-body">
        <h4 class="card-title">卡片主標題</h4>
        <h6 class="card-subtitle">卡片次標題</h6>
        <p class="card-text">卡片內文</p>
        <a href="#" class="card-link">卡片連結</a>
      </div>
      <img class="card-img-bottom" src="下方圖片.jpg" alt="下方圖片">
      <div class="card-footer">卡片頁尾</div>
    </div>
  3. 基本上,卡片裡面的任何一個元件,沒用到的話都可以省略。簡單講,有需要再用即可。

  4. 一個卡片內,可以有好幾個 .card-body

二、卡片的排版

  1. 如果卡片之間不想要有空隙,可用.card-group將卡片包起來。若是有頁尾,會自動對齊,看起來很整齊。
    <div class="card-group">
        一堆卡片
    </div>
  2. 若是不希望相連,則可改用.card-deck,如此,卡片之間會有縫隙。頁尾一樣會自動對齊。

    <div class="card-deck"> 
        一堆卡片 
    </div>
  3. 上面這些都是橫式排列,亦可用直式排列,做出瀑布流的效果,只要改用.card-columns即可

    <div class="card-columns"> 
        一堆卡片 
    </div>

三、快速產生

在 Visual Studio Code 中輸入b4-card-decksEnter 可以快速產生card-deck的語法

:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D32%26tbdsn%3D963

計數器

今天: 4938493849384938
昨天: 3438343834383438
總計: 7395267739526773952677395267739526773952677395267