[Bootstrap入门][第四章 按钮]

[Bootstrap入门][第四章 按钮]

标签（空格分隔）： 未分类

---

预定义样式

<button type="button" class="btn btn-default">Default</button>

以上分别是

• btn-default,btn-primary,btn-success,btn-info,btn-warning,btn-danger。

尺寸

使用 .btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮。

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
....etc

btn-block

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

激活状态

当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 元素，是通过 :active 状态实现的。对于 元素，是通过.active 类实现的。然而，你还可以将 .active 应用到 上，并通过编程的方式使其处于激活状态。

button 元素

由于 :active 是伪状态，因此无需额外添加，但是在需要让其表现出同样外观的时候可以添加 .active 类。

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

链接（<a>）元素

可以为基于 <a>元素创建的按钮添加.active类。

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

禁用状态

button 元素

为<button> 元素添加 disabled 属性，使其表现出禁用状态。

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

链接（<a>）元素

为基于 <a>元素创建的按钮添加 .disabled 类。

按钮类

为 <a>、<button> 或 <input> 元素应用按钮类。