按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。你可以通过Bootstrap 按钮（Button） 插件 添加可选的 JavaScript 单选框和复选框样式行为。

下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class：

Class 描述 代码示例
.btn-group 该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。 
<div class="btn-group">

  <button type="button" class="btn btn-default">Button1</button>

   <button type="button" class="btn btn-default">Button2</button>

</div>
.btn-toolbar 该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。 
<div class="btn-toolbar" role="toolbar">

  <div class="btn-group">...</div>

  <div class="btn-group">...</div>

</div>
.btn-group-lg, .btn-group-sm, .btn-group-xs 这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。 
<div class="btn-group btn-group-lg">...</div>

<div class="btn-group btn-group-sm">...</div>

<div class="btn-group btn-group-xs">...</div>
.btn-group-vertical 该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。 
<div class="btn-group-vertical">

  ...

</div>

基本的按钮组

下面的实例演示了上面表格中讨论到的 class .btn-group 的使用：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 基本的按钮组</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<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>

</body>

</html>

结果如下所示：

按钮工具栏

下面的实例演示了上面表格中讨论到的 class .btn-toolbar 的使用：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 按钮工具栏</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<div class="btn-toolbar" role="toolbar">

  <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">

  <button type="button" class="btn btn-default">按钮 4</button>

  <button type="button" class="btn btn-default">按钮 5</button>

  <button type="button" class="btn btn-default">按钮 6</button>

  </div>

  <div class="btn-group">

  <button type="button" class="btn btn-default">按钮 7</button>

  <button type="button" class="btn btn-default">按钮 8</button>

  <button type="button" class="btn btn-default">按钮 9</button>

  </div>

</div>

</body>

</html>

结果如下所示：

按钮的大小

下面的实例演示了上面表格中讨论到的 class .btn-group-* 的使用：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 按钮组的大小</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<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 btn-group-sm">

  <button type="button" class="btn btn-default">按钮 4</button>

  <button type="button" class="btn btn-default">按钮 5</button>

  <button type="button" class="btn btn-default">按钮 6</button>

</div>

  <div class="btn-group btn-group-xs">

  <button type="button" class="btn btn-default">按钮 7</button>

  <button type="button" class="btn btn-default">按钮 8</button>

  <button type="button" class="btn btn-default">按钮 9</button>

</div>

</body>

</html>

结果如下所示：

嵌套

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

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 嵌套的按钮组</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<div class="btn-group">

  <button type="button" class="btn btn-default">按钮 1</button>

  <button type="button" class="btn btn-default">按钮 2</button>

  <div class="btn-group">

    <button type="button" class="btn btn-default dropdown-toggle"

      data-toggle="dropdown">

      下列

      <span class="caret"></span>

    </button>

    <ul class="dropdown-menu">

      <li><a href="#">下拉链接 1</a></li>

      <li><a href="#">下拉链接 2</a></li>

    </ul>

  </div>

</div>

</body>

</html>

结果如下所示：

垂直的按钮组

下面的实例演示了上面表格中讨论到的 class .btn-group-vertical 的使用：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 垂直的按钮组</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<div class="btn-group-vertical">

  <button type="button" class="btn btn-default">按钮 1</button>

  <button type="button" class="btn btn-default">按钮 2</button>

  <div class="btn-group-vertical">

    <button type="button" class="btn btn-default dropdown-toggle"

      data-toggle="dropdown">

      下拉

      <span class="caret"></span>

    </button>

    <ul class="dropdown-menu">

      <li><a href="#">下拉链接 1</a></li>

      <li><a href="#">下拉链接 2</a></li>

    </ul>

  </div>

</div>

</body>

</html>

结果如下所示：

 

Bootstrap<基础十三> 按钮组的更多相关文章

  1. Bootstrap <基础七>按钮

    任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a>, <butto ...

  2. Bootstrap系列 -- 29. 按钮组

    单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等 按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常 ...

  3. Bootstrap3基础 btn-group-vertical 按钮组（横着、竖着排列）

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  4. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  5. Bootstrap <基础二十三>页面标题（Page Header）

    页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距.当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用.如需使用页面标题(Page ...

  6. Bootstrap<基础十五> 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

  7. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  8. Bootstrap <基础三十二>模态框（Modal）插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  9. Bootstrap <基础三十一>插件概览

    在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...

随机推荐

  1. 关于OJ1028的参考解法

    其中运用了最小公倍数与最大公约数乘积等于两数相乘的定理. #include <stdio.h> int main(int argc, char *argv[]) { int a,b,c,d ...

  2. kali/centos 更新 java

    kali 转自:http://blog.sina.com.cn/s/blog_5736d8870102w15u.html 墙内的论坛上和博客上有很多这样的文章了,不过一般过程都很复杂,让人看的头晕眼花 ...

  3. Mifare系列5-存储结构（转）

    文/闫鑫原创转载请注明出处http://blog.csdn.net/yxstars/article/details/38081521 Mifare S50把1K字节的容量分为16个扇区(Sector0 ...

  4. 从C++到GO

    从C++到GO 刚开始接触Go语言,看了两本Go语言的书,从c++开发者的角度来看看go语言的新特性,说下自己感触较深的几点: 并发编程 Go语言层面支持协程,将并发业务逻辑从异步转为同步,大幅提高开 ...

  5. 把excel导入的自定义时间改成yyyyMMdd

    public static String changeCellToString(XSSFCell cell){ String result = "";// Object value ...

  6. 如何把excel 数据做dataprovide

    1.  新建一个类,实现接口Iterator import java.io.FileInputStream; import java.io.FileNotFoundException; import ...

  7. 【网络】IP地址格式转换（htonl、ntohl；inet_addr、inet_ntoa）

    1.htonl ()和ntohl( ) u_long PASCAL FAR ntohl (u_long netlong); u_short PASCAL FAR ntohs (u_short nets ...

  8. 关于unity碰撞检测器的用法

    今天已经是我第三次忘记了这两种碰撞检测的用法,混淆了.特意整理一下 首先把今天要解决涉及到的东西列出来 碰撞方法: public void OnTriggerEnter(Collider other) ...

  9. css table-cell实现图文排列水平对齐

    今天遇到一个样式:图文两列排列. 由于图片大小固定,于是就想到了用table-cell实现. <div class="container"> <div class ...

  10. 浅谈对Js闭包的理解

    理解Js的闭包,首先让我们先看几个概念 执行环境(executive environment)每个函数都有自己的执行环境,匿名函数默认为全局环境. 作用域链(scope chain)子函数继承父函数, ...