2.5Bootstrap学习之按钮

电玩女神 2022-08-27 03:39 211阅读 0赞

**1、选项**

**![Center][]**

**使用上面列出的class可以快速创建一个带有样式的按钮。**

**2、尺寸**

需要让按钮具有不同尺寸吗？使用`.btn-lg`、`.btn-sm`、`.btn-xs`可以获得不同尺寸的按钮。

![复制代码][copycode.gif]

<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>
    <p>
      <button type="button" class="btn btn-primary">Default button</button>
      <button type="button" class="btn btn-default">Default button</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-sm">Small button</button>
      <button type="button" class="btn btn-default btn-sm">Small button</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
      <button type="button" class="btn btn-default btn-xs">Extra small button</button>
    </p>

![复制代码][copycode.gif]

![Center 1][]

通过给按钮添加`.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>

![Center 2][]

**3、活动状态**

当按钮处于活动状态时，其表现为被按压下（底色更深，边框夜色更深，内置阴影）。对于B`<button>`元素，是通过`:active`实现的。对于`<a>`元素，是通过`.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>

![Center 3][]

### 链接元素 ###

可以为`<a>`添加`.active` class。

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>

![Center 4][]

**4、禁用状态**

通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。

### 按钮元素 ###

为`<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>

![Center 5][]

#### 跨浏览器的兼容性 ####

如果为`<button>`添加`disabled`属性，Internet Explorer 9及更低版本的浏览器将会把按钮中的文本绘制为灰色，并带有恶心的阴影，目前还没有办法解决。

### 链接元素 ###

为`<a>`添加`.disabled` class。

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

![Center 6][]

这是和上面的按钮做一个对比。

我们把`.disabled`作为工具class使用，就像`.active` class一样，因此不需要增加前缀。

> ####  链接功能不受影响 ####
> 
> 上面提到的class只是改变`<a>`的外观，不影响功能。在此文档中，我们通过JavaScript代码禁用了链接的默认功能。

**5、可做按钮使用的html标签**

可以为`<a>`、`<button>`或`<input>`元素添加按钮class。

<a class="btn btn-default" href="#" role="button">Link</a>
        <button class="btn btn-default" type="submit">Button</button>
        <input class="btn btn-default" type="button" value="Input">
        <input class="btn btn-default" type="submit" value="Submit">

![Center 7][]

#### 跨浏览器表现 ####

作为最佳实践，我们强烈建议尽可能使用`<button>`元素以确保跨浏览器的一致性样式。

出去其它原因，这个[Firefox的bug][Firefox_bug]让我们无法为基于`<input>`标签的按钮设置`line-height`，这导致在Firefox上，他们与其它按钮的高度不一致。

[Center]: /images/20220824/6d7a8ecce97545698be0feb9cb6f455a.png
[copycode.gif]: /images/20220824/acaf120e9cdd4909bc8995ec3aa1f99e.png
[Center 1]: /images/20220824/fec48cc2cc96498d9eacf920fbb389f3.png
[Center 2]: /images/20220824/8dc9fe30b11345489ad18331e1135b4b.png
[Center 3]: /images/20220824/b96a7b1c30c4436b8a0ae8f810089849.png
[Center 4]: /images/20220824/0a5b27577b0e465bb85ff65e465700e8.png
[Center 5]: /images/20220824/b0bfa07e276a446f9b8be85419422aa7.png
[Center 6]: /images/20220824/d85f1f95a9da46de858f51dc87bcc329.png
[Center 7]: /images/20220824/19fdc4ef67b442f890462c63c89a2fc6.png
[Firefox_bug]: https://bugzilla.mozilla.org/show_bug.cgi?id=697451