Bootstrap - 快速指南

什麼是 Twitter Bootstrap？

Bootstrap 是一款簡潔、直觀且功能強大的移動優先前端框架，用於更快、更輕鬆地進行 Web 開發。它使用 HTML、CSS 和 Javascript。

歷史

Bootstrap 由Mark Otto 和Jacob Thornton 在Twitter 開發。它於 2011 年 8 月在 GitHub 上作為開源產品釋出。

為什麼要使用 Bootstrap？

移動優先方法 - Bootstrap 3 框架在整個庫中都包含移動優先樣式，而不是在單獨的檔案中。
瀏覽器支援 - 它受所有主流瀏覽器支援。

易於上手 - 只要掌握 HTML 和 CSS 的知識，任何人都可以開始使用 Bootstrap。此外，Bootstrap 官方網站提供了良好的文件。
響應式設計 - Bootstrap 的響應式 CSS 可適應桌面電腦、平板電腦和手機。有關響應式設計的更多資訊，請參閱章節Bootstrap 響應式設計。

為開發人員構建介面提供了一個乾淨且統一的解決方案。
它包含美觀且功能強大的內建元件，這些元件易於自定義。
它還提供基於 Web 的自定義。
最棒的是它是開源的。

Bootstrap 包含哪些內容？

腳手架 - Bootstrap 提供了一個基本結構，包括網格系統、連結樣式和背景。這將在Bootstrap 基本結構部分詳細介紹。
CSS - Bootstrap 帶有全域性 CSS 設定、經過樣式化和增強的基本 HTML 元素以及可擴充套件類以及高階網格系統。這將在Bootstrap 與 CSS部分詳細介紹。
元件 - Bootstrap 包含十幾個可重複使用的元件，旨在提供圖示、下拉選單、導航、警報、彈出視窗等等。這將在佈局元件部分詳細介紹。
JavaScript 外掛 - Bootstrap 包含十幾個自定義 jQuery 外掛。您可以輕鬆地全部包含它們，或逐個包含。這將在Bootstrap 外掛部分詳細介紹。
自定義 - 您可以自定義 Bootstrap 的元件、LESS 變數和 jQuery 外掛以獲得您自己的版本。

Bootstrap - 環境設定

設定和開始使用 Bootstrap 非常容易。本章將解釋如何下載和設定 Bootstrap。我們還將討論 Bootstrap 檔案結構，並透過示例演示其用法。

下載 Bootstrap

您可以從https://bootstrap.tw/下載最新版本的 Bootstrap。當您單擊此連結時，您將看到如下所示的螢幕 -

在這裡您可以看到兩個按鈕 -

下載 Bootstrap - 單擊此按鈕，您可以下載 Bootstrap CSS、JavaScript 和字型的預編譯和壓縮版本。不包括任何文件或原始原始碼檔案。
下載原始碼 - 單擊此按鈕，您可以直接從 GitHub 獲取最新的 Bootstrap LESS 和 JavaScript 原始碼。

如果您使用 Bootstrap 的未編譯原始碼，則需要編譯 LESS 檔案以生成可用的 CSS 檔案。為了將 LESS 檔案編譯成 CSS，Bootstrap 官方僅支援 Recess，它是基於less.js的 Twitter CSS 助手。

為了更好地理解和方便使用，我們將在整個教程中使用 Bootstrap 的預編譯版本。由於檔案已編譯和壓縮，因此您不必每次都費心包含各個功能的單獨檔案。在編寫本教程時，下載了最新版本（Bootstrap 3）。

檔案結構

預編譯 Bootstrap

下載編譯後的 Bootstrap 版本後，解壓縮 ZIP 檔案，您將看到以下檔案/目錄結構 -

如您所見，有編譯後的 CSS 和 JS（bootstrap.*），以及編譯和壓縮後的 CSS 和 JS（bootstrap.min.*）。包含 Glyphicons 的字型，因為它是可選的 Bootstrap 主題。

Bootstrap 原始碼

如果您下載了 Bootstrap 原始碼，則檔案結構如下 -

