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

简介: 本文目录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按钮">


对应效果:

image.png2.2 调整按钮大小

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


示例代码:


   <button type="button" class="btn btn-default">默认按钮</button>

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

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

               <button type="button" class="btn btn-default btn-xs">xs按钮</button>


对应效果:

image.png

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>

对应效果:

image.png3. 按钮组的使用

3.1 使用按钮组

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


示例代码:


     <div class="btn-group">

                   <button type="button" class="btn btn-info">篮球</button>

                   <button type="button" class="btn btn-warning">足球</button>

                   <button type="button" class="btn btn-success">乒乓球</button>

               </div>

对应效果:

image.png

3.2 调整按钮组的大小

可以通过btn-group-lgbtn-group-smbtn-group-xs类调整按钮组大小。

示例代码:

      <div class="col-md-12" style="margin-top:8px;">
                <div class="btn-group btn-group-lg">
                    <button type="button" class="btn btn-info">篮球</button>
                    <button type="button" class="btn btn-warning">足球</button>
                    <button type="button" class="btn btn-success">乒乓球</button>
                </div>
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-info">篮球</button>
                    <button type="button" class="btn btn-warning">足球</button>
                    <button type="button" class="btn btn-success">乒乓球</button>
                </div>
                <div class="btn-group btn-group-xs">
                    <button type="button" class="btn btn-info">篮球</button>
                    <button type="button" class="btn btn-warning">足球</button>
                    <button type="button" class="btn btn-success">乒乓球</button>
                </div>
            </div>

对应效果:

image.png

3.3 调整按钮组方向

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


示例代码:


     <div class="btn-group btn-group-vertical">

                   <button type="button" class="btn btn-info">篮球</button>

                   <button type="button" class="btn btn-warning">足球</button>

                   <button type="button" class="btn btn-success">乒乓球</button>

               </div>


对应效果:

image.png

4. 小结

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

相关文章
Bootstrap5 按钮组2
使用 `.btn-group-vertical` 类可以创建垂直排列的按钮组。
Bootstrap5 按钮组5
按钮组可以将多个按钮并列显示在同一行上,
|
1月前
|
前端开发
Bootstrap5 按钮组1
Bootstrap 5 的按钮组功能允许将多个按钮排列在同一行。通过在 `&lt;div&gt;` 元素上添加 `.btn-group` 类来实现。还可以使用 `.btn-group-lg` 或 `.btn-group-sm` 类来调整按钮组的大小。示例代码展示了如何创建不同大小的按钮组。
Bootstrap5 按钮组4
这是一个垂直按钮组示例,包含三个按钮:Apple、Samsung 和 Sony。其中 Sony 按钮是一个下拉菜单,包含 Tablet 和 Smartphone 两个选项。
Bootstrap5 按钮组3
按钮组内嵌下拉菜单示例:包含两个普通按钮(Apple 和 Samsung)和一个带下拉菜单的按钮(Sony),下拉菜单中包含 Tablet 和 Smartphone 两个选项。
Bootstrap5 按钮5
加载按钮示例:通过添加不同的类,可以创建带有加载动画的按钮,包括旋转加载和增长加载效果,同时支持禁用状态。
Bootstrap5 按钮4
按钮组件支持激活和禁用状态。使用 `.active` 类表示按钮处于激活状态,而 `disabled` 属性用于禁用按钮,使其不可点击。对于 `&lt;a&gt;` 标签,由于不支持 `disabled` 属性,可以通过添加 `.disabled` 类来实现相同效果。示例代码展示了如何应用这些类和属性。
Bootstrap5 按钮3
块级按钮通过 `.btn-block` 类实现,通常用于全宽布局。父级元素需添加 `.d-grid` 类。多个块级按钮间可使用 `.gap-*` 类设置间距。
N..
|
7月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
68 0
|
前端开发 容器