使用Bootstrap美化按钮实例代码（demo）
Bootstrap是一种用于快速构建响应式网页的前端框架。它提供了一系列的CSS样式和JavaScript插件，可以轻松地美化按钮、导航栏、表单等元素。在这篇文章中，我们将重点介绍如何使用Bootstrap美化按钮。
接下来，我们就可以开始使用Bootstrap提供的按钮样式了。Bootstrap为按钮提供了多种样式，包括普通按钮、工具栏按钮、下拉按钮等。下面是一些常用的按钮样式示例。
**普通按钮**：
```html
<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>
```
上面的代码创建了一系列的普通按钮，并设置了不同的样式。这些按钮的样式基本上是根据不同的颜来区分的。我们可以根据不同的需求选择相应的样式。
**工具栏按钮**：
```html
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group" aria-label="第一组">
<button type="button" class="btn btn-secondary">按钮1</button>
<button type="button" class="btn btn-secondary">按钮2</button>
<button type="button" class="btn btn-secondary">按钮3</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="第二组">
<button type="button" class="btn btn-secondary">按钮4</button>
<button type="button" class="btn btn-secondary">按钮5</button>
</div>
<div class="btn-group" role="group" aria-label="第三组">
<button type="button" class="btn btn-secondary">按钮6</button>
</div>
</div>
```
上面的代码创建了一个工具栏，其中包含了三个按钮组。每个按钮组中的按钮将会紧密排列在一起。这种排列方式特别适合用于导航栏或工具栏上的按钮。
**下拉按钮**：
```html
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉按钮
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">选项1</a>
<a class="dropdown-item" href="#">选项2</a>
<a class="dropdown-item" href="#">选项3</a>
</div>
</div>
```
上面的代码创建了一个下拉按钮，点击按钮后将会显示一个下拉菜单，其中包含了三个选项。这种按钮样式特别适合用于带有多个选项的情况。
在添加了以上的代码后，你可能会发现这些按钮已经具有了一些基本的样式。但如果你想要进一步自定义按钮的样式，Bootstrap也提供了一些辅助类，用于更改按钮的尺寸、形状和状态。
**按钮尺寸**：
改变button按钮的形状
```html
<button type="button" class="btn btn-primary btn-lg">大按钮</button>
<button type="button" class="btn btn-primary">默认按钮</button>
<button type="button" class="btn btn-primary btn-sm">小按钮</button>
```
使用```btn-lg```、```btn-sm```和```btn-block```类可以分别将按钮的尺寸设置为大、小或者块级。
**按钮形状**：
```html
<button type="button" class="btn btn-primary">默认按钮</button>
<button type="button" class="btn btn-primary rounded-circle">圆形按钮</button>
<button type="button" class="btn btn-primary rounded-0">直角按钮</button>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。