欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2016年05月10日 09:29:20   投稿：lijiao  
這篇文章主要為大家介紹了JS組件Bootstrap按鈕組與下拉按鈕的相關(guān)資料，感興趣的小伙伴們可以參考一下

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

一、按鈕組（Button Groups）

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

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

2、多個(gè)按鈕組
將多個(gè)<div class="btn-group">放進(jìn)<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、向上出現(xiàn)的菜單

<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

例子
加載狀態(tài)。添加data-loading-text="Loading..."。

復(fù)制代碼 代碼如下:
<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button> 

開關(guān)狀態(tài)。添加data-toggle="button"。

復(fù)制代碼 代碼如下:
<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
 

復(fù)選框。在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代碼觸發(fā)開關(guān)狀態(tài)。
$().button("toggle") 
也可添加data-toggle屬性自動(dòng)觸發(fā)。
<button type="button" class="btn" data-toggle="button" >…</button> 

使用JavaScript代碼觸發(fā)加載狀態(tài)，同時(shí)按鈕顯示data-loading-text屬性指定的值。

$().button("loading") 

<button type="button" class="btn" data-loading-text="loading stuff..." >...</button> 
注意：Firefox在頁面載入時(shí)會(huì)保持按鈕無效狀態(tài)。變通方案是在按鈕上應(yīng)用autocomplete="off"。

使用JavaScript代碼重置按鈕狀態(tài)。
$().button("reset") 

重置按鈕狀態(tài)，并將按鈕文字變成指定的文字。下例的complete僅為例子，可以替換。

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評(píng)論