Bootstrap按钮组

骨干用法

  按钮组结构非凡的简要。使用一个名为“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"></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>

 

前面的话

  单个按钮在Web页面中的运用有时候并不可能知足我们的事情需要,经常会看出将三个按钮组合在联名行使,比如富文本编辑器里的一组小图标按钮等。本文将详细介绍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">关于我们 </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>

 

按钮尺寸

  在介绍表单按钮的博文中,我们精晓按钮是经过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框架按钮工具栏也提供了这样的制作方法,只需要将按钮组“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>

 

垂直排列

  默认地,按钮组都是水平显得的。但在实际应用当中,总会赶上垂直突显的职能。在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>

 

接纳模式

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

 

相关文章