Bootstrap 4 按钮大小介绍

Bootstrap是最流行的前端框架之一，其按钮组件功能非常强大，可以轻松地创建丰富多样的按钮，而且非常易于定制。本文将为您介绍Bootstrap 4中的按钮大小，让您可以更好地控制您的按钮组件。

按钮大小分类

Bootstrap 4中提供四种不同的按钮大小，分别是：

• 超大按钮 （extra large）：使用.btn-xl类定义
• 大按钮 （large）：使用.btn-lg类定义
• 普通按钮 （default）：不需定义任何类，即默认大小
• 小按钮 （small）：使用.btn-sm类定义
• 迷你按钮 （mini）：使用.btn-xs类定义

可以根据项目需要，选择合适的大小进行使用。以下代码片段展示了如何使用以上所述按钮大小类定义一个按钮：

<button type="button" class="btn btn-primary btn-xl">
  超大按钮
</button>

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

<button type="button" class="btn btn-danger">
  普通按钮
</button>

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

<button type="button" class="btn btn-info btn-xs">
  迷你按钮
</button>

以上代码将生成五个不同大小的按钮。按钮的颜色可以自行更改，这里使用了不同的颜色以便于区分。

自定义按钮大小

如果以上提供的按钮大小不满足您的项目需求，Bootstrap 4还提供了自定义按钮大小的功能。可以通过以下方式自定义按钮大小：

.btn-custom-size {
  padding: 20px;
  font-size: 30px;
  line-height: 1.33;
}

以上SCSS代码片段将定义一个自定义按钮大小.btn-custom-size类，包含以下样式：

• padding：按钮的内边距，控制按钮的大小
• font-size：按钮的字体大小
• line-height：按钮的行高

可以根据需求修改以上样式，以获得您所需的按钮大小。

结论

至此，本文介绍了Bootstrap 4按钮大小的五种类别。大大小小的按钮会给用户不同的使用体验，合适的大小可以使用户更加舒适地操作页面。在项目开发过程中，需要根据项目需求和UI设计规范来选择合适的按钮大小，以便于信息的传递和功能的实现。