Bootstrap 是一种流行的前端框架，它可以减少开发人员在设计和布局网站时的工作量。其中一个很好的功能是可以使用它的内置类轻松地创建美丽的按钮。
准备工作
首先，我们需要将 Bootstrap 框架添加到我们的项目中。你可以从 Bootstrap 官网 下载，并将其链接到你的 HTML 文件中。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------- --------- -------------- ----- ---------------- ------------------------------------------------------------------------------- ------- ------ ------- -------
接下来，我们需要创建一个按钮。我们可以使用 <button> 标签来创建一个按钮，然后为其添加 Bootstrap 类来美化它。
<button class="btn btn-primary">Click me!</button>
现在，我们已经成功地创建了一个简单的蓝色按钮，并用 btn 和 btn-primary 类增加了一些效果。接下来，我们将探索如何使用更多的 Bootstrap 类来创建各种类型的按钮。
不同风格的按钮
除了基本的蓝色按钮之外，Bootstrap 还提供了许多其他样式和颜色的按钮。下面是几个常见的类型：
主按钮
主按钮是最基本的按钮类型。它们通常用于最重要的操作，比如提交表单或进行支付。
<button class="btn btn-primary">Primary button</button>
危险按钮
危险按钮用于提示用户该操作可能会有风险或潜在的负面影响。
<button class="btn btn-danger">Danger button</button>
成功按钮
成功按钮用于表示操作已成功完成。
<button class="btn btn-success">Success button</button>
信息按钮
信息按钮通常用于提供更多信息或说明。
<button class="btn btn-info">Info button</button>
警告按钮
警告按钮用于提醒用户某些内容需要注意或警惕。
<button class="btn btn-warning">Warning button</button>
按钮大小和状态
Bootstrap 还提供了一些其他的类来调整按钮的大小和状态。
大小
通过给按钮添加不同的大小类，我们可以改变按钮的大小。
<button class="btn btn-primary btn-lg">Large button</button> <button class="btn btn-primary">Normal button</button> <button class="btn btn-primary btn-sm">Small button</button> <button class="btn btn-primary btn-xs">Extra small button</button>
状态
在某些情况下，我们需要将按钮设为禁用状态，以防止用户进行某些无效操作。我们还可以将按钮设置为处于活动状态，以表示当前选中的状态。
<button class="btn btn-primary" disabled>Disabled button</button> <button class="btn btn-primary active">Active button</button>
总结
通过使用 Bootstrap 的内置类，我们可以创建各种类型和样式的按钮。无论是基本的蓝色按钮还是更复杂的按钮，Bootstrap 都使创建它们变得非常容易。希望这个例子能够帮助你更好地理解如何使用 Bootstrap 来美化你的网站按钮，从而提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2257