一、按钮类
以下样式可用于<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>