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

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

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

---

预定义样式

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

以上分别是

• 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 buttonbutton>
  <button type="button" class="btn btn-default btn-lg">Large buttonbutton>
p>
....etc

btn-block

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

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

激活状态

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

button 元素

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

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

链接（）元素

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

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary linka>
<a href="#" class="btn btn-default btn-lg active" role="button">Linka>

禁用状态

button 元素

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

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

链接（）元素

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

按钮类

为 、 或 元素应用按钮类。