按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。你可以通过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. webpack的简单使用

    今天简单的说一下webpack的使用. 打开cmd(也可以用别的看个人爱好) 打开你要创建项目的文件夹: webpack安装: 1.全局安装webpack:$npm install webpack - ...

  2. socket.io中emit和on的用法

    socket.emit('action');表示发送了一个action命令,命令是字符串的,在另一端接收时,可以这么写: socket.on('action',function(){...});soc ...

  3. php 资源

    ThinkPHP http://www.thinkphp.cn/ 小案例 http://www.helloweba.com/php.html Github上的PHP资源汇总大全 http://www. ...

  4. dispatch a action with a timeout

    程序入口文件添加依赖: import { createStore, applyMiddleware } from 'redux' import thunk from 'redux-thunk' // ...

  5. 如何为CriteriaOperator过滤对象转换为lambda表达式，即：linq to xpo的动态where语句

    How to convert the CriteriaOperator to a lambda expression, so, the latter expression can be used in ...

  6. npm相关

    npm list -g --depth 0 : -g 列出所有全局模块,--depth 使列表只列出简略信息,如包名.版本号

  7. web前端网站收藏

    参考 w3school:html,css,js等各种参考 W3schools:较之w3school界面更华丽 webplatform:学习最新的web技术 MDN:mozilla developer ...

  8. 启动受管服务器出现：unable to get file lock, will retry...

    启动受管服务器出现:unable to get file lock, will retry... 解决方法:一.删掉Domain下的*.lok文件1. 删除edit.lok进入到domain_home ...

  9. PHP require class

  10. 【图像】Matlab图像标定工具箱

    参考教程: Matlab工具箱教程  http://www.vision.caltech.edu/bouguetj/calib_doc/ 摄像机模型  http://oliver.zheng.blog ...