BootStrap3 按钮组系列

最新推荐文章于 2024-03-17 18:01:57 发布
最新推荐文章于 2024-03-17 18:01:57 发布
阅读量173 收藏
点赞数
分类专栏： BootStrap3 文章标签： bootstrap3 按钮组 btn-group
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32617703/article/details/103206535
版权

目录

官方地址

https://v3.bootcss.com/components/#btn-groups

说明

当为按钮组中的元素添加工具提示组件或者弹出框组件，必须指定container: 'body'

按钮组

.btn-group

<!-- 按钮组 -->
<div class="container">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
    </div>
</div>

按钮工具栏

.btn-toolbar

<!-- 按钮工具栏 -->
<div class="container">
    <div class="btn-toolbar">
        <div class="btn-group">
            <button type="button" class="btn btn-default">Default</button>
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-success">Success</button>
        </div>

        <div class="btn-group">
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-danger">Danger</button>
        </div>
    </div>
</div>

尺寸

  • .btn-group-lg
  • .btn-group-sm
  • .btn-group-xs
<!-- 尺寸 -->
<div class="container">
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
    </div>
</div>

<div class="container">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
    </div>
</div>

<div class="container">
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
    </div>
</div>

<div class="container">
    <div class="btn-group btn-group-xs">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
    </div>
</div>

带下拉菜单的按钮组

<!-- 带下拉菜单的按钮组 -->
<div class="container">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-default">Default</button>
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li>
                    <a href="#">菜单项1</a>
                </li>
                <li>
                    <a href="#">菜单项2</a>
                </li>
                <li>
                    <a href="#">菜单项3</a>
                </li>
            </ul>
        </div>
    </div>
</div>

向上弹出菜单项

<!-- 向上弹出菜单项 -->
<div class="container">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-default">Default</button>
        <div class="btn-group dropup">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li>
                    <a href="#">菜单项1</a>
                </li>
                <li>
                    <a href="#">菜单项2</a>
                </li>
                <li>
                    <a href="#">菜单项3</a>
                </li>
            </ul>
        </div>
    </div>
</div>

垂直排列

.btn-group-vertical

<!-- 垂直排列 -->
<!-- 分列式按钮下拉菜单不适用 -->
<div class="container">
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-default">Default</button>
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li>
                    <a href="#">菜单项1</a>
                </li>
                <li>
                    <a href="#">菜单项2</a>
                </li>
                <li>
                    <a href="#">菜单项3</a>
                </li>
            </ul>
        </div>
    </div>
</div>

两端对齐

button形式

<!-- 两端对齐排列 -->
<!-- button形式的按钮，每一个必须套在btn-group里面 -->
<div class="container">
    <div class="btn-group btn-group-justified">
        <div class="btn-group">
            <button type="button" class="btn btn-default">Default</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">Default</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>

a形式

<!-- a形式的按钮，直接写即可 -->
<div class="container">
    <div class="btn-group btn-group-justified">
        <a role="button" class="btn btn-default">Default</a>
        <a role="button" class="btn btn-default">Default</a>
        <a role="button" class="btn btn-default">Default</a>
    </div>
</div>

整体代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>27按钮组</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body class="">

<pre class="pre-scrollable">


</pre>

<!-- 按钮组 -->
<div class="container">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
    </div>
</div>

<!-- 按钮工具栏 -->
<div class="container">
    <div class="btn-toolbar">
        <div class="btn-group">
            <button type="button" class="btn btn-default">Default</button>
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-success">Success</button>
        </div>

        <div class="btn-group">
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-danger">Danger</button>
        </div>
    </div>
</div>

<!-- 尺寸 -->
<div class="container">
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
    </div>
</div>

<div class="container">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
    </div>
</div>

<div class="container">
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
    </div>
</div>

<div class="container">
    <div class="btn-group btn-group-xs">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
    </div>
</div>


<!-- 带下拉菜单的按钮组 -->
<div class="container">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-default">Default</button>
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li>
                    <a href="#">菜单项1</a>
                </li>
                <li>
                    <a href="#">菜单项2</a>
                </li>
                <li>
                    <a href="#">菜单项3</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- 向上弹出菜单项 -->
