当前位置:首页 > BootStrap > 正文内容
一月14日

时间:2016-01-14 11:14

Bootstrap教程按钮组

0
分类:BootStrap | 评论:0人 | 浏览:83次   
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为。

按钮组中的工具提示和弹出框需要特别的设置

当为 .btn-group 中的元素应用工具提示或弹出框时,必须指定 container: 'body' 选项,这样可以避免不必要的副作用(例如工具提示或弹出框触发时,会让页面元素变宽和/或失去圆角)。

确保设置正确的 role 属性并提供一个 label 标签

为了向使用辅助技术 – 如屏幕阅读器 – 的用户正确传达一正确的按钮分组,需要提供一个合适的 role 属性。对于按钮组合,应该是 role="group",对于toolbar(工具栏)应该是 role="toolbar"

一个例外是按钮组合只包含一个单一的控制元素或一个下拉菜单(比如实际情况<button> 元素组成的两端对齐排列的按钮组 )或下拉菜单。

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

基本实例:

Wrap a series of buttons with .btn in .btn-group.

实例:
  1. <div class="btn-group" role="group" aria-label="...">
  2.   <button type="button" class="btn btn-default">Left</button>
  3.   <button type="button" class="btn btn-default">Middle</button>
  4.   <button type="button" class="btn btn-default">Right</button>
  5. </div>

按钮工具栏:

把一组<div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。

实例:
  1. <div class="btn-toolbar" role="toolbar" aria-label="...">
  2.   <div class="btn-group" role="group" aria-label="...">1</div>
  3.   <div class="btn-group" role="group" aria-label="...">2</div>
  4.   <div class="btn-group" role="group" aria-label="...">3</div>
  5. </div>

按钮大小尺寸:

只要给 .btn-group 加上 .btn-group-* 类,就省去为按钮组中的每个按钮都赋予尺寸类了,如果包含了多个按钮组时也适用。

实例:

  1. <div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
  2. <div class="btn-group" role="group" aria-label="...">...</div>
  3. <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
  4. <div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

嵌套:

您可以在一个按钮组内嵌套另一个按钮组,即,在一个 .btn-group 内嵌套另一个 .btn-group 。当您向让下拉菜单与一系列按钮组合使用时,就会用到这个。

实例:
  1. <div class="btn-group" role="group" aria-label="...">
  2.   <button type="button" class="btn btn-default">1</button>
  3.   <button type="button" class="btn btn-default">2</button>
  4. 
    
  5.   <div class="btn-group" role="group">
  6.     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  7.       Dropdown
  8.       <span class="caret"></span>
  9.     </button>
  10.     <ul class="dropdown-menu">
  11.       <li><a href="#">Dropdown link</a></li>
  12.       <li><a href="#">Dropdown link</a></li>
  13.     </ul>
  14.   </div>
  15. </div>

垂直排列的按钮组:

让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。

实例:
  1. <div class="btn-group-vertical">
  2.   <button type="button" class="btn btn-default">按钮 1</button>
  3.   <button type="button" class="btn btn-default">按钮 2</button>
  4. 
    
  5.   <div class="btn-group-vertical">
  6.     <button type="button" class="btn btn-default dropdown-toggle"
  7.       data-toggle="dropdown">
  8.       下拉
  9.       <span class="caret"></span>
  10.     </button>
  11.     <ul class="dropdown-menu">
  12.       <li><a href="#">下拉链接 1</a></li>
  13.       <li><a href="#">下拉链接 2</a></li>
  14.     </ul>
  15. 	</div>
  16. </div>

两端对齐的按钮组:

为了将<button> 元素用于两端对齐的按钮组中,必须将每个按钮包裹进一个按钮组中you must wrap each button in a button group。大部分的浏览器不能将我们的 CSS 应用到对齐的<button>元素上,但是,由于我们支持按钮式下拉菜单,我们可以解决这个问题。

实例:

  1. <div class="btn-group btn-group-justified" role="group" aria-label="...">
  2.   <div class="btn-group" role="group">
  3.     <button type="button" class="btn btn-default">Left</button>
  4.   </div>
  5.   <div class="btn-group" role="group">
  6.     <button type="button" class="btn btn-default">Middle</button>
  7.   </div>
  8.   <div class="btn-group" role="group">
  9.     <button type="button" class="btn btn-default">Right</button>
  10.   </div>

来源:Dashu.info(微信号/QQ号:43318553),转载请注明出处,谢谢!

  • 评论:(0)
  • 有图有真相

站内搜索

css.php

无觅相关文章插件,快速提升流量