一、按鈕
類 描述 .btn 為按鈕添加基本樣式 .btn-default 默認/標准按鈕 .btn-primary 原始按鈕樣式（未被操作） .btn-success 表示成功的動作 .btn-info 該樣式可用於要彈出信息的按鈕 .btn-warning 表示需要謹慎操作的按鈕 .btn-danger 表示一個危險動作的按鈕操作 .btn-link 讓按鈕看起來像個鏈接 (仍然保留按鈕行為) .btn-lg 制作一個大按鈕 .btn-sm 制作一個小按鈕 .btn-xs 制作一個超小按鈕 .btn-block 塊級按鈕(拉伸至父元素100%的寬度) .active 按鈕被點擊 .disabled 禁用按鈕
按鈕樣式
<body> <!-- 標准的按鈕 --> <button type="button" class="btn btn-default">默認按鈕</button> <!-- 提供額外的視覺效果，標識一組按鈕中的原始動作 --> <button type="button" class="btn btn-primary">原始按鈕</button> <!-- 表示一個成功的或積極的動作 --> <button type="button" class="btn btn-success">成功按鈕</button> <!-- 信息警告消息的上下文按鈕 --> <button type="button" class="btn btn-info">信息按鈕</button> <!-- 表示應謹慎采取的動作 --> <button type="button" class="btn btn-warning">警告按鈕</button> <!-- 表示一個危險的或潛在的負面動作 --> <button type="button" class="btn btn-danger">危險按鈕</button> <!-- 並不強調是一個按鈕，看起來像一個鏈接，但同時保持按鈕的行為 --> <button type="button" class="btn btn-link">鏈接按鈕</button> </body>
按鈕大小
<p>
<button type="button" class="btn btn-primary btn-xs">
特別小的原始按鈕
</button>
<button type="button" class="btn btn-default btn-xs">
特別小的按鈕
</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">
塊級的原始按鈕
</button>
<button type="button" class="btn btn-default btn-lg btn-block">
塊級的按鈕
</button>
</p>
按鈕狀態
激活和禁用兩種狀態
<button type="button" class="btn btn-default btn-lg active">
激活按鈕
</button>
<button type="button" class="btn btn-primary btn-lg active">
激活的原始按鈕
</button>
<p>
<button type="button" class="btn btn-default btn-lg">
默認按鈕
</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">
禁用按鈕
</button>
</p>
<p>
<a href="#" class="btn btn-default btn-lg" role="button">
鏈接
</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">
禁用鏈接
</a>
</p>
按鈕class可以用在如下標簽
<a class="btn btn-default" href="#" role="button">鏈接</a> <button class="btn btn-default" type="submit">按鈕</button> <input class="btn btn-default" type="button" value="輸入"> <input class="btn btn-default" type="submit" value="提交">
二、按鈕組
Class 描述 .btn-group 該 class 用於形成基本的按鈕組。在 .btn-group 中放置一系列帶有 class .btn 的按鈕。 .btn-toolbar 該 class 有助於把幾組 <div class="btn-group"> 結合到一個 <div class="btn-toolbar"> 中，一般獲得更復雜的組件。 .btn-group-lg, .btn-group-sm, .btn-group-xs 這些 class 可應用到整個按鈕組的大小調整，而不需要對每個按鈕進行大小調整。 .btn-group-vertical 該 class 讓一組按鈕垂直堆疊顯示，而不是水平堆疊顯示。
<div class="btn-group btn-group-lg">
<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>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-lg" style="margin-right: 20px;">
<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-vertical">
<button type="button" class="btn btn-default">按鈕 1</button>
<button type="button" class="btn btn-default">按鈕 2</button>
<div class="btn-group-vertical">
<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>
</div>
上拉菜單
<div class="btn-group dropup">
<button type="button" class="btn btn-default dropdown-toggle btn-lg"
data-toggle="dropdown">
默認 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="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>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle btn-sm"
data-toggle="dropdown">
原始 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="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>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle btn-xs"
data-toggle="dropdown">
成功 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="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>
三、圖片
- .img-rounded：添加 border-radius:6px 來獲得圖片圓角。
- .img-circle：添加 border-radius:500px 來讓整個圖片變成圓形。
- .img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框。
<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded"> <img src="/wp-content/uploads/2014/06/download.png" class="img-circle"> <img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">