如何使用Bootstrap 按鈕實例詳解（程式碼實例）

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

【相關影片推薦：Bootstrap教學】

Bootstrap 按鈕

#本章將透過實例來講解如何使用Bootstrap 按鈕。任何帶有 class .btn 的元素都會繼承圓角灰色按鈕的預設外觀。但Bootstrap 提供了一些選項來定義按鈕的樣式，如下表所示：

以下樣式可用於3499910bf9dac5ae3c52d5ede7383485, bb9345e55eb71822850ff156dfde57c8, 或d5fd7aea971a85678ba271703566ebfd 元素上：

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

<!-- 标准的按钮 -->
<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>

效果

# #按鈕大小

下表列出了獲得各種大小按鈕的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">默认大小的原始按钮</button>
 <button type="button" class="btn btn-default">默认大小的按钮</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>

效果

#按鈕狀態

Bootstrap 提供了啟動、停用等按鈕狀態的class，以下將進行詳細解說。

啟動狀態

按鈕在啟動時將呈現為被按壓的外觀（深色的背景、深色的邊框、陰影）。

下表列出了讓按鈕元素和錨元素呈現啟動狀態的class：

<p>
 <button type="button" class="btn btn-default btn-lg ">默认按钮</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>

停用狀態

當您停用一個按鈕時，它的顏色會變淡50%，並失去漸層。

#下表列出了讓按鈕元素和錨元素呈現禁用狀態的class：

# 

下面的實例示範了這點：

<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>
 <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>

效果

按鈕標籤

您可以在3499910bf9dac5ae3c52d5ede7383485、 bb9345e55eb71822850ff156dfde57c8 或d5fd7aea971a85678ba271703566ebfd 元素上使用按鈕class。但建議您在 bb9345e55eb71822850ff156dfde57c8 元素上使用按鈕 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 按鈕實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對php網站的支持！

#

以上是如何使用Bootstrap 按鈕實例詳解（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！