怎么使用Bootstrap美化按鈕

這篇文章主要介紹了怎么使用Bootstrap美化按鈕，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

在HTML5中,按鈕的常用屬性主要為背景顏色和大小

demo代碼演示

一. input標簽:

<input type="button" value="按鈕" class="btn"/>

二. button標簽:(這里用button標簽舉例)

<button type="button" class="btn btn-defult">提交</button>

btn 表示基本樣式

btn-defult 表示默認樣式

默認樣式

btn-primary 表示背景色為藍色

<button type="button" class="btn btn-defult">按鈕</button>

primary

btn-success表示背景色為綠色

<button type="button" class="btn btn-success">按鈕</button>

success

其他顏色屬性

btn-waring 表示背景色為橙色

btn-danger 表示背景色為紅色

btn-info 表示背景色為淺藍色

btn-link 表示無背景色

<div class="row">
      <button type="button" class="btn btn-defult">按鈕</button>
      <button type="button" class="btn btn-primary">按鈕</button>
      <button type="button" class="btn btn-success">按鈕</button>
      <button type="button" class="btn btn-waring">按鈕</button>
      <button type="button" class="btn btn-info">按鈕</button>
      <button type="button" class="btn btn-danger">按鈕</button>
      <button type="button" class="btn btn-link">按鈕</button>
</div>

效果展示

按鈕尺寸:

btn-lg 較大

btn-md 中等

btn-sm 較小

btn-xs 更小

<div class="row" >
      <button type="button" class="btn btn-defult btn-lg">按鈕</button>
      <button type="button" class="btn btn-primary btn-md">按鈕</button>
      <button type="button" class="btn btn-success btn-sm">按鈕</button>
      <button type="button" class="btn btn-warning btn-xs">按鈕</button>
      <button type="button" class="btn btn-info btn-sm">按鈕</button>
      <button type="button" class="btn btn-danger btn-md">按鈕</button>
      <button type="button" class="btn btn-link btn-lg">按鈕</button>
</div>

效果展示

其他屬性

btn-block 讓按鈕的寬度變為100%并且成了塊級元素

active 表示按鈕為激活狀態

disabled 表示按鈕為禁用狀態不可點擊

<button type="button" class="btn btn-danger btn-lg" disabled>按鈕</button>

禁用變為灰色

三. 用a標簽做一個按鈕

<a herf="#" class="btn btn-danger active">按鈕</a>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“怎么使用Bootstrap美化按鈕”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!