如何使用Bootstrap 按鈕實例詳解

更新時間：2017年03月29日 14:24:47 作者：Carl_Hugo

本章將通過實例講解如何使用 Bootstrap 按鈕。任何帶有 class .btn 的元素都會繼承圓角灰色按鈕的默認(rèn)外觀。但是 Bootstrap 提供了一些選項來定義按鈕的樣式。具體通過本文實例詳解

Bootstrap 按鈕

本章將通過實例講解如何使用 Bootstrap 按鈕。任何帶有 class .btn 的元素都會繼承圓角灰色按鈕的默認(rèn)外觀。但是 Bootstrap 提供了一些選項來定義按鈕的樣式，具體如下表所示：

以下樣式可用于<a>, <button>, 或 <input> 元素上：

下面的實例演示了上面所有的按鈕 class：

<!-- 標(biāo)準(zhǔn)的按鈕 -->
<button type="button" class="btn btn-default">默認(rèn)按鈕</button>
<!-- 提供額外的視覺效果，標(biāo)識一組按鈕中的原始動作 -->
<button type="button" class="btn btn-primary">原始按鈕</button>
<!-- 表示一個成功的或積極的動作 -->
<button type="button" class="btn btn-success">成功按鈕</button>
<!-- 信息警告消息的上下文按鈕 -->
<button type="button" class="btn btn-info">信息按鈕</button>
<!-- 表示應(yīng)謹(jǐn)慎采取的動作 -->
<button type="button" class="btn btn-warning">警告按鈕</button>
<!-- 表示一個危險的或潛在的負(fù)面動作 -->
<button type="button" class="btn btn-danger">危險按鈕</button>
<!-- 并不強調(diào)是一個按鈕，看起來像一個鏈接，但同時保持按鈕的行為 -->
<button type="button" class="btn btn-link">鏈接按鈕</button>

效果

按鈕大小

下表列出了獲得各種大小按鈕的 class：

<p>
 <button type="button" class="btn btn-primary btn-lg">大的原始按鈕</button>
 <button type="button" class="btn btn-default btn-lg">大的按鈕</button>
</p>
<p>
 <button type="button" class="btn btn-primary">默認(rèn)大小的原始按鈕</button>
 <button type="button" class="btn btn-default">默認(rèn)大小的按鈕</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">小的原始按鈕</button>
 <button type="button" class="btn btn-default btn-sm">小的按鈕</button>
</p>
<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>

效果

按鈕狀態(tài)

Bootstrap 提供了激活、禁用等按鈕狀態(tài)的 class，下面將進(jìn)行詳細(xì)講解。

激活狀態(tài)

按鈕在激活時將呈現(xiàn)為被按壓的外觀（深色的背景、深色的邊框、陰影）。

下表列出了讓按鈕元素和錨元素呈激活狀態(tài)的 class：

<p>
 <button type="button" class="btn btn-default btn-lg ">默認(rèn)按鈕</button>
 <button type="button" class="btn btn-default btn-lg active">激活按鈕</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-lg ">原始按鈕</button>
 <button type="button" class="btn btn-primary btn-lg active">激活的原始按鈕</button>
</p>

禁用狀態(tài)

當(dāng)您禁用一個按鈕時，它的顏色會變淡 50%，并失去漸變。

下表列出了讓按鈕元素和錨元素呈禁用狀態(tài)的 class：

下面的實例演示了這點：

<p>
 <button type="button" class="btn btn-default btn-lg">默認(rèn)按鈕</button>
 <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按鈕</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-lg ">原始按鈕</button>
 <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按鈕</button>
</p>
<p>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default btn-lg" role="button">鏈接</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default btn-lg disabled" role="button">禁用鏈接</a>
</p>
<p>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary btn-lg" role="button">原始鏈接</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary btn-lg disabled" role="button">禁用的原始鏈接</a>
</p>

效果

按鈕標(biāo)簽

您可以在 <a>、<button> 或 <input> 元素上使用按鈕 class。但是建議您在 <button> 元素上使用按鈕 class，避免跨瀏覽器的不一致性問題。

下面的實例演示了這點：

<a class="btn btn-default" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="提交">

以上所述是小編給大家介紹的使用Bootstrap 按鈕實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: