CSS 样式化 Twitter’s Bootstrap 3.x 按钮

在本文中，我们将介绍如何使用 CSS 来样式化 Twitter’s Bootstrap 3.x 按钮。Bootstrap 是一个流行的开源 CSS 框架，其中包含了许多预定义的样式和组件，能够快速搭建和定制网页。其中，按钮是页面交互中常用的元素之一，这里我们将重点介绍如何通过 CSS 来自定义和改变 Bootstrap 3.x 按钮的样式。

阅读更多：CSS 教程

Button Styles

Bootstrap 3.x 提供了多种按钮样式供选择，例如 primary、secondary、success、info、warning、danger 等等。这些样式定义了按钮的背景色、边框、文本颜色等属性。我们可以通过为按钮元素添加相应的类来使用这些预定义的样式。

示例代码：

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>

Custom Button Styles

如果我们想要自定义按钮的样式，Bootstrap 允许我们通过重写 CSS 类或添加新的 CSS 类来实现。我们可以通过修改按钮的背景色、边框、文本颜色等属性来达到自定义样式的目的。

示例代码：

<style>
  .custom-button {
    background-color: #ff0000;
    color: #ffffff;
    border: 1px solid #ff0000;
  }
</style>

<button class="btn custom-button">Custom Button</button>

在上面的示例中，我们添加了一个名为 custom-button 的 CSS 类，并定义了它的背景色、文本颜色和边框样式。通过将这个自定义的 CSS 类应用到按钮元素，我们实现了一个自定义样式的按钮。

Button Sizes

Bootstrap 3.x 还提供了多个按钮大小供选择。默认情况下，按钮大小为中等（medium）。通过为按钮元素添加不同的类，我们可以实现更小（small）或更大（large）的按钮。

示例代码：

<button class="btn btn-primary btn-sm">Small Button</button>
<button class="btn btn-primary">Medium Button</button>
<button class="btn btn-primary btn-lg">Large Button</button>

在上面的示例中，我们通过为按钮元素添加 btn-sm 和 btn-lg 类来定义不同大小的按钮。

Button States

按钮可能存在多个不同的状态，例如默认状态、按下状态、禁用状态等。Bootstrap 3.x 允许我们通过添加不同的类来定义这些状态，并改变按钮的样式。

示例代码：

<button class="btn btn-primary">Normal Button</button>
<button class="btn btn-primary active">Active Button</button>
<button class="btn btn-primary" disabled>Disabled Button</button>

在上面的示例中，我们通过添加 active 类来定义一个按下状态的按钮，通过添加 disabled 属性来定义一个禁用状态的按钮。

Button Icons

我们还可以在按钮上添加图标，以增强按钮的可视效果。Bootstrap 3.x 提供了一组图标类，我们可以通过在按钮元素中加入这些类来使用这些图标。

示例代码：

<button class="btn btn-primary">
  <i class="glyphicon glyphicon-search"></i> Search
</button>
<button class="btn btn-success">
  <i class="glyphicon glyphicon-ok"></i> Submit
</button>

在上面的示例中，我们使用了名为 glyphicon 的图标类，并结合按钮元素一起使用。通过使用不同的图标类和按钮类，我们可以实现多样化的按钮样式和功能。

总结

通过本文的介绍，我们了解了如何使用 CSS 样式化 Twitter’s Bootstrap 3.x 按钮。我们可以使用预定义的按钮样式，也可以自定义按钮的样式。此外，我们还了解了如何改变按钮的大小、状态和添加图标。通过灵活运用这些按钮样式的知识，我们可以实现各种各样自定义的按钮，并让网页变得更加独特和美观。

希望本文对你学习 CSS 样式化 Bootstrap 3.x 按钮有所帮助！