2019-04-09 按钮（6）

任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观

以下样式可用于<a>, <button>, 或 <input> 元素上

按钮大小

按钮状态

按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）

禁用状态

当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。

下表列出了让按钮元素和锚元素呈禁用状态的 class：

按钮组

在 div 中直接使用 .btn-group 可以创建按钮组：

<div class="btn-group"> 

 <button type="button" class="btn btn-primary">Apple</button>

 <button type="button" class="btn btn-primary">Samsung</button>

 <button type="button" class="btn btn-primary">Sony</button>

</div>

使用 .btn-group-lg|sm|xs 来控制按钮组的大小：

如果要设置垂直方向的按钮可以通过 .btn-group-vertical 类来设置：

自适应大小的按钮组

可以通过 .btn-group-justified 类来设置自适应大小的按钮组。

以下实例使用 a 标签来展示：

<div class="btn-group btn-group-justified">

 <a href="#" class="btn btn-primary">Apple</a>

 <a href="#" class="btn btn-primary">Samsung</a>

 <a href="#" class="btn btn-primary">Sony</a>

</div>

注意: 如果是 <button> 元素, 你需要在外层使用 .btn-group 类来包裹:

<div class="btn-group btn-group-justified">

 <div class="btn-group"><button type="button" class="btn btn-primary">Apple</button></div> 

 <div class="btn-group"> <button type="button" class="btn btn-primary">Samsung</button> </div>

 <div class="btn-group"> <button type="button" class="btn btn-primary">Sony</button> </div>

</div>

内嵌下拉菜单的按钮组

<div class="btn-group"> 

 <button type="button" class="btn btn-primary">Apple</button> 

 <button type="button" class="btn btn-primary">Samsung</button> 

 <div class="btn-group"> 

 <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Sony <span class="caret"></span></button>

 <ul class="dropdown-menu" role="menu"> 

 <li><a href="#">Tablet</a></li> 

 <li><a href="#">Smartphone</a></li> 

 </ul> </div></div>

分割按钮

<div class="btn-group">

 <button type="button" class="btn btn-primary">Sony</button> 

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> 

 <ul class="dropdown-menu" role="menu"> 

 <li><a href="#">Tablet</a></li> 

 <li><a href="#">Smartphone</a></li>

 </ul>

</div>