您可以在一个按钮组内嵌套另一个按钮组，即，在一个 .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. 51nod 1031+斐波那契和杨辉三角的一些基础知识

    直接斐波那契... #include<stdio.h> #include<queue> #include<string.h> #include<iostrea ...

  2. android调用其他apk的activity

    <img src="https://img-blog.csdn.net/20160322114625025" alt="" />启动另一个apk的工 ...

  3. [Xcode 实际操作]八、网络与多线程-(19)使用RunLoop使PerformSelector方法延迟动作的执行

    目录:[Swift]Xcode实际操作 本文将演示使用RunLoop使PerformSelector方法延迟动作的执行. 在项目导航区,打开视图控制器的代码文件[ViewController.swif ...

  4. hdu 6319 Problem A. Ascending Rating （2018 Multi-University Training Contest 3）

    #include <stdio.h> #include <iostream> #include <cstdlib> #include <cmath> # ...

  5. 整理一下 通知传值 Block传值

    Block: 一. (1) 在需要传值的界面定义属性 // 点击collectionViewCell的回调 @property (nonatomic, copy) void(^Didcollectio ...

  6. C# 基础之字段与属性

    1.属性是字段的扩展 2.根据面向对象封装思想,字段最好设为private(私有),这样有利于防止客户端对字段的篡改,从而保证了成员的完整性 3.访问类中私有字段,C#提供了属性,用来对字段进行灵活的 ...

  7. 转 OUI and OPatch Do Not Recognize JDK/JRE on Windows

    issue 1: 新覆盖的opatch 提示,无法opatch 报错 此时不应有1.6 D:\app\Administrator\product\11.2.0\dbhome_1\OPatch\ocm\ ...

  8. web移动端滑动插件

    1.slip只有6.3k可以说是非常小了,主要是通过css3里面的transform来改变的位置,控制的是父容器,使用也非常简单,具体信息移步slip.js.一个简单的demo如下 <!DOCT ...

  9. Unity小知识记录

    //判断运行的平台 Application.platform == RuntimePlatform.Android EditorPrefs 编辑器储存数据 [AddComponentMenu(&quo ...

  10. ［异常］undefined method `visit' for #<RSpec::Core::ExampleGroup::Nested_1:0x16529f8 @example=nil>

    在进行Rspec 编译测试: bundle exec rspec spec/requests/static_pages_spec.rb 提示错误: FF Failures: 1) Static pag ...