WEB前端第五十課——BootStrap組件（二）Card、Carousel

1.Card卡片

　　一個可以添加圖像、標題、文本、列表、按鈕等多種或一種內容的容器。

　　⑴ 基本樣式

　　　　主要構成：

　　　　　　① 卡片容器，<div  class="card">

　　　　　　③ 圖片，<img  class="card-img-top">，可以放在 body之前或之后

　　　　　　④ 卡片體，<div  class="card-body">，一個 card內可以多個 body

　　　　　　⑤ 卡片標題，<h5  class="card-title">

　　　　　　⑥ 卡片文本，<p  class="card-text">

　　　　　　⑦ 卡片連接，<a  class="btn btn-* ">，可以多個連接按鈕或其他按鈕

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

　　⑵ 添加列表組

　　　　卡片中可以根據需要添加列表組，即在卡片內部添加 ul>li列表

　　　　主要構成：

　　　　　　① 卡片容器，<div  class="card">

　　　　　　② 列表 ul，<ul  class="list-group  list-group-flush">

　　　　　　③ 列表 li，<li  class="list-group-item">

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

　　⑶ 頁眉頁腳

　　　　① 可根據需求在卡片內某個位置添加頭部樣式，示例如下：

　　　　　　<div class="card-header"> HeaderText </div>

　　　　　　“.card-header”也可以添加到<h*>標簽或其他標簽中。

　　　　② 可以在卡片內添加頁腳樣式，示例如下：

　　　　　　<div class="card-footer"> FooterText </div>

　　　　　　ps：可以向 card內的文本內容添加“.text-* ”字體樣式或對齊樣式。

　　⑷ 響應式卡片

　　　　可以根據需要將卡片包裹在柵格系統中，達到響應式需求。示例如下：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Special title treatment</h5>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Special title treatment</h5>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>
</div>

　　⑸ 卡片排版

　　　　① 卡片大小

　　　　　　卡片的寬度可以通過行內樣式設置，如：style="width: 18rem;

　　　　　　也可以通過 BootStrap預置的尺寸類，如：class="w-25";

　　　　② 文本對齊

　　　　　　對卡片設置統一的對齊或字體樣式，只需要在 card容器上定義“.text-* ”類即可。

　　　　③ 卡片背景色

　　　　　　通過定義 card容器的“.bg-* ”類設置卡片的背景顏色，如：bg-primary、bg-secondary等

　　　　④ 卡片邊框

　　　　　　為 card容器定義“.border-* ”類設置卡片的邊框樣式，如：border-success、bg-danger等

　　　　⑤ 卡片字體

　　　　　　可以分別設置 card容器或 body的字體樣式，如：text-white、text-muted、text-warning等

　　　　ps：卡片的頁眉、頁腳、卡片體都是可以分別設置不同字體、邊框、背景等樣式的。

　　⑹ 卡片導航

　　　　可以通過在卡片中添加導航條，實現選項卡的效果（配合 js代碼切換 card-body內容）。

　　　　在 card-body前增加 ul列表（由 div包裹），

　　　　　　ul元素添加的類主要有三個：.nav， .nav-tabs， .card-header-tabs；

　　　　　　li元素添加的類主要有：.nav-item；

　　　　　　在內容元素中定義選項卡的活動狀態。

　　　　<ul>除定義“ *-tabs”樣式，還可定義其他樣式，如：<ul class="nav nav-pills card-header-pills">

　　　　示例如下：

<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">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

　　⑺ 圖像覆蓋

　　　　卡片中的圖片可以作為文本內容的背景圖片呈現，

　　　　此時基本樣式中所說的 圖片 和 卡片體 需要設置不同的類。

　　　　　　① 圖片，<img  class="card-img">

　　　　　　② 卡片體，<div class="card-img-overlay">

　　　　示例如下：

<div class="card bg-dark text-white w-25">
    <img src="Images/stair.jpg" 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>

　　⑻ 水平排列

　　　　通過將圖像與文本內容分別放在響應式布局的容器中實現二者的水平方向排列。

<div class="card" style="max-width: 600px;">
    <div class="row no-gutters">
        <div class="col-md-4">
            <img src="Images/stair.jpg" class="card-img" alt="...">
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <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"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>
</div>

