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

    关于shutdown的操作命令在此不做详细叙述 1.WIN+R ,输入cmd即打开cmd命令界面 2.输入shutdown /help,出现下图 这里介绍一个关于shutdown的小应用: 比如我们的 ...

  2. Node.js开发利器

    开发工具 WebStorm,毫无疑问非他莫属,跨平台,强大的代码提示,支持Nodejs调试,此外还支持vi编辑模式,这点我很喜欢. 做些小型项目用Sublime Text. Browserify:将你 ...

  3. provider 设计模式

    相关介绍文章: Provider Model Design Pattern and Specification, Part 1 (old but detailed). The ASP.NET 2.0 ...

  4. Query Designer：公式冲突

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  5. contos7 安装netcore 和vscode

    安装netcore 参考 http://www.cnblogs.com/hohoa/p/5691071.html 1 在root下新建一个文件夹"dotnet"用来放SDK,然后用 ...

  6. （译）关于async与await的FAQ

    传送门:异步编程系列目录…… 环境:VS2012(尽管System.Threading.Tasks在.net4.0就引入,在.net4.5中为其增加了更丰富的API及性能提升,另外关键字”async” ...

  7. （原创）Linux跟Window共享文件的两个简单方法

    第一中种方法: Linux中启动shell,输入如下命令: mount -t cifs -o username="my-pc-name",password="my-pas ...

  8. 输入事件驱动---evdev_handler的大致实现流程（修整版）

    一.input输入子系统框架 下 图是input输入子系统框架,输入子系统由输入子系统核心层(input core),驱动层和事件处理层(Event Handler)三部分组成.一个输入事件,比如滑动 ...

  9. Java链接MySQL练习题：格式化日期、性别；避免代码注入

    一.查询人员名单,按序号 姓名 性格(男或女) 民族(某族) 生日(年月日)输出 import java.sql.*; import java.text.SimpleDateFormat; publi ...

  10. string 常量池的理解

    1: String a="123"; String b="12"+"3"; String c="1"+"23& ...