JS組件Bootstrap按鈕組與下拉按鈕詳解_javascript技巧

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

一、按鈕組（button groups）

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

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

2、多按鈕組
將多個

放進

中。

<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..."。

複製程式碼 程式碼如下:

loading state 

開關狀態。添加data-toggle="button"。

複製程式碼 程式碼如下:

single toggle

 

複選框。在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屬性自動觸發。
… 

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

$().button("loading") 

...  注意：firefox在頁面載入時會保持按鈕無效狀態。變通方案是在按鈕上套用autocomplete="off"。

使用javascript程式碼重置按鈕狀態。
$().button("reset") 

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

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

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

相關標籤：

Bootstrap按钮组 Bootstrap下拉按钮

來源：php.cn

上一篇：如何使用AngularJs打造權限管理系統【簡易型】_AngularJS 下一篇：Bootstrap按鈕下拉選單元件詳解_javascript技巧

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

• 什麼是 NullPointerException，如何修復它？
  2024-10-22 09:46:29
• 從新手到程式設計師：您的旅程從 C 基礎知識開始
  2024-10-13 13:53:41
• 使用 PHP 解鎖 Web 開發：初學者指南
  2024-10-12 12:15:51
• 揭秘 C：為新程式設計師提供一條清晰簡單的道路
  2024-10-11 22:47:31
• 釋放您的編碼潛力：絕對初學者的 C 編程
  2024-10-11 19:36:51
• 釋放你內心的程式設計師：C 絕對初學者
  2024-10-11 15:50:41
• 使用 C 自動化您的生活：適合初學者的腳本和工具
  2024-10-11 15:07:41
• PHP 變得簡單：Web 開發的第一步
  2024-10-11 14:21:21
• 使用 Python 建立任何東西：釋放創造力的初學者指南
  2024-10-11 12:59:11
• 編碼的關鍵：為初學者釋放 Python 的力量
  2024-10-11 12:17:31

最新問題

sql groupby 不起作用，我想按 code_branch 分組 ->select('a.statusasstatus','b.nameascustomer_name','e.nameasbranch_name','c.nameascomp...

來自於 2024-04-06 19:24:49

0

2

488

依照ID對MySQL結果進行分組以便循環遍歷 我有一個表，其中有mysql中的航班資料。我正在編寫一個php程式碼，它將使用codeigniter3對資料進行分組和顯示journey_idair_idFlightDuratio...

來自於 2024-04-06 17:27:56

0

1

406

使用 Javascript / Jquery 提交表單且不含按鈕 我試圖透過呼叫JavaScript函數並使用JQUERY/PHP執行表單來提交沒有按鈕的表單。我希望表單在後端靜默執行，而無需重新載入頁面。不幸的是，它不斷傳回JavaScript...

來自於 2024-04-06 14:54:03

0

2

421

在反應中實現三狀態切換的最佳方法？ 我正在React創建一些按鈕，觸發從一個到下一個的狀態變更。我的一些按鈕有三種狀態，由枚舉表示。這三種狀態應依連續順序設定。當達到最後一個值時，下一個操作應該再次將狀態設定回枚舉的...

來自於 2024-04-06 13:51:32

0

1

418

提交後如何列印選定的複選框值 這是我的複選框清單和我需要提交資料的按鈕..<label>AccessLocations</label><br/><inputtype=&...

來自於 2024-04-06 13:07:43

0

2

337

相關專題

更多>

• js四捨五入
• java工廠模式有哪些好處
• 常用排列組合公式
• freelaunchbar
• 微店是什麼
• 如何建立FTP站點
• blockquote標籤怎麼用
• fclose函數的用法