Bootstrap CSS -6:按钮

一、按钮类

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

按钮状态
Bootstrap 提供了激活、禁用等按钮状态的 class，下面将进行详细讲解。

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

下表列出了让按钮元素和锚元素呈激活状态的 class：
按钮元素 添加 .active class 来显示它是激活的。
锚元素 添加 .active class 到 按钮来显示它是激活的。


二、按钮组
在 div 中直接使用 .btn-group 可以创建按钮组：
在div中使用 .btn-group-lg|sm|xs 来控制按钮组的大小：
如果要设置垂直方向的按钮可以通过 .btn-group-vertical 类来设置：
可以通过 .btn-group-justified 类来设置自适应大小的按钮组。

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

注意: 如果是 元素, 你需要在外层使用 .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 **dropdown-toggl**e" 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 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>