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>

 

相关文章