Bootstrap 4 按钮

介绍

Bootstrap是一个开源的前端框架，提供了一系列有用的工具，让开发者可以快速地创建漂亮、响应式和功能丰富的网站。Bootstrap 4是Bootstrap最新版本，其中的按钮组件提供了不同的样式和功能，可以轻松地创建各种类型的按钮。

样式

按钮组件提供了多种样式，包括基础样式、轮廓样式、链接样式、大小样式、状态样式等等。

基础样式

基础样式表示普通的按钮，是最常用的样式。

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>

效果如下：

Primary Secondary Success Danger Warning Info Light Dark Link

轮廓样式

轮廓样式表示没有背景颜色的按钮。

<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-light">Light</button>
<button class="btn btn-outline-dark">Dark</button>

效果如下：

Primary Secondary Success Danger Warning Info Light Dark

链接样式

链接样式表示按钮的外观类似于链接。

<a class="btn btn-primary" href="#" role="button">Primary link</a>
<a class="btn btn-secondary" href="#" role="button">Secondary link</a>
<a class="btn btn-success" href="#" role="button">Success link</a>
<a class="btn btn-danger" href="#" role="button">Danger link</a>
<a class="btn btn-warning" href="#" role="button">Warning link</a>
<a class="btn btn-info" href="#" role="button">Info link</a>
<a class="btn btn-light" href="#" role="button">Light link</a>
<a class="btn btn-dark" href="#" role="button">Dark link</a>

效果如下：

Primary link Secondary link Success link Danger link Warning link Info link Light link Dark link

大小样式

大小样式表示不同大小的按钮。

<button class="btn btn-primary btn-lg">Large button</button>
<button class="btn btn-primary">Default button</button>
<button class="btn btn-primary btn-sm">Small button</button>
<button class="btn btn-primary btn-block">Block level button</button>

效果如下：

Large button Default button Small button Block level button

状态样式

状态样式表示不同的按钮状态。

<button class="btn btn-primary" type="button" disabled>Primary button</button>
<button class="btn btn-primary" type="button" data-loading-text="Loading...">Loading state</button>
<button class="btn btn-primary active" type="button">Active state</button>
<button class="btn btn-primary" type="button">Default state</button>

效果如下：

Primary button Loading state Active state Default state

结论

Bootstrap 4的按钮组件提供了多种样式，可以灵活地创建不同类型的按钮，并且使用起来也非常方便。