JS组件Bootstrap按钮组与下拉按钮详解

本文先为大家分享按钮组的使用方法，具体内容如下

一、按钮组（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">放进<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、向上出现的菜单

<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..."。
代码如下:<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button> 

开关状态。添加data-toggle="button"。
代码如下:<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button> 

复选框。在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"。