Bootstrap學習(二)——Bootstrap 佈局元件
Bootstrap 佈局元件
Bootstrap 字型圖示(Glyphicons)
什麼是字型圖示?
字型圖示是在 Web 專案中使用的圖示字型。
獲取字型圖示
Bootstrap 3.x 版本,在 fonts 資料夾內可以找到字型圖示,它包含了下列這些檔案:
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
字型圖示列表
用法
如需使用圖示,只需要簡單地使用下面的程式碼即可。請在圖示和文字之間保留適當的空間。
<span class="glyphicon glyphicon-search"></span>
Bootstrap 下拉選單(Dropdowns)
如需使用下列選單,只需要在 class .dropdown 內加上下拉選單即可
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> 主題 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Java</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">資料探勘</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#"> 資料通訊/網路 </a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">分離的連結</a> </li> </ul> </div>
按鈕上拉選單
選單也可以往上拉伸的,只需要簡單地向父 .btn-group 容器新增 .dropup 即可
選項
對齊
- 通過向 .dropdown-menu 新增 class .pull-right 來向右對齊下拉選單
標題
使用 class dropdown-header 向下拉選單的標籤區域新增標題
<li role="presentation" class="dropdown-header">下拉選單標題</li>
Bootstrap 按鈕組
按鈕組允許多個按鈕被堆疊在同一行上
<div class="btn-group"> <button type="button" class="btn btn-default">按鈕 1</button> <button type="button" class="btn btn-default">按鈕 2</button> <button type="button" class="btn btn-default">按鈕 3</button> </div>
.btn-group-vertical : 該 class 讓一組按鈕垂直堆疊顯示,而不是水平堆疊顯示。
.btn-toolbar:該 class 有助於把幾組 <div class=”btn-group”> 結合到一個 <div class=”btn-toolbar”> 中,一般獲得更復雜的元件。
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">按鈕 1</button>
<button type="button" class="btn btn-default">按鈕 2</button>
<button type="button" class="btn btn-default">按鈕 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按鈕 4</button>
<button type="button" class="btn btn-default">按鈕 5</button>
<button type="button" class="btn btn-default">按鈕 6</button>
</div>
</div>
.btn-group-lg, .btn-group-sm, .btn-group-xs:這些 class 可應用到整個按鈕組的大小調整,而不需要對每個按鈕進行大小調整。
巢狀
在一個按鈕組內巢狀另一個按鈕組,即,在一個 .btn-group 內巢狀另一個 .btn-group
<div class="btn-group">
<button type="button" class="btn btn-default">按鈕 1</button>
<button type="button" class="btn btn-default">按鈕 2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
下列
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">下拉鍊接 1</a></li>
<li><a href="#">下拉鍊接 2</a></li>
</ul>
</div>
</div>
Bootstrap 輸入框組
通過向輸入域新增字首和字尾的內容,可以向用戶輸入新增公共的元素
向 .form-control 新增字首或字尾元素的步驟如下:
- 把字首或字尾元素放在一個帶有 class .input-group 的 <div> 中。
- 接著,在相同的 <div> 內,在 class 為 .input-group-addon 的 <span> 內放置額外的內容。
把該 <span> 放置在 <input> 元素的前面或者後面。
<div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div>
輸入框組的大小
通過向 .input-group 新增相對錶單大小的 class(比如 .input-group-lg、input-group-sm、input-group-xs)來改變輸入框組的大小
複選框和單選外掛
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
按鈕外掛
可以把按鈕作為輸入框組的字首或者字尾元素,使用 class .input-group-btn 來包裹按鈕
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
Go!
</button>
</span>
<input type="text" class="form-control">
</div>
帶有下拉選單的按鈕
在輸入框組中新增帶有下拉選單的按鈕,只需要簡單地在一個 .input-group-btn class 中包裹按鈕和下拉選單即可
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown">
下拉選單
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">功能</a></li>
<li><a href="#">另一個功能</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">分離的連結</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div>
Bootstrap 導航元素
表格導航或標籤
建立一個標籤式的導航選單:
- 以一個帶有 class .nav 的無序列表開始。
新增 class .nav-tabs。
<p>標籤式的導航選單</p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li> </ul>
膠囊式的導航選單
基本的膠囊式導航選單
如果需要把標籤改成膠囊的樣式,只需要使用 class .nav-pills 代替 .nav-tabs 即可
<p>基本的膠囊式導航選單</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
垂直的膠囊式導航選單
在使用 class .nav、.nav-pills 的同時使用 class .nav-stacked,讓膠囊垂直堆疊
<p>垂直的膠囊式導航選單</p>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
兩端對齊的導航
在螢幕寬度大於 768px 時,通過在分別使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同時使用 class .nav-justified,讓標籤式或膠囊式導航選單與父元素等寬
<p>兩端對齊的導航元素</p>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul><br><br><br>
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
禁用連結
對每個 .nav class,如果添加了 .disabled class,則會建立一個灰色的連結,同時禁用了該連結的 :hover 狀態
下拉選單
導航選單與下拉選單使用相似的語法。預設情況下,列表項的錨與一些資料屬性協同合作來觸發帶有 .dropdown-menu class 的無序列表
帶有下拉選單的標籤
向標籤新增下拉選單的步驟如下:
- 以一個帶有 class .nav 的無序列表開始。
- 新增 class .nav-tabs。
新增帶有 .dropdown-menu class 的無序列表。
<p>帶有下拉選單的標籤</p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Java <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Swing</a></li> <li><a href="#">jMeter</a></li> <li><a href="#">EJB</a></li> <li class="divider"></li> <li><a href="#">分離的連結</a></li> </ul> </li> <li><a href="#">PHP</a></li> </ul>
- 帶有下拉選單的膠囊
步驟與建立帶有下拉選單的標籤相同,只是需要把 .nav-tabs class 改為 .nav-pills
Bootstrap 導航欄
預設的導航欄
建立一個預設的導航欄的步驟如下:
- 向 <nav> 標籤新增 class .navbar、.navbar-default。
- 向上面的元素新增 role=”navigation”,有助於增加可訪問性。
- 向 <div> 元素新增一個標題 class .navbar-header,內部包含了帶有 class navbar-brand 的 <a> 元素。這會讓文字看起來更大一號。
為了嚮導航欄新增連結,只需要簡單地新增帶有 class .nav、.navbar-nav 的無序列表即可。
<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">W3Cschool</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分離的連結</a></li> <li class="divider"></li> <li><a href="#">另一個分離的連結</a></li> </ul> </li> </ul> </div> </nav>
響應式的導航欄
為了給導航欄新增響應式特性,摺疊的內容必須包裹在帶有 classes .collapse、.navbar-collapse 的 <div> 中。摺疊起來的導航欄實際上是一個帶有 class .navbar-toggle 及兩個 data- 元素的按鈕。第一個是 data-toggle,用於告訴 JavaScript 需要對按鈕做什麼,第二個是 data-target,指示要切換到哪一個元素。三個帶有 class .icon-bar 的 <span> 建立所謂的漢堡按鈕。這些會切換為 .nav-collapse <div> 中的元素。為了實現以上這些功能,您必須包含 Bootstrap 摺疊(Collapse)外掛。
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切換導航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">W3Cschool</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分離的連結</a></li>
<li class="divider"></li>
<li><a href="#">另一個分離的連結</a></li>
</ul>
</li>
</ul>
</div>
</nav>
導航欄中的表單
使用 .navbar-form class,這確保了表單適當的垂直對齊和在較窄的視口中摺疊的行為
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">W3Cschool</a>
</div>
<div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>
</nav>
導航欄中的按鈕
使用 class .navbar-btn 向不在 <form> 中的 <button> 元素新增按鈕,按鈕在導航欄上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">W3Cschool</a>
</div>
<div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">提交按鈕</button>
</form>
<button type="button" class="btn btn-default navbar-btn">
導航欄按鈕
</button>
</div>
</nav>
導航欄中的文字
如果需要在導航中包含文字字串,請使用 class .navbar-text。這通常與 <p> 標籤一起使用,確保適當的前導和顏色
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">W3Cschool</a>
</div>
<div>
<p class="navbar-text">Signed in as Thomas</p>
</div>
</nav>
非導航連結
使用 class navbar-link 來為預設的和倒轉的導航欄選項新增適當的顏色
<p class="navbar-text navbar-right">
<a href="#" class="navbar-link">Runoob</a> 登入
</p>
元件對齊方式
使用實用工具 class .navbar-left 或 .navbar-right 向左或向右對齊導航欄中的 導航連結、表單、按鈕或文字 這些元件
導航欄的位置
Bootstrap 導航欄可以動態定位。預設情況下,它是塊級元素,它是基於在 HTML 中放置的位置定位的。通過一些幫助器類,可以把它放置在頁面的頂部或者底部,或者可以讓它成為隨著頁面一起滾動的靜態導航欄。
固定到頂部:向 .navbar class 新增 class .navbar-fixed-top
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> ... </nav>
固定到底部:向 .navbar class 新增 class .navbar-fixed-bottom
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> ... </nav>
靜態的頂部(隨著頁面一起滾動的導航欄):新增 .navbar-static-top class
<nav class="navbar navbar-default navbar-static-top" role="navigation"> ... </nav>
倒置的導航欄(帶有黑色背景白色文字的倒置的導航欄):向 .navbar class 新增 .navbar-inverse class
<nav class="navbar navbar-inverse" role="navigation"> ... </nav>
Bootstrap 麵包屑導航(Breadcrumbs)
麵包屑導航(Breadcrumbs)是一種基於網站層次資訊的顯示方式。以部落格為例,麵包屑導航可以顯示釋出日期、類別或標籤。它們表示當前頁面在導航層次結構內的位置。
Bootstrap 中的麵包屑導航(Breadcrumbs)是一個簡單的帶有 .breadcrumb class 的無序列表。分隔符會通過 CSS(bootstrap.min.css)中下面所示的 class 自動被新增:
.breadcrumb > li + li:before {
color: #CCCCCC;
content: "/ ";
padding: 0 5px;
}
eg:
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ol>
Bootstrap 分頁
分頁(Pagination)
下表列出了 Bootstrap 提供的處理分頁的 class。
預設的分頁
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
翻頁(Pager)
建立一個簡單的分頁連結為使用者提供導航,可通過翻頁來實現。與分頁連結一樣,翻頁也是無序列表。預設情況下,連結是居中顯示。
<!-- 預設的翻頁 -->
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
<!-- 對齊的連結 -->
<ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
Bootstrap 標籤
class .label 標籤可用於計數、提示或頁面上其他的標記顯示。使用修飾的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 來改變標籤的外觀
<span class="label label-default">預設標籤</span>
<span class="label label-primary">主要標籤</span>
<span class="label label-success">成功標籤</span>
<span class="label label-info">資訊標籤</span>
<span class="label label-warning">警告標籤</span>
<span class="label label-danger">危險標籤</span>
Bootstrap 徽章(Badges)
徽章與標籤相似,主要的區別在於徽章的邊角更加圓滑。
徽章(Badges)主要用於突出顯示新的或未讀的項。如需使用徽章,只需要把 <span class=”badge”> 新增到連結、Bootstrap 導航等這些元素上即可
<h4>列表導航中的啟用狀態</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
首頁
</a>
</li>
<li><a href="#">簡介</a></li>
<li>
<a href="#">
<span class="badge pull-right">3</span>
訊息
</a>
</li>
</ul>
Bootstrap 超大螢幕(Jumbotron)
該元件可以增加標題的大小,併為登陸頁面內容新增更多的外邊距(margin)。使用超大螢幕(Jumbotron)的步驟如下:
- 建立一個帶有 class .jumbotron. 的容器 <div>。
除了更大的 <h1>,字型粗細 font-weight 被減為 200px。
<div class="container"> <div class="jumbotron"> <h1>歡迎登陸頁面!</h1> <p>這是一個超大螢幕(Jumbotron)的例項。</p> <p><a class="btn btn-primary btn-lg" role="button"> 學習更多</a> </p> </div> </div>
Bootstrap 頁面標題(Page Header)
頁面標題(Page Header)會在網頁標題四周新增適當的間距,如需使用頁面標題(Page Header),把標題放置在帶有 class .page-header 的 <div> 中
<div class="page-header">
<h1>頁面標題例項
<small>子標題</small>
</h1>
</div>
Bootstrap 縮圖
使用 Bootstrap 建立縮圖的步驟如下:
- 在影象周圍新增帶有 class .thumbnail 的 <a> 標籤。
- 這會新增四個畫素的內邊距(padding)和一個灰色的邊框。
當滑鼠懸停在影象上時,會動畫顯示出影象的輪廓。
<a href="#" class="thumbnail"> <img src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的佔位符縮圖"> </a>
新增自定義的內容
- 把帶有 class .thumbnail 的 <a> 標籤改為 <div>。
- 在該 <div> 內,您可以新增任何您想要新增的東西。由於這是一個 <div>,我們可以使用預設的基於 span 的命名規則來調整大小。
如果您想要給多個影象進行分組,請把它們放置在一個無序列表中,且每個列表項向左浮動。
<div class="thumbnail"> <img src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的佔位符縮圖"> <div class="caption"> <h3>縮圖標籤</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>
Bootstrap 警告(Alerts)
建立一個 <div>,並向其新增一個 .alert class 和四個上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,來新增一個基本的警告框
可取消的警告(Dismissal Alerts)
建立一個可取消的警告(Dismissal Alert)步驟如下:
- 通過建立一個 <div>,並向其新增一個 .alert class 和四個上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,來新增一個基本的警告框。
- 同時向上面的 <div> class 新增可選的 .alert-dismissable。
新增一個關閉按鈕。
<div class="alert alert-success alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 成功!很好地完成了提交。 </div>
警告(Alerts)中的連結
在警告(Alerts)中建立連結的步驟如下:
- 通過建立一個 <div>,並向其新增一個 .alert class 和四個上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,來新增一個基本的警告框。
- 使用 .alert-link 實體類來快速提供帶有匹配顏色的連結。
Bootstrap 進度條
預設的進度條
- 建立一個基本的進度條的步驟如下:
- 新增一個帶有 class .progress 的 <div>。
- 接著,在上面的 <div> 內,新增一個帶有 class .progress-bar 的空的 <div>。
新增一個帶有百分比表示的寬度的 style 屬性,例如 style=”60%”; 表示進度條在 60% 的位置。
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> <span class="sr-only">40% 完成</span> </div> </div>
條紋的進度條
建立一個條紋的進度條的步驟如下:
- 新增一個帶有 class .progress 和 .progress-striped 的 <div>。
- 接著,在上面的 <div> 內,新增一個帶有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中,* 可以是 success、info、warning、danger。
- 新增一個帶有百分比表示的寬度的 style 屬性,例如 style=”60%”; 表示進度條在 60% 的位置。
動畫的進度條
建立一個動畫的進度條的步驟如下:
- 新增一個帶有 class .progress 和 .progress-striped 的 <div>。同時新增 class .active。
- 接著,在上面的 <div> 內,新增一個帶有 class .progress-bar 的空的 <div>。
- 新增一個帶有百分比表示的寬度的 style 屬性,例如 style=”60%”; 表示進度條在 60% 的位置。
堆疊的進度條
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">30% 完成(資訊)</span>
</div>
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 20%;">
<span class="sr-only">20% 完成(警告)</span>
</div>
</div>
Bootstrap 多媒體物件(Media Object)
在 HTML 標籤中新增以下兩種形式來設定媒體物件:
- .media:該 class 允許將媒體物件裡的多媒體(影象、視訊、音訊)浮動到內容區塊的左邊或者右邊。
.media-list:如果你需要一個列表,各項內容是無序列表的一部分,可以使用該 class。可用於評論列表與文章列表。
<div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒體物件"> </a> <div class="media-body"> <h4 class="media-heading">媒體標題</h4> 這是一些示例文字。這是一些示例文字。 這是一些示例文字。這是一些示例文字。 這是一些示例文字。這是一些示例文字。 這是一些示例文字。這是一些示例文字。 這是一些示例文字。這是一些示例文字。 </div> </div> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒體物件"> </a> <div class="media-body"> <h4 class="media-heading">媒體標題</h4> 這是一些示例文字。這是一些示例文字。 這是一些示例文字。這是一些示例文字。 這是一些示例文字。這是一些示例文字。 這是一些示例文字。這是一些示例文字。 這是一些示例文字。這是一些示例文字。 <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒體物件"> </a> <div class="media-body"> <h4 class="media-heading">媒體標題</h4> 這是一些示例文字。這是一些示例文字。 這是一些示例文字。這是一些示例文字。 這是一些示例文字。這是一些示例文字。 這是一些示例文字。這是一些示例文字。 這是一些示例文字。這是一些示例文字。 </div> </div> </div> </div>
Bootstrap 列表組
列表元件用於以列表形式呈現複雜的和自定義的內容。建立一個基本的列表組的步驟如下:
- 向元素 <ul> 新增 class .list-group。
向 <li> 新增 class .list-group-item。
<ul class="list-group"> <li class="list-group-item">免費域名註冊</li> <li class="list-group-item">免費 Window 空間託管</li> <li class="list-group-item">影象的數量</li> <li class="list-group-item">24*7 支援</li> <li class="list-group-item">每年更新成本</li> </ul>
向列表組新增連結
<a href="#" class="list-group-item active">
免費域名註冊
</a>
<a href="#" class="list-group-item">24*7 支援</a>
<a href="#" class="list-group-item">免費 Window 空間託管</a>
<a href="#" class="list-group-item">影象的數量</a>
<a href="#" class="list-group-item">每年更新成本</a>
Bootstrap 面板(Panels)
面板元件用於把 DOM 元件插入到一個盒子中。建立一個基本的面板,只需要向 <div> 元素新增 class .panel 和 class .panel-default 即可
面板標題
通過以下兩種方式來新增面板標題:
- 使用 .panel-heading class 可以很簡單地向面板新增標題容器。to easily add a heading container to your panel.
使用帶有 .panel-title class 的 <h1>-<h6> 來新增預定義樣式的標題。
<div class="panel panel-default"> <div class="panel-heading"> 不帶 title 的面板標題 </div> <div class="panel-body"> 面板內容 </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> 帶有 title 的面板標題 </h3> </div> <div class="panel-body"> 面板內容 </div> </div>
面板腳註
把按鈕或者副文字放在帶有 class .panel-footer 的 <div> 中
<div class="panel panel-default">
<div class="panel-body">
這是一個基本的面板
</div>
<div class="panel-footer">面板腳註</div>
</div>
帶語境色彩的面板
使用語境狀態類 panel-primary、panel-success、panel-info、panel-warning、panel-danger,來設定帶語境色彩的面板
帶表格的面板
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">面板標題</h3>
</div>
<div class="panel-body">
這是一個基本的面板
</div>
<table class="table">
<th>產品</th><th>價格 </th>
<tr><td>產品 A</td><td>200</td></tr>
<tr><td>產品 B</td><td>400</td></tr>
</table>
</div>
<div class="panel panel-default">
<div class="panel-heading">面板標題</div>
<table class="table">
<th>產品</th><th>價格 </th>
<tr><td>產品 A</td><td>200</td></tr>
<tr><td>產品 B</td><td>400</td></tr>
</table>
</div>
Bootstrap Well
Well 是一種會引起內容凹陷顯示或插圖效果的容器 <div>。為了建立 Well,只需要簡單地把內容放在帶有 class .well 的 <div> 中即可。
<div class="well well-lg">您好,我在大的 Well 中!</div>
<div class="well well-sm">您好,我在小的 Well 中!</div>