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)文章
在JS中如何把毫秒轉(zhuǎn)換成規(guī)定的日期時(shí)間格式實(shí)例
本篇文章主要介紹了在JS中如何把毫秒轉(zhuǎn)換成規(guī)定的日期時(shí)間格式實(shí)例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-05-05JS中字符問(wèn)題(二進(jìn)制/十進(jìn)制/十六進(jìn)制及ASCII碼之間的轉(zhuǎn)換)
對(duì)于js的進(jìn)制轉(zhuǎn)換的一些方法分析2008-11-11基于JS編寫(xiě)一個(gè)看字說(shuō)顏色小游戲
這篇文章主要為大家分享了一個(gè)看字說(shuō)顏色的小游戲,游戲是利用JS語(yǔ)言編寫(xiě)實(shí)現(xiàn)的,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以學(xué)習(xí)一下2022-04-04JavaScript實(shí)現(xiàn)瀑布流布局的3種方式
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)瀑布流布局的3種方式,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12小程序?qū)崿F(xiàn)倒計(jì)時(shí)組件的使用示例
倒計(jì)時(shí)是指從一個(gè)固定的時(shí)間開(kāi)始,向前推算一段時(shí)間,來(lái)計(jì)算目標(biāo)時(shí)間或剩余時(shí)間的過(guò)程,本文主要介紹了小程序?qū)崿F(xiàn)倒計(jì)時(shí)組件的使用示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09JavaScript中顏色模型的基礎(chǔ)知識(shí)與應(yīng)用詳解
顏色模型,是用來(lái)表示顏色的數(shù)學(xué)模型。比如最常見(jiàn)的?RGB模型,使用?紅綠藍(lán)?三色來(lái)表示顏色。本文就來(lái)和大家講講JavaScript中顏色模型的基礎(chǔ)知識(shí)與應(yīng)用吧2023-02-02javascript正則表達(dá)式定義(語(yǔ)法)總結(jié)
這篇文章主要介紹了javascript正則表達(dá)式定義,對(duì)于JavaScript正則表達(dá)式的語(yǔ)法進(jìn)行了總結(jié)分析,需要的朋友可以參考下2016-01-01