|
1.Card卡片 一個可以添加圖像、標(biāo)題、文本、列表、按鈕等多種或一種內(nèi)容的容器。 ?、?基本樣式 主要構(gòu)成： ?、?nbsp;卡片容器，<div class="card"> ?、?圖片，<img class="card-img-top">，可以放在 body之前或之后 ④ 卡片體，<div class="card-body">，一個 card內(nèi)可以多個 body ⑤ 卡片標(biāo)題，<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>
?、?nbsp;添加列表組 卡片中可以根據(jù)需要添加列表組，即在卡片內(nèi)部添加 ul>li列表 主要構(gòu)成： ?、?nbsp;卡片容器，<div class="card"> ?、?nbsp;列表 ul，<ul class="list-group list-group-flush"> ?、?nbsp;列表 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>
?、?nbsp;頁眉頁腳 ?、?可根據(jù)需求在卡片內(nèi)某個位置添加頭部樣式，示例如下： <div class="card-header"> HeaderText </div> “.card-header”也可以添加到<h*>標(biāo)簽或其他標(biāo)簽中。 ?、?nbsp;可以在卡片內(nèi)添加頁腳樣式，示例如下： <div class="card-footer"> FooterText </div> ps：可以向 card內(nèi)的文本內(nèi)容添加“.text-* ”字體樣式或?qū)R樣式。 ?、?nbsp;響應(yīng)式卡片 可以根據(jù)需要將卡片包裹在柵格系統(tǒng)中，達(dá)到響應(yīng)式需求。示例如下： <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>
⑸ 卡片排版 ?、?nbsp;卡片大小 卡片的寬度可以通過行內(nèi)樣式設(shè)置，如：style="width: 18rem; 也可以通過 BootStrap預(yù)置的尺寸類，如：class="w-25"; ?、?nbsp;文本對齊 對卡片設(shè)置統(tǒng)一的對齊或字體樣式，只需要在 card容器上定義“.text-* ”類即可。 ?、?nbsp;卡片背景色 通過定義 card容器的“.bg-* ”類設(shè)置卡片的背景顏色，如：bg-primary、bg-secondary等 ?、?nbsp;卡片邊框 為 card容器定義“.border-* ”類設(shè)置卡片的邊框樣式，如：border-success、bg-danger等 ?、?nbsp;卡片字體 可以分別設(shè)置 card容器或 body的字體樣式，如：text-white、text-muted、text-warning等 ps：卡片的頁眉、頁腳、卡片體都是可以分別設(shè)置不同字體、邊框、背景等樣式的。 ?、?nbsp;卡片導(dǎo)航 可以通過在卡片中添加導(dǎo)航條，實現(xiàn)選項卡的效果（配合 js代碼切換 card-body內(nèi)容）。 在 card-body前增加 ul列表（由 div包裹）， ul元素添加的類主要有三個：.nav， .nav-tabs， .card-header-tabs； li元素添加的類主要有：.nav-item； 在內(nèi)容元素中定義選項卡的活動狀態(tài)。 <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>
?、?nbsp;圖像覆蓋 卡片中的圖片可以作為文本內(nèi)容的背景圖片呈現(xiàn)， 此時基本樣式中所說的 圖片 和 卡片體 需要設(shè)置不同的類。 ?、?nbsp;圖片，<img class="card-img"> ?、?nbsp;卡片體，<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>
⑻ 水平排列 通過將圖像與文本內(nèi)容分別放在響應(yīng)式布局的容器中實現(xiàn)二者的水平方向排列。 <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的內(nèi)邊距。 ?、?nbsp;卡片組 多個具有相同寬度和高度的卡片外部再嵌套一個組容器，就形成了卡片組。 class="card-group"，每個卡片緊挨在一起 class="card-deck"，每個卡片之間有間隔（也稱為卡片甲板） ?、?nbsp;其他 柵格卡片，可以控制每行最多顯示的卡片數(shù)量 卡片列，可以類似于瀑布流布局卡片 2.輪播圖 ?、?基礎(chǔ)框架 由4層構(gòu)成： ?、?nbsp;外層容器，整個輪播圖所有控件的容器， “.carousel”類為必須的輪播樣式 “.slide”類定義滑動效果 data-ride="carousel"屬性用于自啟動輪播 “id”用于內(nèi)部控件間調(diào)用 ?、?nbsp;內(nèi)部容器 用于包裹輪播圖主體內(nèi)容 class="carousel-inner" ③ 圖片容器 用于包裹 img圖像 class="carousel-item active" ?、?nbsp;img圖像 class="d-block w-25"，定義為塊級元素，設(shè)置大小樣式 示例如下： <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>
?、?nbsp;在基礎(chǔ)框架中還可以添加多種元素內(nèi)容和輪播效果： ?、?滑動按鈕 使用<a>標(biāo)簽作為按鈕容器 樣式類，class="carousel-control-prev"，定義對應(yīng)方向樣式 鏈接，href="#carouselExample"，鏈接與外層容器“id”相同 屬性，data-slide="prev"，定義滑動事件 按鈕<span>，class="carousel-control-prev-icon"，定義按鈕圖標(biāo) ② 錨點指示 使用 ol無序列表設(shè)置錨點標(biāo)識 錨點<ol>，class="carousel-indicators" 錨點<li>target，data-target="#carouselExample"，與外層容器“id”相同 錨點<li>屬性，data-slide-to="0"，關(guān)聯(lián)對應(yīng)圖片的索引位置 錨點<li>類，class="active"，定義加載頁面是的活動狀態(tài) ?、?nbsp;圖片描述 在圖片容器中添加 div文本容器 class="carousel-caption d-none d-md-block" ④ 淡入淡出 直接在外層容器添加“.carousel-fade”類即可 ?、?nbsp;自動輪播 給圖片容器 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中文網(wǎng)（https://v3./）
|
|
|
