文章: 阅读:

Bootstrap4 按钮

CSSBootstrap

前言 🔗

  • Bootstrap4 按钮。

1、按钮样式

  • Bootstrap4 提供了不同样式的按钮。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div class="container">
        <button type="button" class="btn">基本按钮</button>
        <button type="button" class="btn btn-primary">主要按钮</button>
        <button type="button" class="btn btn-secondary">次要按钮</button>
        <button type="button" class="btn btn-success">成功</button>
        <button type="button" class="btn btn-info">信息</button>
        <button type="button" class="btn btn-warning">警告</button>
        <button type="button" class="btn btn-danger">危险</button>
        <button type="button" class="btn btn-dark">黑色</button>
        <button type="button" class="btn btn-light">浅色</button>
        <button type="button" class="btn btn-link">链接</button>
    </div>

  • 效果 🔗

1.1 按钮元素

  • 按钮类可用于 <a>, <button>, 或 <input> 元素上:

  • 实例

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

  • 效果 🔗

2、按钮设置边框

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="container">
        <button type="button" class="btn btn-outline-primary">主要按钮</button>
        <button type="button" class="btn btn-outline-secondary">次要按钮</button>
        <button type="button" class="btn btn-outline-success">成功</button>
        <button type="button" class="btn btn-outline-info">信息</button>
        <button type="button" class="btn btn-outline-warning">警告</button>
        <button type="button" class="btn btn-outline-danger">危险</button>
        <button type="button" class="btn btn-outline-dark">黑色</button>
        <button type="button" class="btn btn-outline-light text-dark">浅色</button>
    </div>

  • 效果 🔗

3、不同大小的按钮

  • Bootstrap4 可以设置按钮的大小。

  • 实例

    1
    2
    3
    4
    5
    <div class="container">
        <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>
    </div>

  • 效果 🔗

4、块级按钮

  • 通过添加 .btn-block 类可以设置块级按钮。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="container">
        <button type="button" class="btn btn-primary btn-block">按钮 1</button>
        <button type="button" class="btn btn-default btn-block">按钮 2</button>
      
        <button type="button" class="btn btn-primary btn-lg btn-block">按钮 1</button>
        <button type="button" class="btn btn-default btn-lg btn-block">按钮 2</button>
      
        <button type="button" class="btn btn-primary btn-sm btn-block">按钮 1</button>
        <button type="button" class="btn btn-default btn-sm btn-block">按钮 2</button>
    </div>

  • 效果 🔗

5、激活和禁用的按钮

  • 按钮可设置为激活或者禁止点击的状态。

  • .active 类可以设置按钮是可用的，disabled 属性可以设置按钮是不可点击的。注意 <a> 元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。

  • 实例

    1
    2
    3
    4
    5
    6
    <div class="container">
        <button type="button" class="btn btn-primary">主要按钮</button>
        <button type="button" class="btn btn-primary active">点击后的按钮</button>
        <button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
        <a href="#" class="btn btn-primary disabled">禁止点击的链接</a>
    </div>

  • 效果 🔗

6、按钮组

  • Bootstrap4 中允许我们将按钮放在同一行上。可以在 <div> 元素上添加 .btn-group 类来创建按钮组。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <div class="container">
        <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>
    </div>

  • 效果 🔗

6.1 按钮组的大小

  • 可以使用 .btn-group-lg | xs | sm 类来设置按钮组的大小。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <div class="container">
        <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> <br /><br />
        <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> <br /><br />
        <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>
    </div>

  • 效果 🔗

6.2 垂直按钮组

  • 可以使用 .btn-group-vertical 类来创建垂直的按钮组：

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <div class="container">
        <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>
    </div>

  • 效果 🔗

6.3 内嵌按钮组及下拉菜单

  • 我们可以在按钮组内设置下拉菜单：

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div class="container">
        <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
                </button>
                <div class="dropdown-menu" role="menu">
                    <a class="dropdown-item" href="#">Tablet</a>
                    <a class="dropdown-item" href="#">Smartphone</a>
                </div>
            </div>
        </div>
    </div>

  • 效果 🔗

6.4 拆分按钮下拉菜单

  • 实例

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

  • 效果 🔗

6.5 垂直按钮组及下拉菜单

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div class="container">
        <div class="btn-group-vertical">
            <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
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Tablet</a>
                    <a class="dropdown-item" href="#">Smartphone</a>
                </div>
            </div>
        </div>
    </div>

  • 效果 🔗

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

Qian Chia

Posted @ 2019-11-11 20:09


评论


文章目录
  1. 1. 前言 🔗
  2. 2. 1、按钮样式
    1. 2.1. 1.1 按钮元素
  3. 3. 2、按钮设置边框
  4. 4. 3、不同大小的按钮
  5. 5. 4、块级按钮
  6. 6. 5、激活和禁用的按钮
  7. 7. 6、按钮组
    1. 7.1. 6.1 按钮组的大小
    2. 7.2. 6.2 垂直按钮组
    3. 7.3. 6.3 内嵌按钮组及下拉菜单
    4. 7.4. 6.4 拆分按钮下拉菜单
    5. 7.5. 6.5 垂直按钮组及下拉菜单
隐藏目录