　　　　ps：在 .row類的div中增加了“.no-gutters”樣式，作用是去掉 row的外邊距和子選擇器 col的內邊距。

　　⑼ 卡片組

　　　　多個具有相同寬度和高度的卡片外部再嵌套一個組容器，就形成了卡片組。

　　　　　　class="card-group"，每個卡片緊挨在一起

　　　　　　class="card-deck"，每個卡片之間有間隔（也稱為卡片甲板）

　　⑽ 其他

　　　　柵格卡片，可以控制每行最多顯示的卡片數量

　　　　卡片列，可以類似於瀑布流布局卡片

2.輪播圖

　　⑴ 基礎框架

　　　　由4層構成：

　　　　① 外層容器，整個輪播圖所有控件的容器，

　　　　　　“.carousel”類為必須的輪播樣式

　　　　　　“.slide”類定義滑動效果

　　　　　　data-ride="carousel"屬性用於自啟動輪播

　　　　　　“id”用於內部控件間調用

　　　　② 內部容器

　　　　　　用於包裹輪播圖主體內容

　　　　　　class="carousel-inner"

　　　　③ 圖片容器

　　　　　　用於包裹 img圖像

　　　　　　class="carousel-item active"

　　　　④ img圖像

　　　　　　class="d-block w-25"，定義為塊級元素，設置大小樣式

　　示例如下：

    <div id="carouselExample" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="Images/rotation01.jpg" class="d-block w-25" alt="...">
            </div>
            <div class="carousel-item">
                <img src="Images/rotation02.jpg" class="d-block w-25" alt="...">
            </div>
            <div class="carousel-item">
                <img src="Images/rotation03.jpg" class="d-block w-25" alt="...">
            </div>
        </div>
    </div>

　　⑵ 在基礎框架中還可以添加多種元素內容和輪播效果：

　　　　① 滑動按鈕

　　　　　　使用<a>標簽作為按鈕容器

　　　　　　樣式類，class="carousel-control-prev"，定義對應方向樣式

　　　　　　鏈接，href="#carouselExample"，鏈接與外層容器“id”相同

　　　　　　屬性，data-slide="prev"，定義滑動事件

　　　　　　按鈕<span>，class="carousel-control-prev-icon"，定義按鈕圖標

　　　　② 錨點指示

　　　　　　使用 ol無序列表設置錨點標識

　　　　　　錨點<ol>，class="carousel-indicators"

　　　　　　錨點<li>target，data-target="#carouselExample"，與外層容器“id”相同

　　　　　　錨點<li>屬性，data-slide-to="0"，關聯對應圖片的索引位置

　　　　　　錨點<li>類，class="active"，定義加載頁面是的活動狀態

　　　　③ 圖片描述

　　　　　　在圖片容器中添加 div文本容器

　　　　　　class="carousel-caption d-none d-md-block"

　　　　④ 淡入淡出

　　　　　　直接在外層容器添加“.carousel-fade”類即可

　　　　⑤ 自動輪播

　　　　　　給圖片容器 div添加 data-interval="timeValue"屬性

　　示例如下：

    <div id="carouselExample" class="carousel slide w-25 carousel-fade" data-ride="carousel">
<!--    輪播圖錨點指示器    -->
        <ol class="carousel-indicators">
            <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExample" data-slide-to="1"></li>
            <li data-target="#carouselExample" data-slide-to="2"></li>
        </ol>
<!--    輪播圖主體圖片    -->
        <div class="carousel-inner">
            <div class="carousel-item active" data-interval="1000">
                <img src="Images/rotation01.jpg" class="d-block" alt="...">
<!--            輪播圖片文本描述    -->
                <div class="carousel-caption d-none d-md-block">
                    <h5>First slide label</h5>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
            </div>
            <div class="carousel-item" data-interval="2000">
                <img src="Images/rotation02.jpg" class="d-block" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Second slide label</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="Images/rotation03.jpg" class="d-block" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Third slide label</h5>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
        </div>
<!--    輪播圖手動按鈕    -->
        <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

 

參考資料來源：BootStrap中文網（https://v3.bootcss.com/）