Bootstrap 按钮组

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

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

结果如下所示:

垂直的按钮组
【网站声明】本站除付费源码经过测试外,其他素材未做测试,不保证完整性,网站上部分源码仅限学习交流,请勿用于商业用途。如损害你的权益请联系客服QQ:2655101040 给予处理,谢谢支持。

相关文档推荐

自从有了类似Bootstrap这样强大的前端框架之后,无论我们是做静态页面,还是做网站主题,着实方便很多。即便有很多类似的其他国产、海外的前端框架比较,Bootstrap用户量以及功能文
未来的网页设计趋势,我想响应式设计是热门,设计的时候都需要考虑其它设备浏览,比如手机、iPad平板电脑等手持设备。这样虽然加大了设计师和前端人员的工作量,但却有着很好的
免费的响应式Bootstrap模板 - Codester 在线演示 Codester是一个基本的个人作品集Bootstrap模板,帮助设计师,摄影师,图形艺术工作者搭建高度可定制的网站。拥有自定义包和相关的javascrip
1. 简介 Bootstrap 是 Twitter 推出的一个开源的前端框架。 Bootstrap 由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,由动态语言 Less 写成。它是一套易用、优雅、灵活、可扩展的前端工具
这里收集了Bootstrap从V1.0.0版本到现在,整个文档的历史。Bootstrap本身就是一个传奇,而这些文档就是传奇的见证! 最新版本文档 版本 发布日期 2.3.2 May 17, 2013 2.3.1 February 28, 2013 2.3.0 F
Bootstrap 教程 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 本教程将向您讲解 Bootstrap 框架的基础,通过