Bootstrap 基礎(chǔ)教程
Bootstrap 環(huán)境安裝
Bootstrap 教程
Bootstrap CSS
Bootstrap CSS 概覽
Bootstrap 按鈕
Bootstrap 表單
Bootstrap 表格
Bootstrap 代碼
Bootstrap 輔助類
Bootstrap 排版
Bootstrap 圖片
Bootstrap 網(wǎng)格系統(tǒng)
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備
Bootstrap 響應(yīng)式實(shí)用工具
Bootstrap 布局組件
Bootstrap Well
Bootstrap 按鈕下拉菜單
Bootstrap 按鈕組
Bootstrap 標(biāo)簽
Bootstrap 超大屏幕（Jumbotron）
Bootstrap 導(dǎo)航欄
Bootstrap 導(dǎo)航元素
Bootstrap 多媒體對(duì)象（Media Object）
Bootstrap 分頁(yè)
Bootstrap 徽章（Badges）
Bootstrap 進(jìn)度條
Bootstrap 警告（Alerts）
Bootstrap 列表組
Bootstrap 面板（Panels）
Bootstrap 面包屑導(dǎo)航（Breadcrumbs）
Bootstrap 輸入框組
Bootstrap 縮略圖
Bootstrap 下拉菜單（Dropdowns）
Bootstrap 頁(yè)面標(biāo)題（Page Header）
Bootstrap 字體圖標(biāo)(Glyphicons)
Bootstrap 插件
Bootstrap 按鈕（Button）
Bootstrap 標(biāo)簽頁(yè)（Tab）
Bootstrap 插件概覽
Bootstrap 彈出框（Popover）
Bootstrap 附加導(dǎo)航（Affix）
Bootstrap 滾動(dòng)監(jiān)聽（Scrollspy）
Bootstrap 過渡效果（Transition）
Bootstrap 警告框（Alert）
Bootstrap 輪播（Carousel）
Bootstrap 模態(tài)框（Modal）插件
Bootstrap 提示工具（Tooltip）
Bootstrap 下拉菜單（Dropdown）
Bootstrap 折疊（Collapse）
Bootstrap 附錄
Bootstrap CSS編碼規(guī)范
Bootstrap HTML編碼規(guī)范
Bootstrap UI 編輯器
?
本文檔使用 php中文網(wǎng)手冊(cè) 發(fā)布
文字
Bootstrap 縮略圖
本章將講解 Bootstrap 縮略圖。大多數(shù)站點(diǎn)都需要在網(wǎng)格中布局圖像、視頻、文本等。Bootstrap 通過縮略圖為此提供了一種簡(jiǎn)便的方式。使用 Bootstrap 創(chuàng)建縮略圖的步驟如下：
- 在圖像周圍添加帶有 class .thumbnail 的 <a> 標(biāo)簽。
- 這會(huì)添加四個(gè)像素的內(nèi)邊距（padding）和一個(gè)灰色的邊框。
- 當(dāng)鼠標(biāo)懸停在圖像上時(shí)，會(huì)動(dòng)畫顯示出圖像的輪廓。
下面的實(shí)例演示了默認(rèn)的縮略圖：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 縮略圖</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符縮略圖">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符縮略圖">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符縮略圖">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符縮略圖">
</a>
</div>
</div>
</body>
</html>
結(jié)果如下所示：
添加自定義的內(nèi)容
現(xiàn)在我們有了一個(gè)基本的縮略圖，我們可以向縮略圖添加各種 HTML 內(nèi)容，比如標(biāo)題、段落或按鈕。具體步驟如下：
- 把帶有 class .thumbnail 的 <a> 標(biāo)簽改為 <div>。
- 在該 <div> 內(nèi)，您可以添加任何您想要添加的東西。由于這是一個(gè) <div>，我們可以使用默認(rèn)的基于 span 的命名規(guī)則來調(diào)整大小。
- 如果您想要給多個(gè)圖像進(jìn)行分組，請(qǐng)把它們放置在一個(gè)無序列表中，且每個(gè)列表項(xiàng)向左浮動(dòng)。
下面的實(shí)例演示了這點(diǎn)：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 自定義縮略圖</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符縮略圖">
</div>
<div class="caption">
<h3>縮略圖標(biāo)簽</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按鈕
</a>
<a href="#" class="btn btn-default" role="button">
按鈕
</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符縮略圖">
</div>
<div class="caption">
<h3>縮略圖標(biāo)簽</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按鈕
</a>
<a href="#" class="btn btn-default" role="button">
按鈕
</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符縮略圖">
</div>
<div class="caption">
<h3>縮略圖標(biāo)簽</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按鈕
</a>
<a href="#" class="btn btn-default" role="button">
按鈕
</a>
</p>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符縮略圖">
</div>
<div class="caption">
<h3>縮略圖標(biāo)簽</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按鈕
</a>
<a href="#" class="btn btn-default" role="button">
按鈕
</a>
</p>
</div>
</div>
</div>
</body>
</html>
結(jié)果如下所示：
