JS組件Bootstrap按鈕組與下拉按鈕詳解
本文先為大家分享按鈕組的使用方法，具體內(nèi)容如下
一、按鈕組（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">放進(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..."。
開關(guān)狀態(tài)。添加data-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屬性自動觸發(fā)。
<button type="button" class="btn" data-toggle="button" >…</button>
使用JavaScript代碼觸發(fā)加載狀態(tài)，同時按鈕顯示data-loading-text屬性指定的值。
$().button("loading")
<button type="button" class="btn" data-loading-text="loading stuff..." >...</button>
注意：Firefox在頁面載入時會保持按鈕無效狀態(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)容，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
extjs簡介_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了extjs簡介，ExtJS為開發(fā)者在開發(fā)富客戶的B/S應(yīng)用中提供豐富的UI組件，具有統(tǒng)一的主題，便于快速開發(fā)，提高效率2017-07-07
js自執(zhí)行函數(shù)的幾種不同寫法的比較,需要的朋友可以參考下2012-08-08
這篇文章主要介紹了JS全局變量和局部變量最新解析的相關(guān)知識，本文給給大家補(bǔ)充js刪除局部變量的代碼，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
Js on及addEventListener原理用法區(qū)別解析
這篇文章主要介紹了Js on及addEventListener原理用法區(qū)別解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
這篇文章主要給大家介紹了關(guān)于前端小程序中.env?文件夾的相關(guān)資料,.env文件夾允許開發(fā)者在不同的環(huán)境中配置不同的變量值,以便在小程序的不同階段或環(huán)境中使用,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
這篇文章主要介紹了微信小程序如何連接Java后臺,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
Bootstrap 填充Json數(shù)據(jù)的實例代碼
本篇文章主要介紹了Bootstrap 填充Json數(shù)據(jù)的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要介紹了js實現(xiàn)的奧運倒計時時鐘效果代碼,可實現(xiàn)根據(jù)指定時間進(jìn)行倒計時的實時顯示效果,非常簡單實用,需要的朋友可以參考下2015-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義輪播圖，swiper dots默認(rèn)樣式修改，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
TypeScript是JavaScript的超集,擴(kuò)展了JavaScript的語法,因此現(xiàn)有的JavaScript代碼可與TypeScript一起工作無需任何修改,TypeScript通過類型注解提供編譯時的靜態(tài)類型檢查,下面這篇文章主要給大家介紹了關(guān)于TypeScript安裝與使用的詳細(xì)教程,需要的朋友可以參考下2023-01-01