Bootstrap 样式之按钮

朴灿烈づ我的快乐病毒、 2022-05-30 07:26 295阅读 0赞

我们可以通过Bootstrap 提供的按钮样式快速的创建我们需要的按钮样式

先来看看按钮的样式

我们先来实现一下按钮，通过给元素添加样式使之成为一个按钮，例如 <a> <button> <input>

等等元素都可以通过添加按钮的样式变成按钮，但是一般的情况的话还是使用<button>来实现；

<button type="button" class="btn btn-default">（默认样式）Default</button>
    <button type="button" class="btn btn-primary">（首选项）Primary</button>
    <button type="button" class="btn btn-success">（成功）Success</button>
    <button type="button" class="btn btn-info">（一般信息）Info</button>
    <button type="button" class="btn btn-warning">（警告）Warning</button>
    <button type="button" class="btn btn-danger">（危险）Danger</button>
    <button type="button" class="btn btn-link">（链接）Link</button>

显示效果：

![70][]

我们看到一共有四种样式，一般是颜色的不同代表不同的含义；

按钮的大小也是可以调整的

通过btn-lg（大按钮）  btn-sm（小按钮）   btn-xs（特别小按钮）  可以设置三种不同的按钮大小样式

`<button type="button" class="btn btn-success">默认大小的按钮</button>`

`<button type="button" class="btn btn-success btn-lg">大按钮</button>`

`<button type="button" class="btn btn-success btn-sm">小按钮</button>`

`<button type="button" class="btn btn-success btn-xs">小小按钮</button>`

`显示效果:`

`我们可以设置按钮的两种状态，激活 （active）和 禁用状态（disabled）`

<button type="button" class="btn btn-success">默认状态的按钮</button>
    <button type="button" class="btn btn-success active">激活状态的按钮</button>
    <button type="button" class="btn btn-success disabled">禁用状态的按钮</button>

显示效果：

![70 1][]

[70]: /images/20220530/42e5bfe2e85944b2bfc71774a0b921f2.png
[70 1]: /images/20220530/392cef8f88384ea5a8a639214cdeaa1d.png