眼前的说话

  单个按钮在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>

 

主干用法

  按钮组结构异常之简约。使用一个叫也“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>

 

按钮工具栏

  于富贵文本编辑器中,将按钮组分组排列在同,比如说复制、剪切和糊一组;左对伙同、中间对伙同、右对合和两岸对齐一组。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>

 

jQuery垂直排列

  默认地,按钮组都是程度显得的。但在其实使用当中,总会遇到垂直显示的效能。在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>

 

抵分按钮

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

 

相关文章

网站地图xml地图