您可以在一个按钮组内嵌套另一个按钮组，即，在一个 .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. 阻塞调用ShellExecute函数

    SHELLEXECUTEINFO si;ZeroMemory(&si, sizeof(si));si.cbSize = sizeof(si);si.fMask = SEE_MASK_NOCLO ...

  2. 51nod 1456【强连通，缩点，并查集】

    话说这道题的机遇是看到了http://blog.csdn.net/u010885899/article/details/50611895很有意思:然后就去补了这题 题意: 建最少的边使得给出的点相连. ...

  3. PHP保留小数的相关方法

    结合一下网上的例子 $num = 10.4567; //第一种:利用round()对浮点数进行四舍五入 但是这个如果没有两位小数也不会"两位精度" echo round($num, ...

  4. rpm、yum（转）

    rpm http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/10/08/2203153.html yum http://www.cnblogs ...

  5. Java | 基础归纳 | 随机数应用

    Java中一般有两种随机数,一个是Math中random()方法,一个是Random类. Math.random();//返回0~1的中随机数值 Random random = new Random( ...

  6. 牛客寒假6-G.区间或和

    链接:https://ac.nowcoder.com/acm/contest/332/G 题意: 求a|(a+1)|(a+2)|...|(b-1)|b. 思路: 求a-b的差的每一个二进制位 自己也看 ...

  7. FTP任务(重点看断点续传)

    一.FTP任务目录: 1. 多用户同时登陆:     socketserver 2. 用户登陆,加密认证: md5加密 3. 上传/下载文件,保证文件一致性:md5摘要 4. 传输过程中现实进度条 5 ...

  8. 106 Construct Binary Tree from Inorder and Postorder Traversal 从中序与后序遍历序列构造二叉树

    给定一棵树的中序遍历与后序遍历,依据此构造二叉树.注意:你可以假设树中没有重复的元素.例如,给出中序遍历 = [9,3,15,20,7]后序遍历 = [9,15,7,20,3]返回如下的二叉树:    ...

  9. TreeView显示数据

    1.添加默认节点 private void Form1_Load(object sender, EventArgs e) { TreeNode tn = new TreeNode("默认节点 ...

  10. 将Object转换成Dictionary方法

    如果Object是Dictionary类型,直接返回 如果Object是NameValueCollection类型,则添加到Dictionary里 如果Object是Hashtable类型,添加到Di ...