Bootstrap按钮组

前边的话

  单个按钮在Web页面中的运用有时候并无法满足大家的事情须要,日常会看出将几个按钮组合在协同行使,比如富文本编辑器里的一组小图标按钮等。本文将详细介绍Bootstrap按钮组

 

应用办法

  按钮组和下拉菜单组件一样,须要重视于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>

 

宗旨用法

  按钮组结构极度的简易。使用3个名为“btn-group”的器皿,把多个按钮放到那些容器中

  为了向显示器阅读器的用户传达正确的按钮分组,供给提供二个相宜的 role 属性。对于按钮组合,应该是 role="group",对于toolbar(工具栏)应该是 role="toolbar"

  其它,按钮组和工具栏应给定2个斐然的label标签,纵然设置了不利的 role 属性,可是大部分扶植技术将不会正确的识读他们。能够利用 aria-label,也足以行使aria-labelledby

  除了能够使用<button>成分之外,还足以应用其余标签成分,比如<a>标签。唯一要力保的是:不管选用什么标签,“.btn-group”容器里的价签成分供给带有类名“.btn”

<div class="btn-group">
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
</div>

 

按钮工具栏

  在富文本编辑器中,将按钮组分组排列在一块儿,比如说复制、剪切和粘贴一组;左对齐、中间对齐、右对齐和双边对齐一组。Bootstrap框架按钮工具栏也提供了如此的制作方法,只须求将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中

<div class="btn-toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"></button>
    <button type="button" class="btn btn-default"></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">关于我们 </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">关于我们</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>

 

等分按钮

  等分按钮的法力在活动端上专门的实用。整个按钮组宽度是容器的百分百,而按钮组里面包车型地铁各类按钮平分整个容器宽度。例如,假诺按钮组里面有几个按钮,那么每一种按钮是五分一的宽度,假诺有多个按钮,那么各类按钮是四分一上升幅度,以此类推

  等分按钮也常被称作是自适应分组按钮,其达成格局也分外的总结,只须求在按钮组“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> 成分用于两端对齐的按钮组中,必须将各种按钮包裹进3个按钮组中。因为超过四分之二的浏览器不能将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>

 

相关文章