<div class="container">
    <div class="btn-group">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-default">Default</button>
        <div class="btn-group dropup">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li>
                    <a href="#">菜单项1</a>
                </li>
                <li>
                    <a href="#">菜单项2</a>
                </li>
                <li>
                    <a href="#">菜单项3</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- 垂直排列 -->
<!-- 分列式按钮下拉菜单不适用 -->
<div class="container">
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-default">Default</button>
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li>
                    <a href="#">菜单项1</a>
                </li>
                <li>
                    <a href="#">菜单项2</a>
                </li>
                <li>
                    <a href="#">菜单项3</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- 两端对齐排列 -->
<!-- button形式的按钮，每一个必须套在btn-group里面 -->
<div class="container">
    <div class="btn-group btn-group-justified">
        <div class="btn-group">
            <button type="button" class="btn btn-default">Default</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">Default</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>

<!-- a形式的按钮，直接写即可 -->
<div class="container">
    <div class="btn-group btn-group-justified">
        <a role="button" class="btn btn-default">Default</a>
        <a role="button" class="btn btn-default">Default</a>
        <a role="button" class="btn btn-default">Default</a>
    </div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
爱喝水的qdy
关注
专栏目录
Bootstrap3系列：按钮组
weixin_34309543的博客
09-04 81
1. 基本实例 1.1 示例代码 &lt;div class="btn-group"&gt; &lt;button type="button" class="btn btn-default"&gt;Left&lt;/button&gt; &lt;button type="button" class="btn btn-default&qu
BootStrap3 按钮系列
爱喝水的qdy的博客
11-18 537
目录官方地址基类可作为按钮的元素尺寸情境样式激活状态禁用状态整体代码 官方地址 https://v3.bootcss.com/css/#buttons-options 基类 .btn 可作为按钮的元素 <a class="" role="button" href=""></a> <button class="" type="button"></butto...
Bootstrap3--全局CSS之按钮
吴声子夜歌的博客
11-22 415
按钮 为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。 <a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" ...
Bootstrap3 按钮改进之个人学习笔记
逆水行舟，不进则退
07-01 658
Bootstrap3 按钮标签（空格分隔）： Bootstrap改进之前的按钮让它变得更加智能效果图：
Bootstrap03之表单，按钮，图片，辅助类，响应式工具
weixin_60786293的博客
05-03 708
表单 class=”form-control”：可以给<input>、<textarea>、<select>元素设置宽度为100% 示例代码： <form action="" method=""> <label>用户名:</label> <input type="text" class="form-control" /> </form> 之前我们写在文本框前面写用户名 一直都是直接写字，在实际开发中
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
08-31
本篇文章将详细讲解BootStrap中的下拉组件、按钮组（toolbar）以及上拉组件。 1. **下拉组件（Dropdowns）** 下拉菜单在网页设计中广泛用于提供多个选项，而无需占用大量空间。BootStrap的下拉组件通过简单的HTML...
Bootstrap CSS组件之按钮组(btn-group)
08-31
在Bootstrap中，按钮组（btn-group）是一个重要的CSS组件，用于将一系列按钮组合在一起，形成一个整体的视觉单元，增强了界面的可操作性和美观度。 按钮组（.btn-group）允许你创建一组相邻的按钮，这些按钮会一起...
Bootstrap按钮下拉菜单组件详解
09-02
Bootstrap按钮下拉菜单组件是网页设计中常用的交互元素，它为用户提供了一种高效的方式来展示多个相关的操作选项。这个组件基于Bootstrap框架，一个流行的前端开发工具包，它简化了网页的布局和样式设计。在...
Bootstrap CSS组件之按钮下拉菜单
08-31
本文将深入探讨Bootstrap按钮下拉菜单的实现方式、特点以及不同类型的用法。 首先，按钮下拉菜单的基础构建依赖于Bootstrap的类名，主要包括`.btn-group`、`.btn`、`.dropdown`、`.dropdown-toggle`和`.dropdown-...
15.Bootstrap按钮组.rar
08-02
这个"15.Bootstrap按钮组.rar"文件很可能包含了关于如何在Bootstrap中使用按钮组的相关教程或资源。Bootstrap的按钮组允许我们将多个按钮组织在一起，形成一个整体，提供了更好的交互体验。 在Bootstrap中，按钮组...
ttkbootstrap界面美化系列之按钮Button(三)
最新发布
ftzchina的博客
03-17 2426
本文详细介绍了ttkbootstrap中按钮的创建，主题设置，状态设置，样式设置，一文教你熟练掌握ttkbootstrap中按钮的使用
Bootstrap创建按钮组
歪脖先生的博客
05-14 386
按钮组 在实际应用中，单个按钮有时候并不能满足我们的业务需求，常常需要将多个按钮组合在一起使用，形成一个页面组件，比如富文本编辑器中的一组小图标按钮等。 创建按钮组 要创建按钮组，只需把相关的链接或按钮放在一个类为 .btn-group 的容器中即可。按钮可以使用 <button> 元素，也可以使用 <a> 元素，显示效果是一样的。如： <divclass=...
Bootstrap按钮组嵌套
歪脖先生的博客
05-14 730
按钮组嵌套 按钮组允许嵌套，即可以在一个.btn-group中嵌套另一个.btn-group。比如，当你想给按钮组中的某一个按钮添加下拉菜单时，就会用到这种嵌套结构。如： <divclass="btn-group"role="group"aria-label="..."> <buttontype="button"class="btn btn-default"&...
bootstrap组件--笔记（2）
Yi_xuan_sky的博客
09-02 299
        图标：&lt;span class="glyphicon glyphicon-search" aria-hidden="true"&gt;&lt;span&gt;                 图标类只能应用在不包含任何文本内容或子元素的元素上。                 也可以用来当成按钮文本：&lt;button&gt;&lt;span class="glyphic...
Bootstrap3 按钮状态切换
歪脖先生的博客
06-01 4298
按钮状态切换 将单个按钮的 data-toggle 属性设置 button，或通过简单的JavaScript编程，就可以激活按钮的行为状态，让它在未激活和激活状态之间来回切换。如： <buttonclass="btn btn-primary"data-toggle="button"autocomplete="off">Single Toggle</button> ...
Bootstrap 基本样式-按钮
热门推荐
litengbin的博客
01-19 2万+
按钮样式 可以用于  按钮元素  超链元素  按钮类型的input元素   提交类型的input元素   重置类型的input元素 原始样式按钮 把button标签变成了平面的，一般不使用 原始样式按钮默认按钮 无色按钮 默认按钮提交按钮 用于提交数据 提交按钮成功按钮 一般用于
bootstrap框架下 单选按钮组的选中以及取值问题
weixin_30819163的博客
05-18 4781
1、业务功能：四个按钮只能选中一个，且默认选择水准4 先看代码。 <div class="btn-group" data-toggle="buttons"> <label class="btn btn-info"> <input type="radio" class="level_select" name="level...
Bootstrap3 按钮状态提示
歪脖先生的博客
06-01 1273
按钮 Bootstrap中的按钮插件（button.js）被赋予多种功能，如为工具条之类的组件赋予状态提示功能、状态切换功能、或者按钮组的功能。 在页面多次加载之间，Firefox 仍然保持表单控件的状态（禁用状态和选择状态）。一个解决办法是为按钮设置 autocomplete="off"属性。 状态提示 通过自定义属性和简单的JavaScript编程，就可以让按钮具有状态提示功能。比如，...
BootDo框架中使用bootstrap设置多个按钮的下拉按钮
shunzi1046的博客
06-21 1278
直接进入对应的列表页面的js： { title: '操作', field: 'id', align: 'left', formatter: function (value, row, index) { var a = '&amp;lt;a href=&quot;#&quot; mce_href=&quot;#&quot; ' + ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值