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

实例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：嵌套的按钮组</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />

</head>
<body>
<div class="container">
<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>
<button type="button" class="btn btn-default">按钮4</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" role="menu">
<li><a href="#">下拉链接1</a></li>
<li><a href="#">下拉链接2</a></li>
<li><a href="#">下拉链接3</a></li>
</ul>
</div>
</div>
</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap 按钮组的嵌套的更多相关文章

  1. BootStrap 按钮组简单介绍

    学会按钮组需要掌握以下几个类. btn   btn-group btn-toolbar  btn-group-vertical   和 下拉菜单的基本类 dropdown-toggle dropdow ...

  2. Bootstrap按钮组学习

    简介 通过按钮组容器把一组按钮放在同一行里.通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为. 按钮组中的工具提示和弹出框需要特别的设置 当为 .btn-group 中的元素应用工具提示或 ...

  3. bootstrap按钮组

    种类 -a,   input ,   button 块级 btn-block 按钮组 btn-group btn-group-justified btn-group-vertical </div ...

  4. Bootstrap按钮组 按钮工具栏 嵌套

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

  5. Bootstrap 按钮组

    连在一起的按钮:.btn-group <div class="btn-group" role="group"> <button class=& ...

  6. Bootstrap<基础十三> 按钮组

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

  7. Bootstrap 字体图标、下拉菜单、按钮组

    Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...

  8. Bootstrap-CL：按钮组

    ylbtech-Bootstrap-CL:按钮组 1.返回顶部 1. Bootstrap 按钮组 按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.您可以通过 Boot ...

  9. BootStrap学习(2)_下拉菜单&按钮组

    一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...

随机推荐

  1. POJ3020【二分匹配】

    思路: ---说给自己 一开始想的是从1-h*w标记整幅图,建图是星号和 {他,与他相连的星号} 建边,肯定要去匹配"*"啊,所以空格一定不会去造,然后就理解成了最小点覆盖,然而对 ...

  2. LightOJ 1022 【读题】

    求阴影面积: 犯了两个错误,漏看了两个条件. 第一个wa:题面中PI说要取pi = 2 * acos (0.0) 第二个wa: For example, add 10-9 to your result ...

  3. MySql 长时间读数据发生超时的异常 Mysql Reader Exception TimeOut expired

    mysql connector: .net var r = cmd.ExecuteReader() r.Reader()   // <--长时间不停调用 Timeout expired.  Th ...

  4. Yac - PHP扩展

    1:首先你要安装Git [root@localhost]# git clone https://github.com/laruence/yac 2:进入yac目录进行配置 [root@localhos ...

  5. python之内置函数(lambda,sorted,filter,map),递归,二分法

    一.lambda匿名函数 为了解决一些简单需求而设计的一句话函数,lambda表示的是匿名函数,不需要用def来声明,一句话就可以声明出一个函数. 语法: 函数名 = lambda 参数 : 返回值 ...

  6. python入门之三元运算，存址方式，深浅拷贝

    三元运算 格式: name = 值1 if 条件 else 值2 如果条件为True,那么将值1赋值给name,条件为False,那么将值2赋值给name 存址方式 不同的数据类型在内存中的存址方式不 ...

  7. Codeigniter CI 框架的一些优化思考

    前段时间使用CI做了两个小项目,对CI的流程和设计理念也有了一些新的认识.CI架构的一些基本优化这里就不做介绍了,如搬离system 文件夹等. 最近有一个稍微大一点的系统,也准备拿CI来做.设计时遇 ...

  8. asp.net中，跳转页面的几种方式

    js方式的页面跳转1.window.location.href方式    <script language="javascript" type="text/java ...

  9. vuex2 10分钟快速入门

    因为太简单了,我直接就贴代码了~ #建立store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex) export de ...

  10. IDEA JavaSE环境配置

    需指定JDK路径: File -> Project Structure -> Project -> Project SDK -> New -> 选择JDK所在的根目录