JS組件Bootstrap按鈕組與下拉按鈕詳解_javascript技巧

本文先為大家分享按鈕組的使用方法，具體內容如下

一、按鈕組（button groups）

1、單一按鈕組
用.btn-group封裝多個帶.btn的

<div class="btn-group"> 
 <button class="btn">1</button> 
 <button class="btn">2</button> 
 <button class="btn">3</button> 
</div> 

2、多按鈕組
將多個

放進

中。

<div class="btn-toolbar"> 
 <div class="btn-group"> 
  ... 
 </div> 
 <div class="btn-group"> 
  ... 
 </div> 
</div> 

3、垂直按鈕組
向.btn-group添加.btn-group-vertical。

<div class="btn-group btn-group-vertical"> 
 ... 
</div> 

二、下拉按鈕（button dropdowns）

範例

<div class="btn-group"> 
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
  action 
  <span class="caret"></span> 
 </a> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

1、控制大小
同樣使用.btn-large、.btn-small、.btn-mini控制大小。

2、分割的下拉按鈕

<div class="btn-group"> 
 <button class="btn">action</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

3、向上出現的選單

<div class="btn-group dropup"> 
 <button class="btn">dropup</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

三、javascript

例
載入狀態。加入data-loading-text="loading..."。

複製程式碼 程式碼如下:

loading state 

開關狀態。添加data-toggle="button"。

複製程式碼 程式碼如下:

single toggle

 

複選框。在btn-group後加入data-toggle="buttons-checkbox"。

<div class="btn-group" data-toggle="buttons-checkbox"> 
 <button type="button" class="btn btn-primary">left</button> 
 <button type="button" class="btn btn-primary">middle</button> 
 <button type="button" class="btn btn-primary">right</button> 
</div> 

單選。在btn-group後加入data-toggle="buttons-radio"。

<div class="btn-group" data-toggle="buttons-radio"> 
 <button type="button" class="btn btn-primary">left</button> 
 <button type="button" class="btn btn-primary">middle</button> 
 <button type="button" class="btn btn-primary">right</button> 
</div> 

用法
javascript程式碼觸發開關狀態。
$().button("toggle") 
也可加入data-toggle屬性自動觸發。
… 

使用javascript程式碼觸發載入狀態，同時按鈕顯示data-loading-text屬性指定的值。

$().button("loading") 

...  注意：firefox在頁面載入時會保持按鈕無效狀態。變通方案是在按鈕上套用autocomplete="off"。

使用javascript程式碼重置按鈕狀態。
$().button("reset") 

重設按鈕狀態，並將按鈕文字變成指定的文字。下例的complete僅為例子，可以替換。

<button class="btn" data-complete-text="finished!" >...</button> 
<script> 
 $('.btn').button('complete') 
</script> 

以上就是本文的全部內容，希望對大家的學習有所幫助。