bootstrap按鈕的標(biāo)簽有哪些

這篇文章主要講解了“bootstrap按鈕的標(biāo)簽有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“bootstrap按鈕的標(biāo)簽有哪些”吧！

bootstrap按鈕可以是：1、a標(biāo)簽，語(yǔ)法“<a href="#"></a>”；2、button標(biāo)簽，語(yǔ)法“<button></button>”；3、button類(lèi)型的input標(biāo)簽，語(yǔ)法“<input type="button">”。

本教程操作環(huán)境：Windows7系統(tǒng)、bootsrap3.3.7版、DELL G3電腦

bootstrap按鈕可以是：a標(biāo)簽、 button標(biāo)簽、button類(lèi)型的input標(biāo)簽

一、btn類(lèi)

基礎(chǔ)按鈕類(lèi)，將a標(biāo)簽、 button標(biāo)簽、button類(lèi)型的input標(biāo)簽轉(zhuǎn)換成bootstrap下基礎(chǔ)按鈕樣式。

<div style="margin-bottom:15px">
  <a href="#">查看評(píng)論</a>
  </div>
  <div style="margin-bottom:15px">
  <button type="submit">結(jié)賬</button>
  </div>
  <div style="margin-bottom:15px">
  <input type="button" value="設(shè)置">
  </div>

a標(biāo)簽、 button標(biāo)簽、button類(lèi)型的input標(biāo)簽的原始樣式

用于a標(biāo)簽、 button標(biāo)簽、button類(lèi)型的input標(biāo)簽。

給以上標(biāo)簽添加bootstrap默認(rèn)的按鈕樣式。

<div style="margin-bottom:15px">
  <a class="btn" href="#">查看評(píng)論</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn" type="submit">結(jié)賬</button>
  </div>
  <div style="margin-bottom:15px">
  <input  class="btn" type="button" value="設(shè)置">
  </div>

a標(biāo)簽、 button標(biāo)簽、button類(lèi)型的input標(biāo)簽設(shè)置btn類(lèi)后的樣式

二、btn-primary類(lèi)、btn-info類(lèi)、btn-success類(lèi)、btn-warning類(lèi)、btn-danger類(lèi)、btn-inverse類(lèi)

<div style="margin-bottom:15px">
  <a class="btn btn-primary" href="#">.btn .btn-primary</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn btn-info" type="submit">.btn .btn-info</button>
  </div>
  <div style="margin-bottom:15px">
  <input  class="btn btn-success" type="button" value=".btn .btn-success">
  </div>
  <div style="margin-bottom:15px">
  <a class="btn btn-warning" href="#">.btn .btn-warning</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn btn-danger" type="submit">.btn .btn-danger</button>
  </div>
  <div style="margin-bottom:15px">
  <input  class="btn btn-inverse" type="button" value=".btn .btn-inverse">
  </div>

.btn .btn-*按鈕樣式

三、btn-large類(lèi)、btn-small類(lèi)、btn-mini類(lèi)

用于設(shè)置標(biāo)簽大小，貌似不起作用。

 <div style="margin-bottom:15px">
  <a class="btn btn-primary btn-large" href="#">.btn .btn-primary</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn btn-info btn-small" type="submit">.btn .btn-info</button>
  </div>
  <div style="margin-bottom:15px">
  <input  class="btn btn-success btn-mini" type="button" value=".btn .btn-success">
  </div>

使用btn-large類(lèi)、btn-small類(lèi)、btn-mini類(lèi)后的樣式

四、i標(biāo)簽

用于按鈕標(biāo)簽內(nèi)部，為按鈕添加圖標(biāo)。沒(méi)起作用。

<div style="margin-bottom:15px">
  <a class="btn btn-primary btn-large" href="#"><i class="icon-comment icon-white"></i> 查看評(píng)論</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn btn-info btn-small" type="submit"><i class="icon-shopping-cart"></i> 結(jié)賬</button>
  </div>

加i標(biāo)簽后的樣式

五、按鈕群組

-btn-group類(lèi)：用于包含一組按鈕群組。
-btn-toolbar類(lèi)：用于將多個(gè)按鈕群組同行顯示，且中間留出空間。

<div class="btn-toolbar">
  <div class="btn-group">
  <button class="btn">左</button>
  <button class="btn">中</button>
  <button class="btn">右</button>
  </div>
  
  <div class="btn-group">
  <button class="btn">左</button>
  <button class="btn">中</button>
  <button class="btn">右</button>
  </div>
 </div>

六、帶下拉菜單的按鈕

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">字體<span class="caret"></span></a>
  <ul class="dropdown-menu">
  <li><a href="#">黑體</a></li>
  <li><a href="#">宋體</a></li>
  <li><a href="#">仿宋</a></li>  
  </ul>
  </div>

div標(biāo)簽：用于包含帶下拉菜單的按鈕和下拉菜單。
-btn-group類(lèi)
a標(biāo)簽 ：帶下拉菜單的按鈕，可包含span標(biāo)簽和按鈕名。
-dropdown-toggle類(lèi)：給下拉菜單按鈕添加樣式。
-data-toggle屬性：
設(shè)置data-toggle="dropdown"后，可以通過(guò)點(diǎn)擊按鈕控制下拉菜單的彈出和收起。
span標(biāo)簽
-caret類(lèi)：添加三角形下拉標(biāo)志
ul標(biāo)簽：包含下拉菜單的內(nèi)容
-dropdown-menu類(lèi)
li標(biāo)簽：包含各列表項(xiàng)

帶下拉菜單的按鈕

<div class="btn-group">
   <a class="btn" href="#">字體</a>
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
  <li><a href="#">黑體</a></li>
  <li><a href="#">宋體</a></li>
  <li><a href="#">仿宋</a></li>  
  </ul>
  </div>

將按鈕名提取出來(lái)單獨(dú)放到一個(gè)a標(biāo)簽中。

小三角單獨(dú)控制下拉菜單

感謝各位的閱讀，以上就是“bootstrap按鈕的標(biāo)簽有哪些”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)bootstrap按鈕的標(biāo)簽有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！