您可以在一个按钮组内嵌套另一个按钮组，即，在一个 .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. 算法学习--Day8

    今天重拾算法复习. 今天学习了两个类型的算法——并查集与最小生成树(MST) 简单记录一下并查集的大致内容. 一.并查集的内容大致作用为查找当前图中的点有几个集合. 该算法起到查询分组的情况.通过给定 ...

  2. HDU2819【二分匹配与矩阵的秩】

    题意: 给出一个矩阵问能否实现对角线全部是1,能的话输出路径,不能的话输出-1 思路: 首先根据矩阵的性质,这一定是一个满秩矩阵,所以只根据行或列交换就一定能实现. 所以行和列构成二分图,然后跑一发匈 ...

  3. CTP Release() 的注意问题

    测试时发现CThostFtdcMdSpi有个比较严重的问题,就是使用Release()退出清理对象时 会出现死机,并且频率很高,怎样解决? 答:请参考以下代码的释放顺序. template <c ...

  4. 学习Mahout(三)

    开发+运行第一个Mahout的程序 代码: /** * Licensed to the Apache Software Foundation (ASF) under one or more * con ...

  5. 远程kafka通信实例，各种bug解决----虚拟机+本地电脑

    为了实现远程kafka通信,我可谓是呕心沥血.期间各种bug各种调,太煎熬了 (T.T) 介绍: 我用一台虚拟机作为远程消息的发送方,用本地电脑主机作为消息的接收方 虚拟机:安装java,kafka, ...

  6. ADO学途 three day

    1· 程序的根本----数据 一个程序是用来处理数据算法的具体表现,可以说没有数据,程序就没有意义.今天主 要分享在一个程序中数据的支持者SQL server的建立和使用.首先当然不可缺少SQL se ...

  7. cdq(2018.10.18)

    一句话题意:给你三个数列{a_i},{b_i},{c_i},保证每个数列都恰好是一个排列.你需要求出满足\(a_i<a_j,b_i<b_j,c_i<c_j\)的有序对\((i,j)\ ...

  8. CentOS7-MySQL8安装-使用yum库安装

    # Enable to use MySQL 5.5 [mysql55-community] name=MySQL 5.5 Community Server baseurl/$basearch/ ena ...

  9. 51Nod 1272 最大距离 (栈或贪心)

    #include <cstdio> #include <queue> #include <cstring> #include <iostream> #i ...

  10. JAVA Debug调试技术

    System.out.println(e),这个方法打印出异常,并且输出在哪里出现的异常,不过它和另外一个e.printStackTrace()方法不同.后者也是打印出异常,但是它还将显示出更深的调用 ...