Bootstrap按钮组实例详解


Posted in Javascript onJuly 03, 2017

使用方法

按钮组和下拉菜单组件一样,需要依赖于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按钮组实例详解

按钮工具栏

在富文本编辑器中,将按钮组分组排列在一起,比如说复制、剪切和粘贴一组;左对齐、中间对齐、右对齐和两端对齐一组。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>

Bootstrap按钮组实例详解

按钮尺寸

在介绍表单按钮的博文中,我们知道按钮是通过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>

Bootstrap按钮组实例详解

嵌套分组

很多时候,我们常把下拉菜单和普通的按钮组排列在一起,实现类似于导航菜单的效果。使用的时候,只需要把当初制作下拉菜单的“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按钮组实例详解

垂直排列

默认地,按钮组都是水平显示的。但在实际运用当中,总会碰到垂直显示的效果。在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>

Bootstrap按钮组实例详解

等分按钮

等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的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>

Bootstrap按钮组实例详解

为了将 <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按钮组实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js表数据排序 sort table data
Feb 18 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
js读取并解析JSON类型数据的方法
Nov 14 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
javascript刷新父页面方法汇总详解
Oct 10 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 Javascript
详解使用vue实现tab 切换操作
Jul 03 #Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 #jQuery
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 #Javascript
React学习笔记之事件处理(二)
Jul 02 #Javascript
React学习笔记之条件渲染(一)
Jul 02 #Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 #Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 #Javascript
You might like
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
js实现选项卡效果
2020/03/07 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
利用Python读取文件的四种不同方法比对
2017/05/18 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
Structs界面控制层技术
2013/10/11 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
团员的自我评价
2013/12/01 职场文书
库房主管岗位职责
2013/12/31 职场文书
土地租赁意向书
2014/07/30 职场文书
地震慰问信
2015/02/14 职场文书
员工规章制度范本
2015/08/07 职场文书
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL