Bootstrap 的自定义按钮

Bootstrap 是一款优秀的前端框架，提供了许多组件方便开发。其中，按钮组件是使用最为广泛的一个组件。Bootstrap 的按钮组件提供了多种样式和大小，但是有时候我们需要自己定义按钮样式来满足项目需求。这篇文章将介绍 Bootstrap 的自定义按钮。

基本模板

在开始自定义按钮之前，我们先来看一下 Bootstrap 默认按钮的基本模板。

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

上面是 Bootstrap 可以提供的按钮样式。我们可以通过添加不同的 class 来实现不同的样式。

自定义样式

按钮颜色

我们可以使用 CSS 来自定义按钮的颜色，可以直接修改按钮的背景颜色和文字颜色，如下：

<button type="button" class="btn" style="background-color: green; color: white;">Green</button>
<button type="button" class="btn" style="background-color: orange; color: white;">Orange</button>
<button type="button" class="btn" style="background-color: purple; color: white;">Purple</button>

按钮大小

我们还可以自定义按钮的大小，可以通过修改按钮 font-size 和 padding 来实现，如下：

<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-lg">Large</button>

按钮形状

我们也可以自定义按钮的形状，可以通过 CSS 修改 border-radius 来实现，如下：

<button type="button" class="btn btn-primary rounded-0">No Border Radius</button>
<button type="button" class="btn btn-primary rounded">Default Border Radius</button>
<button type="button" class="btn btn-primary rounded-pill">Pill Shape</button>

以上是 Bootstrap 的自定义按钮的基本知识，会开发者可以通过上述方式自定义按钮样式，满足项目需求。

参考文献

• Bootstrap Button Docs