BootstrapBootstrap按钮组

前面的话语

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

 

垂直排列

  默认地,按钮组都是程度显得的。但于实际上采用当中,总会遇见垂直显示的效力。在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>

 

相关文章