您可以在一个按钮组内嵌套另一个按钮组，即，在一个 .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. CodeForces 623B【预处理+DP】

    题意: 给出n,a,b以及n个整数a1,a2-an, 可以对数组进行以下两种操作: (1)花费len*a的代价删除连续的len个数,len<|S| (2)花费b的代价将某一个a[i]加一或减一, ...

  2. Unity AnimatorController注意事项

    通过assetbundle加载的单独打包AnimatorController使用下面方法赋值 Go.GetComponent<Animator>().runtimeAnimatorCont ...

  3. Unity3D研究院之IOS Android支持中文与本地文件的读取写

       前几天有个朋友问我为什么在IOS平台中可以正常的读写文件可是在Android平台中就无法正常的读写.当时因为在上班所以我没时间来帮他解决,晚上回家后我就拿起安卓手机真机调试很快就定位问题所在,原 ...

  4. Tyvj1474 打鼹鼠

    Description 在这个“打鼹鼠”的游戏中,鼹鼠会不时地从洞中钻出来,不过不会从洞口钻进去(鼹鼠真胆大……).洞口都在一个大小为n(n<=1024)的正方形中.这个正方形在一个平面直角坐标 ...

  5. web项目数据存入mysql数据库中文乱码问题

    刚开始怀疑是项目中编码设置问题,发现在web.xml中已经有过设置:后来dubug显示数据在传输的过程中一切正常,怀疑是数据库编码问题,然后查看mysql编码: show variables like ...

  6. java快速排序代码

    public class test1 { public static int partition(int[] array,int lo,int hi){ int key=array[lo]; whil ...

  7. python操作json来存储简单的数据，pickle来操作复杂的数据

    json作为不同语言间进行数据交互的媒介,在当下已经渐渐取代了之前的xml,看一波python操作json # coding = ascii import json import pickle imp ...

  8. IOS正则表达式 （身份证、电话、汉字等常用条件筛选）

    下面的正则列表   替换对应的正则规则 那个字符串就可以了  例如: //正则规则 NSString *regex = @"^((13[0-9])|(147)|(17[0-9])|(15[^ ...

  9. SpirngMVC-JSON

    Springmvc默认用MappingJacksonHttpMessageConverter对json数据进行转换,需要加入jackson的包,如下: 配置json转换器 在注解适配器中加入messa ...

  10. 关于Pre-bound JDBC Connection found! HibernateTransactionManager does not 异常小结

    昨天帮女朋友配置ssh框架的多数据源, 本以为对此已经很熟悉,配置完其他的错倒是还能接受,调了一下就好了.  唯独 Pre-bound JDBC Connection found! Hibernate ...