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