Bootstrap 组件:按钮组件的使用

简介: Bootstrap 框架

作者:WangMin
格言:努力做好自己喜欢的每一件事

banner.png

通过按钮组容器(.btn-group)把一组按钮放在同一行里。通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为。

注意:

  1. 按钮组中的工具提示和弹出框需要特别的设置。当为.btn-group中的元素应用工具提示或弹出框时,必须指定container: 'body'选项,这样可以避免不必要的副作用(例如工具提示或弹出框触发时,会让页面元素变宽和/或失去圆角)。
  2. 确保设置正确的role属性并提供一个 label 标签。为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组,需要提供一个合适的role属性。对于按钮组合,应该是role="group",对于toolbar(工具栏)应该是role="toolbar"
  3. 此外,按钮组和工具栏应给定一个明确的label标签,尽管设置了正确的role属性,但是大多数辅助技术将不会正确的识读他们。在这里提供的实例中,我们使用aria-label,但是,aria-labelledby也可以使用。

基本实例

在.btn组中用.btn包装一系列按钮。

<div class="btn-group" role="group">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
</div>

1.png


按钮工具栏

我们常常会看到将多个按钮组合在一起使用,那么把一组<div class="btn-group">组合进一个<div class="btn-toolbar">中就可以做成按钮组。

<div class="btn-toolbar" role="toolbar" aria-label="...">
    <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
     </div>
     <div class="btn-group" role="group" aria-label="...">
          <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" role="group" aria-label="...">
           <button type="button" class="btn btn-default">one</button> 
     </div>
</div>

2.png


尺寸(按钮组大小)

只要给.btn-group加上.btn-group-*类,就省去为按钮组中的每个按钮都添加尺寸类了,如果包含了多个按钮组时也适用。按钮组的大小,我们也可以通过以下方法:

.btn-group-lg:大按钮组
.btn-group-sm:小按钮组
.btn-group-xs:超小按钮组

只需要在.btn-group类名上追加对应的类名,就可以得到不同大小的按钮组。

 <div class="btn-group" role="group" aria-label="...">
     <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
 </div>
 <div class="btn-group  btn-group-lg" role="group" aria-label="...">
     <button type="button" class="btn btn-default">Left</button>
     <button type="button" class="btn btn-default">Middle</button>
     <button type="button" class="btn btn-default">Right</button>
 </div>
 <div class="btn-group btn-group-sm" role="group" aria-label="...">
     <button type="button" class="btn btn-default">Left</button>
     <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
 </div>

3.png


下拉菜单组嵌套

想要把下拉菜单混合到一系列按钮中,只须把.btn-group放入另一个.btn-group中。

<div class="btn-group" role="group">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
            <li><a href="##">link</a></li>
            <li><a href="##">link</a></li>
        </ul>
    </div>
</div>

4.png


下拉菜单垂直排列

让一组按钮垂直堆叠排列显示而不是水平排列。在按钮组添加类 .btn-group-vertical

<div class="btn-group" role="group">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
            <li><a href="##">link</a></li>
            <li><a href="##">link</a></li>
        </ul>
    </div>
</div>

5.png


两端对齐排列的按钮组

让一组按钮拉长为相同的尺寸,填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。

注意

  1. 关于边框的处理。由于对两端对齐的按钮组使用了特定的 HTML 和 CSS (即display: table-cell),两个按钮之间的边框叠加在了一起。
  2. IE8 和边框。 IE8不支持在两端对齐的按钮组中绘制边框,无论是<a><button>元素。为了兼容IE8,把每个按钮放入另一个.btn-group中即可。

(1) 关于<a>元素

只须将一系列.btn元素包裹到.btn-group.btn-group-justified中即可。

<div class="btn-group btn-group-justified" role="group" aria-label="...">
    <a type="button" class="btn btn-default">Left</a>
    <a type="button" class="btn btn-default">Middle</a>
    <a type="button" class="btn btn-default">Right</a>
</div>

6.png

如果 a 元素用作按钮在页面功能中触发,而不是链接到其他页面中去,还要给它们添加属性role=“button”。

(2) 关于<button>元素

为了将<button>元素用于两端对齐的按钮组中,必须将每个按钮包裹进一个按钮组中。

<div class="btn-group btn-group-justified" role="group">
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Left</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Milddle</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Right</button>
    </div>
</div>

它的页面效果和 a 元素展示的效果一样。


就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
N..
|
1月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
18 0
|
7月前
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
57 1
|
8月前
|
前端开发 JavaScript 容器
|
8月前
|
前端开发 容器
|
8月前
|
前端开发 容器
|
1月前
|
前端开发
Bootstrap 5 保姆级教程(四):信息提示框 & 按钮
Bootstrap 5 保姆级教程(四):信息提示框 & 按钮
|
1月前
|
前端开发
bootstrap组件的案例代码
bootstrap组件的案例代码
14 0
|
1月前
|
前端开发
bootstrap组件
bootstrap组件
21 0
|
1月前
Bootstrap5 导航组件和面包屑
Bootstrap5 导航组件和面包屑
27 0
|
1月前
|
前端开发 JavaScript 容器
BootStrap 组件和样式
BootStrap 组件和样式
43 0