less/、js/ 和fonts/下的檔案分別是 Bootstrap CSS、JS 和圖示字型的原始碼。
dist/資料夾包含上面預編譯下載部分列出的所有內容。
docs-assets/、examples/ 和所有 *.html 檔案都是 Bootstrap 文件。

HTML 模板

使用 Bootstrap 的基本 HTML 模板如下所示 -

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

在這裡您可以看到包含的jquery.js、bootstrap.min.js 和bootstrap.min.css 檔案，它們將一個普通的 HTM 檔案轉換為 Bootstrapped 模板。只需確保在包含 Bootstrap 庫之前包含 jQuery 庫即可。

有關上面程式碼片段中每個元素的更多詳細資訊將在章節Bootstrap CSS 概覽中討論。

示例

現在讓我們嘗試一個使用上面模板的示例。嘗試使用我們網站上以下示例程式碼框右上角提供的“即時演示”選項嘗試以下示例 -

	超小型裝置手機 (<768px)	小型裝置平板電腦 (≥768px)	中型裝置桌上型電腦 (≥992px)	大型裝置桌上型電腦 (≥1200px)
網格行為	始終水平	開始時摺疊，在斷點以上水平顯示	開始時摺疊，在斷點以上水平顯示	開始時摺疊，在斷點以上水平顯示
最大容器寬度	無 (自動)	750px	970px	1170px
類字首	.col-xs-	.col-sm-	.col-md-	.col-lg-
列數	12	12	12	12
最大列寬	自動	60px	78px	95px
間距寬度	30px (每列兩側各15px)	30px (每列兩側各15px)	30px (每列兩側各15px)	30px (每列兩側各15px)
可巢狀	是	是	是	是
偏移量	是	是	是	是
列排序	是	是	是	是

序號	標籤和描述
1	<table> 用於以表格格式顯示資料的包裝元素
2	<thead> 用於表頭行(<tr>)的容器元素，用於標記表列。
3	<tbody> 用於表主體中表行(<tr>)的容器元素。
4	<tr> 用於一組表單元格(<td>或<th>)的容器元素，這些單元格出現在同一行上。
5	<td> 預設表單元格。
6	<th> 用於列（或行，取決於範圍和位置）標籤的特殊表單元格。必須在<thead>內使用。
7	<caption> 對錶格包含內容的描述或摘要。

序號	類 & 描述
1	.active 將懸停顏色應用於特定行或單元格
2	.success 指示成功或積極的操作
3	.warning 指示可能需要關注的警告
4	.danger 指示危險或潛在的負面操作

序號	類 & 描述
1	btn 預設/標準按鈕。
2	btn-primary 提供額外的視覺權重，並識別一組按鈕中的主要操作。
3	btn-success 指示成功或積極的操作。
4	btn-info 用於資訊警報訊息的上下文按鈕。
5	btn-warning 指示應謹慎執行此操作。
6	btn-danger 指示危險或潛在的負面操作。
7	btn-link 透過使按鈕看起來像連結來淡化按鈕，同時保持按鈕行為。

序號	類 & 描述
1	.btn-lg 這使按鈕尺寸變大。
2	.btn-sm 這使按鈕尺寸變小。
3	.btn-xs 這使按鈕尺寸變得更小。
4	.btn-block 這建立塊級按鈕——那些跨越父元素整個寬度的按鈕。

元素	類
按鈕元素	使用.active類顯示它已啟用。
錨元素	使用.active類為<a>按鈕顯示它已啟用。

類	裝置
.visible-xs	超小（小於768px）可見
.visible-sm	小（最多768px）可見
.visible-md	中（768px到991px）可見
.visible-lg	更大（992px及以上）可見
.hidden-xs	超小（小於768px）隱藏
.hidden-sm	小（最多768px）隱藏
.hidden-md	中（768px到991px）隱藏
.hidden-lg	大螢幕（992畫素及以上）隱藏

類	列印
.visible-print	可見
.hidden-print	僅瀏覽器可見，列印時不可見。

