Bootstrap按钮组的实例详解-html教程-PHP中文网

Bootstrap按钮组的实例详解

零下一度

发布： 2017-07-03 11:40:29

原创

1264人浏览过

前面的话

　　单个按钮在web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。本文将详细介绍bootstrap按钮组

使用方法

　　按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能

　　同样地，因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.js之前一定要先加载jquery.js才会产生效果

nbsp;html&gt;<meta><title>Document</title><link><script></script><script></script>

登录后复制

基本用法

　　按钮组结构非常的简单。使用一个名为“btn-group”的容器，把多个按钮放到这个容器中

　　为了向屏幕阅读器的用户传达正确的按钮分组，需要提供一个合适的 role 属性。对于按钮组合，应该是 role="group"，对于toolbar（工具栏）应该是 role="toolbar"

　　此外，按钮组和工具栏应给定一个明确的label标签，尽管设置了正确的 role 属性，但是大多数辅助技术将不会正确的识读他们。可以使用 aria-label，也可以使用aria-labelledby

　　除了可以使用

<div>
<button><span></span></button><button><span></span></button><button><span></span></button><button><span></span></button><button><span></span></button><button><span></span></button><button><span></span></button><button><span></span></button><button><span></span></button>
</div>

登录后复制

按钮工具栏

　　在富文本编辑器中，将按钮组分组排列在一起，比如说复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组。Bootstrap框架按钮工具栏也提供了这样的制作方法，只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中

<div>
  <div>
<button><span></span></button><button><span></span></button><button><span></span></button><button><span></span></button>
  </div>
  <div>
<button><span></span></button><button><span></span></button>
  </div>
  <div>
<button><span></span></button><button><span></span></button><button><span></span></button>
  </div>
  <div>
<button><span></span></button><button><span></span></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>
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div><div>
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div><div>
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div><div>
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>

登录后复制

嵌套分组

　　很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级

<div>
  <button>首页</button>
  <button>产品展示</button>
  <button>案例分析</button>
  <button>联系我们</button>
  <div>  <button>关于我们 <span></span></button><ul>
<li><a>公司简介</a></li>
<li><a>企业文化</a></li>
<li><a>组织结构</a></li>
<li><a>客服服务</a></li>
</ul>
  </div>
</div>

登录后复制

垂直排列

　　默认地，按钮组都是水平显示的。但在实际运用当中，总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可

<div>
  <button>首页</button>
  <button>产品展示</button>
  <button>案例分析</button>
  <button>联系我们</button>
  <div>  <button>关于我们<span></span></button><ul>
<li><a>公司简介</a></li>
<li><a>企业文化</a></li>
<li><a>组织结构</a></li>
<li><a>客服服务</a></li>
</ul>
  </div>
</div>

登录后复制

等分按钮

　　等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的100%，而按钮组里面的每个按钮平分整个容器宽度。例如，如果按钮组里面有五个按钮，那么每个按钮是20%的宽度，如果有四个按钮，那么每个按钮是25%宽度，以此类推

　　等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名

　　实现原理非常简单，把“btn-group-justified”模拟成表格（display:table），而且把里面的按钮模拟成表格单元格（display:table-cell）

　　[注意]在制作等分按钮组时，尽量使用标签元素来制作按钮，因为使用

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}.btn-group-justified &gt; .btn,
.btn-group-justified &gt; .btn-group {
  display: table-cell;
  float: none;
  width: 1%;
}.btn-group-justified &gt; .btn-group .btn {
  width: 100%;
}

登录后复制

　　在上面的代码中，.btn-group-justified > .btn设置了table-cell，而table-cell是不能设置margin的，而代码中设置了-margin值，用来去除边框，显然不会生效。因此，去除重复边框的代码应该是合并表格边框—— border-collapse: collapse

<div>
<a>首页</a><a>产品展示</a><a>案例分析</a><a>联系我们</a>
</div>

登录后复制

　　为了将 <button></button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中。因为大部分的浏览器不能将CSS 应用到对齐的 <button></button> 元素上，但是，可以用按钮式下拉菜单来解决这个问题

<div>
<div><button>首页</button></div>    <div><button>产品展示</button></div>    <div><button>案例分析</button></div>    <div><button>联系我们</button></div>    </div>

登录后复制

以上就是Bootstrap按钮组的实例详解的详细内容，更多请关注php中文网其它相关文章！