Bootstrap按钮组实例详解
发布时间 - 2026-01-11 02:08:37 点击率：次使用方法
按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能
同样地，因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.js之前一定要先加载jquery.js才会产生效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
基本用法
按钮组结构非常的简单。使用一个名为“btn-group”的容器，把多个按钮放到这个容器中
为了向屏幕阅读器的用户传达正确的按钮分组，需要提供一个合适的 role 属性。对于按钮组合，应该是 role="group"，对于toolbar（工具栏）应该是 role="toolbar"
此外，按钮组和工具栏应给定一个明确的label标签，尽管设置了正确的 role 属性，但是大多数辅助技术将不会正确的识读他们。可以使用 aria-label，也可以使用aria-labelledby
除了可以使用<button>元素之外，还可以使用其他标签元素，比如<a>标签。唯一要保证的是：不管使用什么标签，“.btn-group”容器里的标签元素需要带有类名“.btn”
<div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button> </div>
按钮工具栏
在富文本编辑器中，将按钮组分组排列在一起，比如说复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组。Bootstrap框架按钮工具栏也提供了这样的制作方法，只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中
<div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button> </div> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button> </div> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button> </div> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button> </div> </div>
按钮尺寸
在介绍表单按钮的博文中，我们知道按钮是通过btn-lg、btn-sm和btn-xs三个类名来调整padding、font-size、line-height和border-radius属性值来改变按钮大小。那么按钮组的大小，我们也可以通过类似的方法：
.btn-group-lg:大按钮组
.btn-group-sm:小按钮组
.btn-group-xs:超小按钮组
只需要在“.btn-group”类名上追加对应的类名，就可以得到不同大小的按钮组
<div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button> </div> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button> </div>
嵌套分组
很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级
<div class="btn-group"> <button class="btn btn-default" type="button">首页</button> <button class="btn btn-default" type="button">产品展示</button> <button class="btn btn-default" type="button">案例分析</button> <button class="btn btn-default" type="button">联系我们</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们 <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司简介</a></li> <li><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul> </div> </div>
垂直排列
默认地，按钮组都是水平显示的。但在实际运用当中，总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可
<div class="btn-group-vertical"> <button class="btn btn-default" type="button">首页</button> <button class="btn btn-default" type="button">产品展示</button> <button class="btn btn-default" type="button">案例分析</button> <button class="btn btn-default" type="button">联系我们</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司简介</a></li> <li><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul> </div> </div>
等分按钮
等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的100%，而按钮组里面的每个按钮平分整个容器宽度。例如，如果按钮组里面有五个按钮，那么每个按钮是20%的宽度，如果有四个按钮，那么每个按钮是25%宽度，以此类推
等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名
实现原理非常简单，把“btn-group-justified”模拟成表格（display:table），而且把里面的按钮模拟成表格单元格（display:table-cell）
[注意]在制作等分按钮组时，尽量使用<a>标签元素来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
display: table-cell;
float: none;
width: 1%;
}
.btn-group-justified > .btn-group .btn {
width: 100%;
}
在上面的代码中，.btn-group-justified > .btn设置了table-cell，而table-cell是不能设置margin的，而代码中设置了-margin值，用来去除边框，显然不会生效。因此，去除重复边框的代码应该是合并表格边框—— border-collapse: collapse
<div class="btn-group btn-group-justified"> <a class="btn btn-default" href="#">首页</a> <a class="btn btn-default" href="#">产品展示</a> <a class="btn btn-default" href="#">案例分析</a> <a class="btn btn-default" href="#">联系我们</a> </div>
为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中。因为大部分的浏览器不能将CSS 应用到对齐的 <button> 元素上，但是，可以用按钮式下拉菜单来解决这个问题
<div class="btn-group btn-group-justified"> <div class="btn-group" role="group"> <button class="btn btn-default" >首页</button> </div> <div class="btn-group" role="group"> <button class="btn btn-default" >产品展示</button> </div> <div class="btn-group" role="group"> <button class="btn btn-default" >案例分析</button> </div> <div class="btn-group" role="group"> <button class="btn btn-default" >联系我们</button> </div> </div>
以上所述是小编给大家介绍的Bootstrap按钮组实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
# bootstrap
# 按钮组
# BootStrap学习系列之布局组件(下拉
# 按钮组[toolbar]
# 上拉)
# Bootstrap CSS组件之按钮组(btn-group)
# Bootstrap基本组件学习笔记之按钮组(8)
# JS组件Bootstrap按钮组与下拉按钮详解
# Bootstrap按钮组件详解
# 只需
# 产品展示
# 首页
# 案例分析
# 可以使用
# 都是
# 放在
# 客服
# 应该是
# 要在
# 要把
# 关于我们
# 企业文化
# 小编
# 组织结构
# 的是
# 组中
# 组里
# 还可以
# 多个
相关栏目：
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐：
CSS3怎么给轮播图加过渡动画_transition加transform实现【技巧】
如何快速使用云服务器搭建个人网站？
如何在VPS电脑上快速搭建网站？
如何在服务器上配置二级域名建站？
Laravel怎么创建自己的包(Package)_Laravel扩展包开发入门到发布
邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？
Laravel如何使用Seeder填充数据_Laravel模型工厂Factory批量生成测试数据【方法】
html5怎么画眼睛_HT5用Canvas或SVG画眼球瞳孔加JS控制动态【绘制】
如何快速完成中国万网建站详细流程？
Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载
微信小程序 canvas开发实例及注意事项
佐糖AI抠图怎样调整抠图精度_佐糖AI精度调整与放大细化操作【攻略】
Laravel项目怎么部署到Linux_Laravel Nginx配置详解
南京网站制作费用,南京远驱官方网站？
如何在万网自助建站平台快速创建网站？
详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点
5种Android数据存储方式汇总
Laravel Docker环境搭建教程_Laravel Sail使用指南
三星网站视频制作教程下载,三星w23网页如何全屏？
Laravel怎么生成URL_Laravel路由命名与URL生成函数详解
JavaScript如何实现倒计时_时间函数如何精确控制
如何在 Telegram Web View（iOS）中防止键盘遮挡底部输入框
家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？
如何在IIS中新建站点并配置端口与IP地址？
Android okhttputils现在进度显示实例代码
儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册？
如何用VPS主机快速搭建个人网站？
北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？
如何撰写建站申请书？关键要点有哪些？
Python进程池调度策略_任务分发说明【指导】
谷歌Google入口永久地址_Google搜索引擎官网首页永久入口
Laravel集合Collection怎么用_Laravel集合常用函数详解
如何在景安服务器上快速搭建个人网站？
魔毅自助建站系统：模板定制与SEO优化一键生成指南
Laravel怎么实现一对多关联查询_Laravel Eloquent模型关系定义与预加载【实战】
如何快速搭建安全的FTP站点？
Win11怎么恢复误删照片_Win11数据恢复工具使用【推荐】
什么是JavaScript解构赋值_解构赋值有哪些实用技巧
mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？
怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？
Laravel如何配置.env文件管理环境变量_Laravel环境变量使用与安全管理
打开php文件提示内存不足_怎么调整php内存限制【解决方案】
Win11怎么设置虚拟桌面 Win11新建多桌面切换操作【技巧】
Laravel怎么做缓存_Laravel Cache系统提升应用速度的策略与技巧
如何用5美元大硬盘VPS安全高效搭建个人网站？
Android利用动画实现背景逐渐变暗
移动端脚本框架Hammer.js
java获取注册ip实例
哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？
Laravel怎么使用Blade模板引擎_Laravel模板继承与Component组件复用【手册】
下一篇：如何压缩存储Linux日志文件
下一篇：如何压缩存储Linux日志文件