JS組件Bootstrap按鈕組與下拉按鈕詳解，jsbootstrap

JS組件Bootstrap按鈕組與下拉按鈕詳解，jsbootstrap

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

一、按鈕組（Button Groups）

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

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

2、多個按鈕組
將多個<div class="btn-group">放進<div class="btn-toolbar">中。

<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..."。
複製代碼 代碼如下:<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button> 

開關狀態。添加data-toggle="button"。
複製代碼 代碼如下:<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button> 

複選框。在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屬性自動觸發。
<button type="button" class="btn" data-toggle="button" >…</button> 

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

$().button("loading") 

<button type="button" class="btn" data-loading-text="loading stuff..." >...</button> 
注意：Firefox在頁面載入時會保持按鈕無效狀態。變通方案是在按鈕上應用autocomplete="off"。

使用JavaScript代碼重設按鈕狀態。
$().button("reset") 

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

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

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