詳解Bootstrap各式各樣的按鈕(推薦)

更新時(shí)間：2016年12月13日 11:44:20 作者：Tiramisu_C

Bootstrap為我們提供了各式各樣漂亮的按鈕，我們無(wú)需自己給按鈕寫(xiě)樣式，直接使用它給我們提供的類樣式，使用在我們的按鈕上，非常的簡(jiǎn)單方便

Bootstrap為我們提供了各式各樣漂亮的按鈕，我們無(wú)需自己給按鈕寫(xiě)樣式，直接使用它給我們提供的類樣式，使用在我們的按鈕上，非常的簡(jiǎn)單方便。

為尊重原創(chuàng)這里貼一下參考的教程：http://www.runoob.com/bootstrap/bootstrap-buttons.html。在我的很多筆記中，您可能會(huì)看到我貼的www.runoob.com相關(guān)的網(wǎng)址，在這里先聲明這不是廣告，我只是覺(jué)得每個(gè)人的勞動(dòng)成果都應(yīng)該被尊重。這個(gè)網(wǎng)站收集了很多的信息，供我學(xué)習(xí)，我非常的感激，借鑒于這些很好的教程，我做出自己的總結(jié)，歸納知識(shí)點(diǎn)，方便自己記憶。假如您在做項(xiàng)目或者學(xué)習(xí)中，正好需要這方面的知識(shí)，然后這篇文章剛好可以幫到您，那我將會(huì)非常開(kāi)心。

活學(xué)活用，自己利用bootstrap的樣式來(lái)做一個(gè)表格，里邊放一些知識(shí)點(diǎn)：

類樣式	描述
.btn	圓角灰色按鈕，為了讓按鈕不那么尖銳，我們的按鈕都應(yīng)該使用這個(gè)樣式來(lái)獲得圓角，然后再覆蓋上其他的特性。
.btn-default	默認(rèn)/標(biāo)準(zhǔn)按鈕，白色的按下灰色。
.btn-primary	原始按鈕樣式（未被操作），這個(gè)跟active相對(duì)應(yīng)，他是一個(gè)按鈕沒(méi)被操作的樣式，而active是按鈕被點(diǎn)擊時(shí)顯示的相應(yīng)的樣式。
.btn-success	表示成功的動(dòng)作
.btn-info	該樣式可用于要彈出信息的按鈕
.btn-warning	表示需要謹(jǐn)慎操作的按鈕
.btn-danger	表示一個(gè)危險(xiǎn)動(dòng)作的按鈕操作
.btn-link	讓按鈕看起來(lái)像個(gè)鏈接 (仍然保留按鈕行為)
.btn-lg	大按鈕
.btn-sm	小按鈕
.btn-xs	超小按鈕
.btn-block	塊級(jí)按鈕(拉伸至父元素100%的寬度)
.active	按鈕被點(diǎn)擊，按鈕在激活時(shí)將呈現(xiàn)為被按壓的外觀（深色的背景、深色的邊框、陰影）。
.disabled	禁用按鈕，顏色會(huì)變淡 50%，并失去漸變。

按鈕的各個(gè)效果如下：

很明顯，圓角按鈕~成功按鈕都是比較容易理解的，我們主要講一下原始按鈕，激活按鈕和禁用按鈕。

原始按鈕（btn-primary）：指的是一個(gè)按鈕（原始按鈕，激活按鈕和禁用按鈕都使用了成功按鈕的樣式），還沒(méi)有被操作的樣式，這里的表現(xiàn)跟其左邊的成功按鈕樣式是一致的，都是沒(méi)有被按下的樣子；

激活按鈕（.active）：按鈕被點(diǎn)擊，被按壓時(shí)的樣式，這個(gè)可以說(shuō)跟原始按鈕是相對(duì)應(yīng)的。

禁用按鈕（.disabled）：看到效果很明顯，相比于成功按鈕，顏色變淡，失去漸變，有一層蒙蒙的效果，當(dāng)我們的鼠標(biāo)懸停在上邊的時(shí)候，會(huì)出現(xiàn)紅色的禁用圓圈，這個(gè)樣式非常利于用戶體驗(yàn)。

附上代碼：

<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>bootsrap按鈕</title> 
 <link rel="stylesheet" href="../libs/bootstrap.css"> 
</head> 
<body> 
 <div class="container"> 
  <button class="btn">圓角按鈕</button> 
  <button class="btn btn-default">默認(rèn)按鈕</button> 
  <button class="btn btn-info">信息按鈕</button> 
  <button class="btn btn-warning">警示按鈕</button> 
  <button class="btn btn-danger">危險(xiǎn)按鈕</button> 
  <button class="btn btn-link">鏈接按鈕</button> 
  <button class="btn btn-lg">大的按鈕</button> 
  <button class="btn btn-sm">小的按鈕</button> 
  <button class="btn btn-xs">超小按鈕</button> 
  <button class="btn btn-block">塊級(jí)按鈕</button> 
  <button class="btn btn-success">成功按鈕</button> 
  <button class="btn btn-success btn-primary">原始按鈕</button> 
  <button class="btn btn-success active">激活按鈕</button> 
  <button class="btn btn-success disabled" role="button">禁用按鈕</button> 
 </div> 
</body> 
</html>

以上所述是小編給大家介紹的詳解Bootstrap各式各樣的按鈕，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: