版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/Q718330882/article/details/80749254
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>BootStrap V4 Test Page</title>
<link rel="stylesheet" href="./dist/css/bootstrap.css">
<style type="text/css">
.bd-footer {
padding: 4rem 0;
margin-top: 4rem;
font-size: 85%;
background-color: #f7f7f7;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h1 class="display-2">首頁</h1>
</div>
<div class="col-sm-4">
<h1 class="display-2">案例</h1>
</div>
<div class="col-sm-4">
<h1 class="display-2">開發文檔</h1>
</div>
</div>
<div class="row" style="margin-top: 10%">
<div class="col-sm-4">
<div class="col-sm-12">
<h3>BootStrap 列表 </h3>
</div>
<div class="col-sm-12">
<blockquote class="blockquote blockquote-reverse">
<p style="text-indent: 20px; font-size:16px;">
所有的列表——<code><ul></code>、<code><ol></code>以及<code><dl></code>——移除了它們的外邊距<code>margin-top</code>，並設置了<code>margin-bottom: 1rem</code>。嵌套的列表沒有<code>margin-bottom</code>。<strong>內聯列表</strong>（用<code>display:inline-block</code>以及一些輕填充，把所有的列表項目放在單個行內） <code><ul class="list-inline"></code>
</p>
<footer>18.06.20 11:11 <cite title="Source Title">Carey</cite></footer>
</blockquote>
</div>
</div>
<div class="col-sm-8">
<div class="col-sm-12">
<dl class="dl-horizontal">
<dt class="col-sm-3 text-truncate">Description lists</dt>
<dd class="col-sm-9 text-truncate">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3 text-truncate">Euismod</dt>
<dd class="col-sm-9 text-truncate">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd class="col-sm-9 col-sm-offset-3 text-truncate">Donec id elit non mi porta gravida at eget metus.</dd>
<dt class="col-sm-3 text-truncate">Malesuada porta</dt>
<dd class="col-sm-9 text-truncate">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9 text-truncate">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
</div>
<div class="col-sm-12" style="border-top: .25rem solid #eceeef; padding-top: 20px;">
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
</div>
<div class="col-sm-12" style="border-top: .25rem solid #eceeef; padding-top: 20px;">
<ul class="">
<li>Lorem ipsum</li>
<li>
Phasellus iaculis
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Nulla volutpat</li>
</ul>
</div>
</div>
</div>
<div class="row" style="margin-top: 10%">
<div class="col-sm-4">
<div class="col-sm-12"><h3>BootStrap 表格 </h3></div>
<div class="col-sm-12">
<blockquote class="blockquote blockquote-reverse">
<p style="text-indent: 20px; font-size:16px;">
因爲在第三方部件例如日曆和日期選擇器中廣泛使用表格，我們設計了視情況需要加入的表格類。只需要向某個<table>添加一個基類<code>.table</code>。
</p>
<footer>18.06.20 11:27 <cite title="Source Title">Carey</cite></footer>
</blockquote>
</div>
</div>
<div class="col-sm-8">
<div class="col-sm-12">
<p><code>table-inverse</code>相反表格（顏色置爲<code>#373a3c</code>）， <code>thead-default</code>表頭顏色置爲<code>#eceeef</code>，<code>thead-inverse</code>表頭顏色置爲<code>#373a3c</code>，<code>table-striped</code>條形紋，<code>table-bordered</code>表格邊框，<code>table-hover</code>懸停行</p>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>UserName</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Carey</td>
<td>Tian</td>
<td>@Carey_Tian</td>
<td>15032250258</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Aaron</td>
<td>Niu</td>
<td>@Aaron_Niu</td>
<td>15132250258</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Adam</td>
<td>Zhang</td>
<td>@Adam_Zhang</td>
<td>15232250258</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-12" style="border-top: .25rem solid #eceeef; padding-top: 20px;">
<p><code>table-sm</code>小型表格（緊促表格），<code>table-responsive</code>響應式表格，<code>table-reflow</code>表格轉秩 </p>
<table class="table table-sm">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>UserName</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td scope="row">1</td>
<td>Carey</td>
<td>Tian</td>
<td>@Carey_Tian</td>
<td>15032250258</td>
</tr>
<tr class="table-success">
<td scope="row">2</td>
<td>Aaron</td>
<td>Niu</td>
<td>@Aaron_Niu</td>
<td>15132250258</td>
</tr>
<tr class="table-info">
<td scope="row">3</td>
<td>Adam</td>
<td>Zhang</td>
<td>@Adam_Zhang</td>
<td>15232250258</td>
</tr>
<tr class="table-warning">
<td scope="row">4</td>
<td>Couch</td>
<td>Wang</td>
<td>@Couch_Wang</td>
<td>15332250258</td>
</tr>
<tr class="table-danger">
<td scope="row">5</td>
<td>Cowan</td>
<td>Li</td>
<td>@Cowan_Li</td>
<td>15432250258</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row" style="margin-top: 10%">
<div class="col-sm-4">
<div class="col-sm-12"><h3>BootStrap 按鈕 </h3></div>
<div class="col-sm-12">
<blockquote class="blockquote blockquote-reverse">
<p style="text-indent: 20px; font-size:16px;">
在表單、對話框等需要用到的場合使用Bootstrap的自定義按鈕樣式。Bootstrap按鈕支持一系列上下文變量、尺寸、狀態和其它。
</p>
<footer>18.06.20 11:59 <cite title="Source Title">Carey</cite></footer>
</blockquote>
</div>
</div>
<div class="col-sm-8">
<div class="col-sm-12">
<p><code>*-outline</code>描邊按鈕，(<code>btn-primary-outline</code>，<code>btn-secondary-outline</code>，<code>btn-success-outline</code>,<code>btn-warning-outline</code>，<code>btn-danger-outline</code>)</p>
<button type="button" class="btn btn-primary-outline">Primary</button>
<button type="button" class="btn btn-secondary-outline">Secondary</button>
<button type="button" class="btn btn-success-outline">Success</button>
<button type="button" class="btn btn-warning-outline">Warning</button>
<button type="button" class="btn btn-danger-outline">Danger</button>
</div>
<div class="col-sm-12" style="border-top: .25rem solid #eceeef; padding-top: 20px; margin-top:20px;">
<h4>複選框</h4>
<p>按鈕的<code>checked</code>狀態只能通過按鈕上的click事件更新。如果你使用別的方法更新這個按鈕——比如說，用<code><input type="reset"></code>或者手動修改輸入控件的<code>checked</code>屬性</p>
<p>提前選中的按鈕要求你手動在輸入控件的<label>上添加<code>.active</code>類</p>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
<h4>單選鈕</h4>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 10%">
<div class="col-sm-4">
<div class="col-sm-12"><h3>BootStrap 表單 </h3></div>
<div class="col-sm-12">
<blockquote class="blockquote blockquote-reverse">
<p style="text-indent: 20px; font-size:16px;">
bootstrap的表單控件在 重置表單樣式的基礎上用樣式類進行了擴展。使用這些類可以優化自定義顯示，以實現一個更一致的跨瀏覽器跨設備渲染。下面的示例表單演示了用Bootstrap附加類更新樣式之後的常見的HTML表單元素。
</p>
<footer>18.06.20 14:15 <cite title="Source Title">Carey</cite></footer>
</blockquote>
</div>
</div>
<div class="col-sm-8">
<div class="col-sm-12">
<form>
<fieldset class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</fieldset>
<fieldset class="form-group">
<label for="exampleSelect1">Associ sites</label>
<select class="form-control" id="exampleSelect1">
<option>baidu.com</option>
<option>google.com</option>
<option>163.com</option>
<option>ithome.com</option>
<option>bootcss.com</option>
</select>
</fieldset>
<fieldset class="form-group">
<label for="exampleSelect2">Roles</label>
<select multiple class="form-control" id="exampleSelect2">
<option>管理員</option>
<option>測試小組</option>
<option>編輯組</option>
<option>運營組</option>
<option>運維組</option>
</select>
</fieldset>
<fieldset class="form-group">
<label for="exampleTextarea">Descri</label>
<textarea class="form-control form-control-file" id="exampleTextarea" rows="3"></textarea>
</fieldset>
<fieldset class="form-group">
<label class="file">
<input type="file" id="file">
<span class="file-custom"></span>
</label>
</fieldset>
<div class="radio">
<label class="c-input c-radio">
<input id="radio1" name="radio" type="radio">
<span class="c-indicator"></span>
Toggle this custom radio
</label>
<label class="c-input c-radio">
<input id="radio2" name="radio" type="radio">
<span class="c-indicator"></span>
Or toggle this other custom radio
</label>
</div>
<div class="c-inputs-stacked">
<label class="c-input c-radio">
<input id="radioStacked1" name="radio-stacked" type="radio">
<span class="c-indicator"></span>
Toggle this custom radio
</label>
<label class="c-input c-radio">
<input id="radioStacked2" name="radio-stacked" type="radio">
<span class="c-indicator"></span>
Or toggle this other custom radio
</label>
</div>
<div class="checkbox">
<label class="c-input c-checkbox">
<input type="checkbox">
<span class="c-indicator"></span>
Check this custom checkbox
</label>
</div>
</form>
</div>
<div class="col-sm-12" style="border-top: .25rem solid #eceeef; padding-top: 20px; margin-top:20px;">
<h4>靜態控件</h4>
<p>如果你需要在表單內、一個表單label旁邊放置純文本，請在<p>上面使用<code>.form-control-static</code>類。</p>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>
<div class="row" style="margin-top: 10%">
<div class="col-sm-4">
<div class="col-sm-12"><h3>BootStrap 廣告屏 </h3></div>
<div class="col-sm-12">
<blockquote class="blockquote blockquote-reverse">
<p style="text-indent: 20px; font-size:16px;">
一個輕量極的、靈活的組件，可視情況擴張到整個視口以顯示你的網站的關鍵營銷信息。
</p>
<footer>18.06.20 15:00 <cite title="Source Title">Carey</cite></footer>
</blockquote>
</div>
</div>
<div class="col-sm-8">
<div class="col-sm-12">
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="m-y-md">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="javascript:;" role="button">Learn more</a>
</p>
</div>
</div>
<div class="col-sm-12" style="border-top: .25rem solid #eceeef; padding-top: 20px;">
<p>要想讓這個廣告屏佔滿屏幕寬度、不帶有圓角，請添加<code>.jumbotron-fluid</code>修飾類，並在裏面添加一個<code>.container</code>或<code>.container-fluid</code>類。</p>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of it's parent.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 10%">
<div class="col-sm-4">
<div class="col-sm-12"><h3>BootStrap 標籤 </h3></div>
<div class="col-sm-12">
<blockquote class="blockquote blockquote-reverse">
<p style="text-indent: 20px; font-size:16px;">
一種小巧的自適應性的標籤，能夠爲任何內容添加文本。
</p>
<footer>18.06.20 15:10 <cite title="Source Title">Carey</cite></footer>
</blockquote>
</div>
</div>
<div class="col-sm-8">
<div class="col-sm-12">
<h4>丸狀標籤</h4>
<p>使用<code>.label-pill</code>修飾類以使標籤變得更圓（更大的<code>border-radius</code>以及額外的橫向<code>padding</code>）</p>
<span class="label label-pill label-default">Default</span>
<span class="label label-pill label-primary">Primary</span>
<span class="label label-pill label-success">Success</span>
<span class="label label-pill label-info">Info</span>
<span class="label label-pill label-warning">Warning</span>
<span class="label label-pill label-danger">Danger</span>
</div>
</div>
</div>
<div class="row" style="margin-top: 10%">
<div class="col-sm-4">
<div class="col-sm-12"><h3>BootStrap 卡片 </h3></div>
<div class="col-sm-12">
<blockquote class="blockquote blockquote-reverse">
<p style="text-indent: 20px; font-size:16px;">
卡片是一個靈活的、可擴展的內容窗口。它包含了可選的卡片頭和卡片腳、一個大範圍的內容、上下文背景色以及強大的顯示選項。
<strong class="text-danger">片代替了我們舊的panel、well和thumbnail。那些組件類似的功能可以通過卡片的修飾類來實現</strong>
</p>
<footer>18.06.20 15:10 <cite title="Source Title">Carey</cite></footer>
</blockquote>
</div>
</div>
<div class="col-sm-8">
<div class="col-sm-12">
<h4>內容類型</h4>
<p>卡片支持多種多樣的內容，包括圖片、文本、列組，鏈接，等等。混合並匹配多種內容類型以創建你想要的卡片</p>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top" style="height: 180px; width: 100%; display: block;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTY0MWMwY2ViMzMgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTY0MWMwY2ViMzMiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<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">Button</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card card-block">
<h4 class="card-title">Card title</h4>
<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="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
</div>
<img class="card-img-top" style="height: 180px; width: 100%; display: block;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTY0MWMwY2ViMzMgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTY0MWMwY2ViMzMiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
<div class="card-block">
<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="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
<div class="col-sm-12" style="border-top: .25rem solid #eceeef; padding-top: 20px;">
<h4>文本對齊</h4>
<p>使用文本對齊類，你可以快速改變任何卡片的文本的對齊方式——在它的內部全部或者局部區域</p>
<div class="card card-block">
<h4 class="card-title">Special title treatment</h4>
<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 class="card card-block text-center">
<h4 class="card-title">Special title treatment</h4>
<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 class="card card-block text-right">
<h4 class="card-title">Special title treatment</h4>
<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 class="col-sm-12" style="border-top: .25rem solid #eceeef; padding-top: 20px;">
<h4>卡片頭和卡片腳</h4>
<div class="card">
<div class="card-header"> Featured </div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<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 class="card">
<div class="card-header"> Quote </div>
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
<div class="card text-center">
<div class="card-header"> Featured </div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<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 class="card-footer text-muted"> 2 days ago </div>
</div>
</div>
<div class="col-sm-12" style="border-top: .25rem solid #eceeef; padding-top: 20px;">
<h4>背景</h4>
<p>卡片包含了它們自己的變量類，以快速改變卡片的<code>background-color</code>和<code>border</code>。深色的卡片需要使用<code>.card-inverse</code>類。</p>
<div class="col-sm-4">
<div class="card card-inverse card-primary text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card card-inverse card-success text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card card-inverse card-info text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card card-inverse card-warning text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card card-inverse card-danger text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
</div>
<div class="col-sm-12" style="border-top: .25rem solid #eceeef; padding-top: 20px;">
<h4>卡片組</h4>
<p>使用卡片組渲染卡片，把卡片變成單一的、具有相同寬度和高度的、互相緊挨着的列元素。默認的，卡片組使用<code>display: table</code> 以及<code>table-layout:fixed</code>以實現它們一致的尺寸。然而。如果啓用了彈性盒模式，將改而使用<coee>display: flex</coee>，並提供同樣的效果</p>
<div class="card-group">
<div class="card">
<img class="card-img-top" style="height: 180px; width: 100%; display: block;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTY0MWMwY2ViMzMgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTY0MWMwY2ViMzMiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<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 class="card">
<img class="card-img-top" style="height: 180px; width: 100%; display: block;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTY0MWMwY2ViMzMgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTY0MWMwY2ViMzMiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" style="height: 180px; width: 100%; display: block;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTY0MWMwY2ViMzMgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTY0MWMwY2ViMzMiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<div class="col-sm-12" style="border-top: .25rem solid #eceeef; padding-top: 20px; margin-top: 20px;">
<h4>卡片組 - 平排</h4>
<p>默認地，卡片平排需要兩個包裹元素：<code>.card-deck-wrapper</code>以及<code>.card-deck</code>。我們使用表格樣式對<code>.card-deck</code>設定尺寸和縫隙。該<code>.card-deck-wrapper</code>用來負抵消<code>.card-deck</code>的<code>border-spacing</code>。</p>
<div class="card-deck-wrapper">
<div class="card-deck">
<div class="card">
<img class="card-img-top" style="height: 180px; width: 100%; display: block;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTY0MWMwY2ViMzMgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTY0MWMwY2ViMzMiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer 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 class="card">
<img class="card-img-top" style="height: 180px; width: 100%; display: block;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTY0MWMwY2ViMzMgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTY0MWMwY2ViMzMiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" style="height: 180px; width: 100%; display: block;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTY0MWMwY2ViMzMgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTY0MWMwY2ViMzMiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12" style="border-top: .25rem solid #eceeef; padding-top: 20px; margin-top: 20px;">
<h4>卡片組 - 多列（類似瀑布流）</h4>
<p>需要用CSS把它們包裹在<code>.card-columns</code>中, 類似插件 <a href="https://masonry.desandro.com" target="_blank">Masonry</a> <a href="https://github.com/desandro/masonry" target="_blank">github:Masonry</a></p>
<div class="card-columns">
<div class="card">
<img class="card-img-top" style="height: 180px; width: 100%; display: block;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTY0MWMwY2ViMzMgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTY0MWMwY2ViMzMiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top" style="height: 180px; width: 100%; display: block;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTY0MWMwY2ViMzMgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTY0MWMwY2ViMzMiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card card-block card-inverse card-primary text-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer>
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top" style="height: 180px; width: 100%; display: block;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTY0MWMwY2ViMzMgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTY0MWMwY2ViMzMiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card card-block card-inverse card-primary text-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer>
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 10%">
<div class="col-sm-4">
<div class="col-sm-12"><h3>BootStrap 工具類 </h3></div>
<div class="col-sm-12">
<blockquote class="blockquote blockquote-reverse">
<p style="text-indent: 20px; font-size:16px;">
工具類設計用途是在你的CSS中減少高度重複的聲明的頻率，讓開發更快捷和簡單。
</p>
<footer>18.06.20 15:10 <cite title="Source Title">Carey</cite></footer>
</blockquote>
</div>
</div>
<div class="col-sm-8">
<div class="col-sm-12">
<h4>響應式嵌入</h4>
<p>創建一個可以適應任何設備的尺寸的內在的比率，允許瀏覽器基於容器塊的寬度確定視頻或幻燈片的大小。
規則可以直接應用在<iframe>、<embed>、<video>和<object>元素上。如果你想要爲別的屬性匹配樣式，視情況添加一個明確的後代類<code>.embed-responsive-item</code>。不同尺寸比例：<code>.embed-responsive-21by9</code>，<code>.embed-responsive-16by9</code>，<code>.embed-responsive-4by3</code> </p>
<div class="col-sm-6">
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="//gslb.miaopai.com/stream/1Xq9tATxKKIFm5dha5QtMGEth70mb7To9eYToQ__.mp4" allowfullscreen autobuffer></iframe>
</div>
</div>
<div class="col-sm-6">
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="//gslb.miaopai.com/stream/lMlat5~lQjoztPB9TJjgPiovqMbqaVdhdF4N4Q__.mp4" allowfullscreen autobuffer></iframe>
</div>
</div>
<div class="col-sm-12">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9" style="margin-top: 10px;">
<iframe class="embed-responsive-item" src="//gslb.miaopai.com/stream/~6Blt-uwNg-EzthGPTks7a1OpdFxmMWUgL2m~w__.mp4" allowfullscreen autobuffer></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="bd-footer text-muted" role="contentinfo">
</footer>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script src="./dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</html>如下效果圖 ：