類	描述	程式碼示例
.btn-group	此類用於基本按鈕組。將一系列帶有類 .btn 的按鈕包裝在 .btn-group 中。	<div class = "btn-group"> <button type = "button" class = "btn btn-default">Button1</button> <button type = "button" class = "btn btn-default">Button2</button> </div>
.btn-toolbar	這有助於將一組 <div class = "btn-group"> 組合到 <div class = "btn-toolbar"> 中，以建立更復雜的元件。	<div class = "btn-toolbar" role = "toolbar"> <div class = "btn-group">...</div> <div class = "btn-group">...</div> </div>
.btn-group-lg, .btn-group-sm, .btn-group-xs	這些類可以應用於按鈕組，而不是調整每個按鈕的大小。	<div class = "btn-group btn-group-lg">...</div> <div class = "btn-group btn-group-sm">...</div> <div class = "btn-group btn-group-xs">...</div>
.btn-group-vertical	此類使一組按鈕垂直堆疊而不是水平排列。	<div class = "btn-group-vertical"> ... </div>

選項名稱	型別/預設值	資料屬性名稱	描述
backdrop	布林值或字串 'static' 預設值：true	data-backdrop	如果不想在使用者單擊模態框外部時關閉模態框，請為背景指定 static。
keyboard	布林值預設值：true	data-keyboard	按下 Esc 鍵時關閉模態框；設定為 false 以停用。
show	布林值預設值：true	data-show	初始化時顯示模態框。
remote	路徑預設值：false	data-remote	使用 jQuery .load 方法將內容注入到模態框主體中。如果添加了具有有效 URL 的 href，它將載入該內容。下面顯示了此示例 - <a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>

方法	描述	示例
選項 − .modal(options)	將您的內容啟用為模態框。接受可選的 options 物件。	$('#identifier').modal({ keyboard: false })
切換 − .modal('toggle')	手動切換模態框。	$('#identifier').modal('toggle')
顯示 − .modal('show')	手動開啟模態框。	$('#identifier').modal('show')
隱藏 − .modal('hide')	手動隱藏模態框。	$('#identifier').modal('hide')

