這篇文章主要講解了“bootstrap按鈕的標簽有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“bootstrap按鈕的標簽有哪些”吧！

創新互聯建站是專業的象山網站建設公司，象山接單;提供網站設計、成都做網站,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行象山網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!

bootstrap按鈕可以是：1、a標簽，語法“<a href="#"></a>”；2、button標簽，語法“<button></button>”；3、button類型的input標簽，語法“<input type="button">”。

本教程操作環境：Windows7系統、bootsrap3.3.7版、DELL G3電腦

bootstrap按鈕可以是：a標簽、 button標簽、button類型的input標簽

一、btn類

基礎按鈕類，將a標簽、 button標簽、button類型的input標簽轉換成bootstrap下基礎按鈕樣式。

<div style="margin-bottom:15px">
  <a href="#">查看評論</a>
  </div>
  <div style="margin-bottom:15px">
  <button type="submit">結賬</button>
  </div>
  <div style="margin-bottom:15px">
  <input type="button" value="設置">
  </div>

a標簽、 button標簽、button類型的input標簽的原始樣式

用于a標簽、 button標簽、button類型的input標簽。

給以上標簽添加bootstrap默認的按鈕樣式。

<div style="margin-bottom:15px">
  <a class="btn" href="#">查看評論</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn" type="submit">結賬</button>
  </div>
  <div style="margin-bottom:15px">
  <input  class="btn" type="button" value="設置">
  </div>

a標簽、 button標簽、button類型的input標簽設置btn類后的樣式

二、btn-primary類、btn-info類、btn-success類、btn-warning類、btn-danger類、btn-inverse類

<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類、btn-small類、btn-mini類

用于設置標簽大小，貌似不起作用。

 <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類、btn-small類、btn-mini類后的樣式

四、i標簽

用于按鈕標簽內部，為按鈕添加圖標。沒起作用。

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

加i標簽后的樣式

五、按鈕群組

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

<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標簽：用于包含帶下拉菜單的按鈕和下拉菜單。
-btn-group類
a標簽 ：帶下拉菜單的按鈕，可包含span標簽和按鈕名。
-dropdown-toggle類：給下拉菜單按鈕添加樣式。
-data-toggle屬性：
設置data-toggle="dropdown"后，可以通過點擊按鈕控制下拉菜單的彈出和收起。
span標簽
-caret類：添加三角形下拉標志
ul標簽：包含下拉菜單的內容
-dropdown-menu類
li標簽：包含各列表項

帶下拉菜單的按鈕

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

將按鈕名提取出來單獨放到一個a標簽中。

小三角單獨控制下拉菜單

感謝各位的閱讀，以上就是“bootstrap按鈕的標簽有哪些”的內容了，經過本文的學習后，相信大家對bootstrap按鈕的標簽有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創新互聯，小編將為大家推送更多相關知識點的文章，歡迎關注！

分享題目：bootstrap按鈕的標簽有哪些
文章分享：http://www.yijiale78.com/article44/ihdcee.html

成都網站建設公司_創新互聯，為您提供定制網站、品牌網站設計、響應式網站、網站建設、網站收錄、自適應網站

廣告

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