您可以在一个按钮组内嵌套另一个按钮组，即，在一个 .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. 进击python第三篇：基础

    基础拾遗 序列解包 例: >>>x,y,z=1,2,3 >>>print x,y,z 1 2 3 交换变量也是没问题 >>>x,y=y,x > ...

  2. bzoj 3504: [Cqoi2014]危桥【最大流】

    妙啊,很容易想到连(s,a1,an)(s,b1,bn)(a2,t,an)(b2,t,bn),这样,但是可能会发生a1流到b2或者b1流到a2这种不合法情况 考虑跑两次,第二次交换b1b2,如果两次都合 ...

  3. hdu3949XOR（线性基）

    传送门 不知道线性基是什么东西的可以看看蒟蒻的总结 题目大意:求一堆数字能异或出的第$k$大的数是多少 线性基求第k大好珂怕…… 据大佬们说就是把$k$给二进制拆分,如果$k$的第$i$位为1,那么$ ...

  4. [HNOI2010] 物品调度 fsk

    标签:链表+数论知识. 题解: 对于这道题,其实就是两个问题的拼凑,我们分开来看. 首先要求xi与yi.这个可以发现,x每增加1,则pos增加d:y每增加1,则pos增加1.然后,我们把x与y分别写在 ...

  5. 线段树-区间更新-HDU 1689

    #include <iostream> #include <cstdio> #include <string> #include <cstring> # ...

  6. KEIL MDK之RTX的移植

    原文: http://lib.csdn.net/article/embeddeddevelopment/12240 一 将MDK安装目录的C:\keil\ARM\RL\RTX\Config下面的配置文 ...

  7. Unity Shader入门精要学习笔记 - 第14章非真实感渲染

    转载自 冯乐乐的 <Unity Shader 入门精要> 尽管游戏渲染一般都是以照相写实主义作为主要目标,但也有许多游戏使用了非真实感渲染(NPR)的方法来渲染游戏画面.非真实感渲染的一个 ...

  8. Python3 配置文件(configparser)（转载）

    本文由 Luzhuo 编写,转发请保留该信息. 原文: http://blog.csdn.net/rozol/article/details/72793304 以下代码以Python3.6.1为例 L ...

  9. 基于.net core封装的xml序列化，反序列化操作

    需求: 由于在.net core中去除了Xml序列化XmlSerializer操作类.因此,在于一此数据传输当中出,需要用到对xml格式字符串的处理问题.因此封装了一个xml序列化与反序列化操作的类库 ...

  10. HashMap,你知道多少？

    一.前言 HashMap在面试中是个火热的话题,那么你能应付自如吗?下面抛出几个问题看你是否知道,如果知道那么本文对于你来说就不值一提了. HashMap的内部数据结构是什么? HashMap扩容机制 ...