技术无忧-Bootstrap4 教程-Bootstrap4 按钮组

Bootstrap4 教程

Bootstrap4 教程简介 Bootstrap4 安装使用 Bootstrap4 网格系统 Bootstrap4 文字排版 Bootstrap4 颜色 Bootstrap4 表格 Bootstrap4 图形形状 Bootstrap4 Jumbotron Bootstrap4 信息提示框 Bootstrap4 按钮 Bootstrap4 按钮组 Bootstrap4 徽章 Bootstrap4 进度条 Bootstrap4 分页 Bootstrap4 列表组 Bootstrap4 卡片 Bootstrap4 下拉菜单 Bootstrap4 折叠 Bootstrap4 导航 Bootstrap4 导航栏 Bootstrap4 面包屑导航 Bootstrap4 表单 Bootstrap4 表单控件 Bootstrap4 输入框组 Bootstrap4 自定义表单 Bootstrap4 轮播 Bootstrap4 模态框 Bootstrap4 提示框 Bootstrap4 弹出框 Bootstrap4 滚动监听 Bootstrap4 小工具 Bootstrap4 Flex布局 Bootstrap4 多媒体对象

Bootstrap4 按钮组

Bootstrap 4 中允许我们将按钮放在同一行上。

可以在 <div> 元素上添加 .btn-group 类来创建按钮组。

                
                    
                        <
                        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 类用于创建按钮组:

提示: 我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。

                
                    
                        <
                        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
                        >

效果：

按钮组大小

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

大按钮:

默认按钮:

小按钮:

垂直按钮组

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

                
                    
                        <
                        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-vertical 类来创建垂直的按钮组：

内嵌按钮组及下拉菜单

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

                
                    
                        <
                        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
                        ">
                    
                    
                              <
                        a 
                        class
                        ="
                        dropdown-item
                        " 
                        href
                        ="
                        #
                        ">
                        Tablet
                        </
                        a
                        >
                    
                    
                              <
                        a 
                        class
                        ="
                        dropdown-item
                        " 
                        href
                        ="
                        #
                        ">
                        Smartphone
                        </
                        a
                        >
                    
                    
                            </
                        div
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                        </
                        div
                        >

效果：

内嵌按钮组

按钮组设置下拉菜单:

拆分按钮下拉菜单

                
                    
                        <
                        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 
                        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
                        >

效果：