Bootstrap教程(11)--按钮与按钮组

灰太狼 2022-10-31 04:14 448阅读 1赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 概述
 *  2. 按钮的使用
 *   *  2.1 设置Bootstrap按钮
     *  2.2 调整按钮大小
     *  2.3 调整按钮颜色样式
 *  3. 按钮组的使用
 *   *  3.1 使用按钮组
     *  3.2 调整按钮组的大小
     *  3.3 调整按钮组方向
 *  4. 小结

# 1. 概述 #

按钮可以说是使用频率最高的交互组件之一了，Bootstrap框架对按钮也非常重视，提供了多种样式强化类。同时还提供了按钮组，可以组合使用按钮，更加方便。

# 2. 按钮的使用 #

## 2.1 设置Bootstrap按钮 ##

在Bootstrap框架下，只需要为按钮添加`.btn`类，然后添加`.btn-default`类，即可创建Bootstrap样式的按钮。

注意Bootstrap可以将`<button>`、`<a>`、`<input type="button">`元素转换为统一样式风格的按钮，推荐还是使用`<button>`，更加符合HTML规范。

示例代码：

<button type="button" class="btn btn-default">button按钮</button>
                    <a class="btn btn-default">a按钮</a>
                    <input type="button" class="btn btn-default" value="input按钮">

对应效果：  
![在这里插入图片描述][20210221121313922.png_pic_center]

## 2.2 调整按钮大小 ##

Bootstrap提供了4中按钮大小，通过为按钮添加表示大小的类即可实现，这些类包括`.btn-lg`、`.btn-sm`、`.btn-xs`。

示例代码：

对应效果：  
![在这里插入图片描述][20210221121625896.png_pic_center]

## 2.3 调整按钮颜色样式 ##

Bootstrap还提供了设置按钮颜色样式的类，包括：

*  `btn-default`：白色标准按钮
 *  `btn-primary`：蓝色按钮，表示首选意义
 *  `btn-info`：淡蓝色按钮，表示提示意义
 *  `btn-success`：绿色按钮，表示成功意义
 *  `btn-warning`：黄色按钮，表示警告意义
 *  `btn-danger`：红色按钮，表示危险意义
 *  `btn-link`：样式看起来是一个链接

示例代码：

<button type="button" class="btn btn-default">default</button>
                    <button type="button" class="btn btn-primary">primary</button>
                    <button type="button" class="btn btn-info">info</button>
                    <button type="button" class="btn btn-success">success</button>
                    <button type="button" class="btn btn-warning">warning</button>
                    <button type="button" class="btn btn-danger">danger</button>
                    <button type="button" class="btn btn-link">link</button>

对应效果：  
![在这里插入图片描述][2021022112203231.png_pic_center]

# 3. 按钮组的使用 #

## 3.1 使用按钮组 ##

通过为按钮组添加`.btn-group`类的包围元素，即可设置按钮组。

示例代码：

对应效果：  
![在这里插入图片描述][20210221122349976.png_pic_center]

## 3.2 调整按钮组的大小 ##

可以通过`btn-group-lg`、`btn-group-sm`、`btn-group-xs`类调整按钮组大小。

示例代码：

对应效果：  
![在这里插入图片描述][202102211225217.png_pic_center]

## 3.3 调整按钮组方向 ##

通过设置`btn-group-vertical`类，可以将按钮组转化为垂直方向显示。

示例代码：

对应效果：  
![在这里插入图片描述][2021022112264928.png_pic_center]

# 4. 小结 #

Bootstrap提供的按钮和按钮组风格多样，基本能满足使用需求，后期很多很多前端框架，也是参考了Bootstrap这一经典设计。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[20210221121313922.png_pic_center]: /images/20221024/1cad3fd4615f43a5aa321dcbb177604f.png
[20210221121625896.png_pic_center]: /images/20221024/6008c824d4234ae2919041f5499b060c.png
[2021022112203231.png_pic_center]: /images/20221024/92d5d360df594efeb7c9d159315f1561.png
[20210221122349976.png_pic_center]: /images/20221024/fb6042d2670f4a2cad4e70d3caf905fe.png
[202102211225217.png_pic_center]: /images/20221024/9def66b09e064eb2ab01d3b9c36aaf17.png
[2021022112264928.png_pic_center]: /images/20221024/e510d6b735f643aabe7aba3edc9b20e5.png