编程 Javascript

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

Bootstrap按钮组实例详解

- Author -

小火柴的蓝色理想

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

xml 与javascript结合的问题解决方法

Mar 24 Javascript

几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()

Jun 02 Javascript

javascript中的注释使用与注意事项小结

Sep 20 Javascript

jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)

Jan 24 Javascript

JavaScript中的console.dir()函数介绍

Dec 29 Javascript

JS+CSS3模拟溢出滚动效果

Aug 12 Javascript

Vue.js一个文件对应一个组件实践

Oct 27 Javascript

vue中简单弹框dialog的实现方法

Feb 26 Javascript

vue、react等单页面项目部署到服务器的方法及vue和react的区别

Sep 29 Javascript

jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())

Oct 10 jQuery

vue实现微信分享链接添加动态参数的方法

Apr 29 Javascript

vue全局使用axios的操作

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