BootStrap 按钮标签及基本样式

在 BootStrap 中，通过按钮标签可以快速地创建按钮并添加预定义的样式，这节将详细介绍 BootStrap 的按钮标签及基本样式。

基本结构

按钮标签的基本结构为：

<button class="btn">Button</button>

其中，.btn 类是必须的，它是 BootStrap 提供的按钮样式的关键类之一。此外，还可以添加其他相关的类来修改按钮的样式。

按钮颜色

BootStrap 提供了多种按钮颜色，可以通过添加不同的样式类来设置不同颜色的按钮。

• 默认按钮：.btn-default
• 主要按钮：.btn-primary
• 成功按钮：.btn-success
• 信息按钮：.btn-info
• 警告按钮：.btn-warning
• 危险按钮：.btn-danger
• 链接按钮：.btn-link

例如，要创建一个主要按钮，可以这样写：

<button class="btn btn-primary">Primary Button</button>

按钮大小

BootStrap 提供了三种按钮大小，可以通过添加不同的样式类来设置不同大小的按钮。

• 大按钮：.btn-lg
• 默认按钮：(无需要添加 .btn 类即可)
• 小按钮：.btn-sm
• 超小按钮：.btn-xs

例如，要创建一个大按钮，可以这样写：

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

按钮带图标

使用 BootStrap，可以很容易地在按钮上添加图标。可以通过添加 glyphicon 类（在 BootStrap 4 中已经被弃用）或者内置的图标类来设置需要的图标。

• 使用 glyphicon 类添加图标（在 BootStrap 4 之前版本中使用）：

<button class="btn btn-primary">
  <span class="glyphicon glyphicon-search"></span> Search
</button>

• 使用内置的图标类添加图标（在 BootStrap 4 中使用）：

<button class="btn btn-primary">
  <span class="fa fa-search"></span> Search
</button>

注意，使用内置的图标类，需要先引入 Font Awesome 的样式文件。

示例

示例一

创建一个复合按钮（warning 和 large 样式结合），并设置图标。

<button class="btn btn-warning btn-lg">
  <span class="fa fa-warning"></span> Danger
</button>

示例二

创建一个链接按钮，并设置图标。

<a href="#" class="btn btn-link">
  <span class="fa fa-external-link"></span> Learn More
</a>

以上就是 BootStrap 按钮标签及基本样式的详细攻略。