事件	描述	示例
show.bs.modal	在呼叫 show 方法後觸發。	$('#identifier').on('show.bs.modal', function () { // do something… })
shown.bs.modal	當模態框已對使用者可見時觸發（將等待 CSS 過渡完成）。	$('#identifier').on('shown.bs.modal', function () { // do something… })
hide.bs.modal	在呼叫 hide 例項方法時觸發。	$('#identifier').on('hide.bs.modal', function () { // do something… })
hidden.bs.modal	當模態框已完成對使用者的隱藏時觸發。	$('#identifier').on('hidden.bs.modal', function () { // do something… })

事件	描述	示例
show.bs.tab	此事件在選項卡顯示時觸發，但在新選項卡顯示之前。使用event.target和event.relatedTarget分別定位活動選項卡和上一個活動選項卡（如果可用）。	$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab })
shown.bs.tab	此事件在選項卡顯示後觸發。使用event.target和event.relatedTarget分別定位活動選項卡和上一個活動選項卡（如果可用）。	$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab })

選項名稱	型別/預設值	資料屬性名稱	描述
動畫	布林值預設值：true	data-animation	為工具提示應用 CSS 淡入淡出過渡效果。
html	布林值預設值：false	data-html	將 HTML 插入工具提示。如果為 false，則 jQuery 的 text 方法將用於將內容插入 DOM。如果您擔心 XSS 攻擊，請使用 text。
位置	字串 \| 函式預設值：top	data-placement	指定如何定位工具提示（例如，top \| bottom \| left \| right \| auto）。當指定為 auto 時，它將動態重新定位工具提示。例如，如果 placement 為“auto left”，則工具提示將在可能的情況下顯示在左側，否則將顯示在右側。
選擇器	字串預設值：false	data-selector	如果提供選擇器，則工具提示物件將被委託給指定的目標。
標題	字串 \| 函式預設值："	data-title	如果不存在 title 屬性，則 title 選項是預設標題值。
觸發器	字串預設值：'hover focus'	data-trigger	定義如何觸發工具提示：click \| hover \| focus \| manual。您可以傳遞多個觸發器；用空格分隔它們。
內容	字串 \| 函式預設值：''	data-content	如果不存在 data-content 屬性，則為預設內容值
延遲	數字 \| 物件預設值：0	data-delay	以毫秒為單位延遲顯示和隱藏工具提示 - 不適用於手動觸發型別。如果提供數字，則延遲將應用於隱藏/顯示。物件結構為： delay: { show: 500, hide: 100 }
容器	字串 \| false 預設值：false	data-container	將工具提示附加到特定元素。例如：container: 'body'

方法	描述	示例
選項 - .tooltip(options)	將工具提示處理程式附加到元素集合。	$().tooltip(options)
切換 - .tooltip('toggle')	切換元素的工具提示。	$('#element').tooltip('toggle')
顯示 - .tooltip('show')	顯示元素的工具提示。	$('#element').tooltip('show')
隱藏 - .tooltip('hide')	隱藏元素的工具提示。	$('#element').tooltip('hide')
銷燬 - .tooltip('destroy')	隱藏並銷燬元素的工具提示。	$('#element').tooltip('destroy')

事件	描述	示例
show.bs.tooltip	呼叫 show 例項方法時立即觸發此事件。	$('#myTooltip').on('show.bs.tooltip', function () { // do something })
shown.bs.tooltip	工具提示對使用者可見時觸發此事件（將等待 CSS 過渡完成）。	$('#myTooltip').on('shown.bs.tooltip', function () { // do something })
hide.bs.tooltip	呼叫 hide 例項方法時立即觸發此事件。	$('#myTooltip').on('hide.bs.tooltip', function () { // do something })
hidden.bs.tooltip	工具提示已隱藏完畢時觸發此事件（將等待 CSS 過渡完成）。	$('#myTooltip').on('hidden.bs.tooltip', function () { // do something })

選項名稱	型別/預設值	資料屬性名稱	描述
動畫	布林值預設值 - true	data-animation	為 popover 應用 CSS 淡入淡出過渡效果。
html	布林值預設值 - false	data-html	將 HTML 插入 popover。如果為 false，則 jQuery 的 text 方法將用於將內容插入 DOM。如果您擔心 XSS 攻擊，請使用 text。
位置	字串 \| 函式預設值 - top	data-placement	指定如何定位 popover（例如，top \| bottom \| left \| right \| auto）。當指定為 auto 時，它將動態重新定位 popover。例如，如果 placement 為“auto left”，則 popover 將在可能的情況下顯示在左側，否則將顯示在右側。
選擇器	字串預設值 - false	data-selector	如果提供選擇器，則 popover 物件將被委託給指定的目標。
標題	字串 \| 函式預設值 - "	data-title	如果不存在 title 屬性，則 title 選項是預設標題值。
觸發器	字串預設值 - 'hover focus'	data-trigger	定義如何觸發 popover - click \| hover \| focus \| manual。您可以傳遞多個觸發器；用空格分隔它們。
延遲	數字 \| 物件預設值 - 0	data-delay	以毫秒為單位延遲顯示和隱藏 popover - 不適用於手動觸發型別。如果提供數字，則延遲將應用於隱藏/顯示。物件結構為： delay: { show: 500, hide: 100 }
容器	字串 \| false 預設值 - false	data-container	將 popover 附加到特定元素。例如：container: 'body'

方法	描述	示例
選項 - .popover(options)	將 popover 處理程式附加到元素集合。	$().popover(options)
切換 - .popover('toggle')	切換元素的 popover。	$('#element').popover('toggle')
顯示 - .popover('show')	顯示元素的 popover。	$('#element').popover('show')
隱藏 - .popover('hide')	隱藏元素的 popover。	$('#element').popover('hide')
銷燬 - .popover('destroy')	隱藏並銷燬元素的 popover。	$('#element').popover('destroy')

事件	描述	示例
show.bs.popover	呼叫 show 例項方法時立即觸發此事件。	$('#mypopover').on('show.bs.popover', function () { // do something })
shown.bs.popover	popover 對使用者可見時觸發此事件（將等待 CSS 過渡完成）。	$('#mypopover').on('shown.bs.popover', function () { // do something })
hide.bs.popover	呼叫 hide 例項方法時立即觸發此事件。	$('#mypopover').on('hide.bs.popover', function () { // do something })
hidden.bs.popover	popover 已隱藏完畢時觸發此事件（將等待 CSS 過渡完成）。	$('#mypopover').on('hidden.bs.popover', function () { // do something })

方法	描述	示例
.alert()	此方法使用關閉功能包裝所有警報。	$('#identifier').alert();
關閉方法 .alert('close')	要啟用所有警報的關閉，請新增此方法。	$('#identifier').alert('close');

事件	描述	示例
close.bs.alert	呼叫 close 例項方法時立即觸發此事件。	$('#myalert').bind('close.bs.alert', function () { // do something })
closed.bs.alert	警報已關閉時觸發此事件（將等待 CSS 過渡完成）。	$('#myalert').bind('closed.bs.alert', function () { // do something })

方法	描述	示例
button('toggle')	切換推送狀態。使按鈕看起來像已被啟用。您還可以使用data-toggle屬性啟用按鈕的自動切換。	$().button('toggle')
.button('loading')	載入時，按鈕將被停用，並且文字將更改為按鈕元素的data-loading-text屬性中的選項。	$().button('loading')
.button('reset')	重置按鈕狀態，將原始內容恢復為文字。當您需要將按鈕恢復到初始狀態時，此方法很有用。	$().button('reset')
.button(string)	此方法中的字串指的是使用者宣告的任何字串。要重置按鈕狀態並引入新內容，請使用此方法。	$().button(string)

選項名稱	型別/預設值	資料屬性名稱	描述
父級	選擇器預設 - false	data-parent	如果選擇器為 false，則指定父級下的所有可摺疊元素都將關閉（類似於傳統的手風琴行為 - 這取決於手風琴組類）。
切換	布林值預設值 - true	data-toggle	在呼叫時切換可摺疊元素。

方法	描述	示例
選項 - .collapse(options)	將您的內容啟用為可摺疊元素。接受可選的選項物件。	$('#identifier').collapse({ toggle: false })
切換 - .collapse('toggle')	切換可摺疊元素以顯示或隱藏。	$('#identifier').collapse('toggle')
顯示 - .collapse('show')	顯示可摺疊元素。	$('#identifier').collapse('show')
隱藏 - .collapse('hide')	隱藏可摺疊元素。	$('#identifier').collapse('hide')

Bootstrap - 快速指南

Bootstrap - 概覽

什麼是 Twitter Bootstrap？

歷史

為什麼要使用 Bootstrap？

Bootstrap 包含哪些內容？

Bootstrap - 環境設定

下載 Bootstrap

檔案結構

預編譯 Bootstrap

Bootstrap 原始碼

HTML 模板

示例

Bootstrap - 網格系統

什麼是網格？

什麼是 Bootstrap 網格系統？

移動優先策略

Bootstrap 網格系統的運作方式

媒體查詢

網格選項

基本網格結構

響應式列重置

偏移列

巢狀列

列排序

Bootstrap - CSS概述

HTML5文件型別

移動優先

響應式影像

排版和連結

規範化

容器

Bootstrap - 排版

標題

內聯副標題

主要正文內容

強調

縮寫

地址

塊引用

列表

Bootstrap - 程式碼

Bootstrap - 表格

基本表格

可選表格類

帶條紋的表格

帶邊框的表格

懸停表格

緊湊表格

上下文類

響應式表格

Bootstrap - 表單

表單佈局

垂直或基本表單

內聯表單

水平表單

支援的表單控制元件

輸入

文字區域

複選框和單選按鈕

選擇

靜態控制元件

表單控制元件狀態

輸入焦點

停用輸入

停用欄位集

驗證狀態

表單控制元件大小

幫助文字

Bootstrap - 按鈕

按鈕大小

按鈕狀態

活動狀態

停用狀態

按鈕標籤

Bootstrap - 圖片

Bootstrap - 輔助類

關閉圖示

插入符號

快速浮動

事件	描述	示例
show.bs.collapse	在呼叫 show 方法後觸發。	$('#identifier').on('show.bs.collapse', function () { // do something })
shown.bs.collapse	當摺疊元素對使用者可見時觸發此事件（將等待 CSS 過渡完成）。	$('#identifier').on('shown.bs.collapse', function () { // do something })
hide.bs.collapse	在呼叫 hide 例項方法時觸發。	$('#identifier').on('hide.bs.collapse', function () { // do something })
hidden.bs.collapse	當摺疊元素對使用者隱藏時觸發此事件（將等待 CSS 過渡完成）。	$('#identifier').on('hidden.bs.collapse', function () { // do something })

選項名稱	型別/預設值	資料屬性名稱	描述
間隔	數字預設 - 5000	data-interval	自動迴圈專案之間延遲的時間。如果為 false，則走馬燈將不會自動迴圈。
暫停	字串預設 - "hover"	data-pause	在滑鼠懸停時暫停走馬燈的迴圈，並在滑鼠離開時恢復走馬燈的迴圈。
包裝	布林值預設值 - true	data-wrap	走馬燈是否應連續迴圈或具有硬停止。

方法	描述	示例
.carousel(options)	使用可選的選項物件初始化走馬燈並開始迴圈遍歷專案。	$('#identifier').carousel({ interval: 2000 })
.carousel('cycle')	從左到右迴圈遍歷走馬燈專案。	$('#identifier').carousel('cycle')
.carousel('pause')	停止走馬燈迴圈遍歷專案。	$('#identifier')..carousel('pause')
.carousel(number)	將走馬燈迴圈到特定幀（基於 0，類似於陣列）。	$('#identifier').carousel(number)
.carousel('prev')	迴圈到前一個專案。	$('#identifier').carousel('prev')
.carousel('next')	迴圈到下一個專案。	$('#identifier').carousel('next')

事件	描述	示例
slide.bs.carousel	當呼叫 slide 例項方法時，立即觸發此事件。	$('#identifier').on('slide.bs.carousel', function () { // do something })
slid.bs.carousel	當走馬燈完成其滑動過渡時觸發此事件。	$('#identifier').on('slid.bs.carousel', function () { // do something })

示例	描述	下載連結
購買表格	此示例指示 Bootstrap 中的購買表格結構。	下載
計劃表格	此示例指示 Bootstrap 中的計劃表格結構。	下載
帶相簿的表格	此示例指示 Bootstrap 中的相簿表格結構。	下載

示例	描述	下載連結
登入頁面	此示例指示 Bootstrap 中的登入頁面結構	下載
聯絡頁面	此示例指示 Bootstrap 中的聯絡頁面結構	下載
註冊頁面	此示例指示 Bootstrap 中的註冊頁面結構	下載

示例	描述	下載連結
IOS 按鈕	此示例指示 Bootstrap 中的按鈕結構	下載
影像按鈕	此示例指示 Bootstrap 中的影像按鈕結構	下載
陰影按鈕	此示例指示 Bootstrap 中的陰影按鈕結構	下載
註冊按鈕	此示例指示 Bootstrap 中的註冊按鈕結構	下載

示例	描述	下載連結
圖片庫	此示例說明 Bootstrap 中圖片庫的結構。	下載
圖片縮放	此示例說明 Bootstrap 中圖片縮放的結構。	下載
團隊圖片庫	此示例說明 Bootstrap 中網格圖片的結構。	下載
背景圖片	此示例說明 Bootstrap 中背景圖片的結構。	下載
面板中的圖片	此示例說明 Bootstrap 中圖片的結構。	下載

示例	描述	下載連結
卡片響應式	此示例說明 Bootstrap 中卡片的結構。	下載
簡單的推薦語	此示例說明 Bootstrap 中推薦語的結構。	下載
影片網格	此示例說明 Bootstrap 中網格影片的結構。	下載
橫幅圖片	此示例說明 Bootstrap 中橫幅圖片的結構。	下載
帶面部指示器的輪播	此示例說明 Bootstrap 中帶面部指示器的輪播結構。	下載

示例	描述	下載連結
導航演示	此示例說明 Bootstrap 中導航的結構。	下載
圖片導航欄	此示例說明 Bootstrap 中圖片導航欄的結構。	下載
Findcon 按鈕	此示例說明 Bootstrap 中 findcon 按鈕的結構。	下載
微型導航欄	此示例說明 Bootstrap 中微型導航欄的結構。	下載