怎么使用Bootstrap美化按鈕

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

創(chuàng)新互聯(lián)公司主要從事網(wǎng)站制作、成都做網(wǎng)站、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務汶上,十載網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18980820575

在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 讓按鈕的寬度變?yōu)?00%并且成了塊級元素

active 表示按鈕為激活狀態(tài)

disabled 表示按鈕為禁用狀態(tài)不可點擊

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

禁用變?yōu)榛疑?/p>

三. 用a標簽做一個按鈕

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“怎么使用Bootstrap美化按鈕”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

標題名稱：怎么使用Bootstrap美化按鈕
文章路徑：http://bm7419.com/article40/geieeo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、網(wǎng)站內鏈、App開發(fā)、移動網(wǎng)站建設、網(wǎng)站策劃、品牌網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)