文章: 阅读:

Bootstrap 按钮

CSSBootstrap

前言 🔗

  • 任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：

  • 以下样式可用于 <a>, <button>, 或 <input> 元素上。

类 描述 备注 🔗
.btn 为按钮添加基本样式 🔗
.btn-default 默认/标准按钮 🔗
.btn-primary 原始按钮样式（未被操作） 🔗
.btn-success 表示成功的动作 🔗
.btn-info 该样式可用于要弹出信息的按钮 🔗
.btn-warning 表示需要谨慎操作的按钮 🔗
.btn-danger 表示一个危险动作的按钮操作 🔗
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为) 🔗
.btn-lg 制作一个大按钮 🔗
.btn-sm 制作一个小按钮 🔗
.btn-xs 制作一个超小按钮 🔗
.btn-block 块级按钮 (拉伸至父元素 100% 的宽度) 🔗
.active 按钮被点击 🔗
.disabled 禁用按钮 🔗
  • 下面演示了上面所有的按钮 class。

1、按钮标签

  • 可以在 <a>、<button> 或 <input> 元素上使用按钮 class。但是建议在 <button> 元素上使用按钮 class，避免跨浏览器的不一致性问题。

  • 实例

    1
    2
    3
    4
    <a class="btn btn-default" href="#" role="button">链接</a>
    <button class="btn btn-default" type="submit">按钮</button>
    <input class="btn btn-default" type="button" value="输入">
    <input class="btn btn-default" type="submit" value="提交">

  • 效果 🔗

2、按钮大小

  • 下表列出了获得各种大小按钮的 class。
类 描述 备注 🔗
.btn-lg 制作一个大按钮 🔗
.btn-sm 制作一个小按钮 🔗
.btn-xs 制作一个超小按钮 🔗
.btn-block 块级按钮 (拉伸至父元素 100% 的宽度) 🔗

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <p>
        <button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
        <button type="button" class="btn btn-default btn-lg">大的按钮</button>
    </p>
    <p>
        <button type="button" class="btn btn-primary">默认大小的原始按钮</button>
        <button type="button" class="btn btn-default">默认大小的按钮</button>
    </p>
    <p>
        <button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>
        <button type="button" class="btn btn-default btn-sm">小的按钮</button>
    </p>
    <p>
        <button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>
        <button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
    </p>
    <p>
        <button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>
        <button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
    </p>

  • 效果 🔗

3、按钮状态

  • Bootstrap 提供了激活、禁用等按钮状态的 class。

3.1 激活状态

  • 按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。

  • 下表列出了让按钮元素和锚元素呈激活状态的 class。

元素 Class
按钮元素 添加 .active class 来显示它是激活的
锚元素 添加 .active class 到 <a> 按钮来显示它是激活的

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <p>
        <button type="button" class="btn btn-default btn-lg ">默认按钮</button>
        <button type="button" class="btn btn-default btn-lg active">激活按钮</button>
    </p>
    <p>
        <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
        <button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>
    </p>

  • 效果 🔗

3.2 禁用状态

  • 当禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。

  • 下表列出了让按钮元素和锚元素呈禁用状态的 class。

元素 Class
按钮元素 添加 disabled 属性 到 <button> 按钮
锚元素 添加 .disabled class 到 <a> 按钮

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <p>
        <button type="button" class="btn btn-default btn-lg">默认按钮</button>
        <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>
    </p>
    <p>
        <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
        <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>
    </p>
    <p>
        <a href="#" class="btn btn-default btn-lg" role="button">链接</a>
        <a href="#" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>
    </p>
    <p>
        <a href="#" class="btn btn-primary btn-lg" role="button">原始链接</a>
        <a href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的原始链接</a>
    </p>

  • 效果 🔗

4、按钮组

  • 在 div 中直接使用 .btn-group 可以创建按钮组。

  • 实例

    1
    2
    3
    4
    5
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>
        <button type="button" class="btn btn-primary">Sony</button>
    </div>

  • 效果 🔗

  • 如果要设置垂直方向的按钮可以通过 .btn-group-vertical 类来设置。

  • 实例

    1
    2
    3
    4
    5
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-primary">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>
        <button type="button" class="btn btn-primary">Sony</button>
    </div>

  • 效果 🔗

  • 使用 .btn-group-lg | sm | xs 来控制按钮组的大小。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <h3>大按钮:</h3>
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-primary">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>
        <button type="button" class="btn btn-primary">Sony</button>
    </div>
    <h3>默认大小按钮:</h3>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>
        <button type="button" class="btn btn-primary">Sony</button>
    </div>
    <h3>小按钮:</h3>
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-primary">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>
        <button type="button" class="btn btn-primary">Sony</button>
    </div>
    <h3>超级小按钮:</h3>
    <div class="btn-group btn-group-xs">
        <button type="button" class="btn btn-primary">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>
        <button type="button" class="btn btn-primary">Sony</button>
    </div>

  • 效果 🔗

4.1 自适应大小的按钮组

  • 可以通过 .btn-group-justified 类来设置自适应大小的按钮组。

  • 以下实例使用 a 标签来展示，

  • 实例

    1
    2
    3
    4
    5
    <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-primary">Apple</a>
        <a href="#" class="btn btn-primary">Samsung</a>
        <a href="#" class="btn btn-primary">Sony</a>
    </div>

  • 效果 🔗

  • 如果是 <button> 元素, 需要在外层使用 .btn-group 类来包裹。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="btn-group btn-group-justified">
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Apple</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Samsung</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Sony</button>
        </div>
    </div>

  • 效果 🔗

4.2 内嵌下拉菜单的按钮组

  • 按钮组内嵌的按钮可以设置下拉菜单。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Apple</button>
        <button type="button" class="btn btn-primary">Samsung</button>

        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Sony <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Tablet</a></li>
                <li><a href="#">Smartphone</a></li>
            </ul>
        </div>
    </div>

  • 效果 🔗

4.2.1 分割按钮

  • 可以将内嵌下拉菜单的按钮组分为两部分。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Sony</button>
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Tablet</a></li>
            <li><a href="#">Smartphone</a></li>
        </ul>
    </div>

  • 效果 🔗

5、Bootstrap 布局组件 按钮组

6、Bootstrap 按钮（Button）插件

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-10 20:08


评论


文章目录
  1. 1. 前言 🔗
  2. 2. 1、按钮标签
  3. 3. 2、按钮大小
  4. 4. 3、按钮状态
    1. 4.1. 3.1 激活状态
    2. 4.2. 3.2 禁用状态
  5. 5. 4、按钮组
    1. 5.1. 4.1 自适应大小的按钮组
    2. 5.2. 4.2 内嵌下拉菜单的按钮组
      1. 5.2.1. 4.2.1 分割按钮
  6. 6. 5、Bootstrap 布局组件 按钮组
  7. 7. 6、Bootstrap 按钮（Button）插件
隐藏目录