<!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-vertical">
<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-vertical">
<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历练实例：基本按钮组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. Bootstrap历练实例：基本按钮群组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. Bootstrap历练实例：向列表组添加内容

    向列表组添加自定义内容 我们可以向上面已添加链接的列表组添加任意的 HTML 内容.下面的实例演示了这点: <!DOCTYPE html><html><head>& ...

  4. Bootstrap历练实例：向列表组添加链接

    向列表组添加链接 通过使用锚标签代替列表项,我们可以向列表组添加链接.我们需要使用 <div> 代替 <ul> 元素.下面的实例演示了这点: <!DOCTYPE html ...

  5. Bootstrap历练实例：带列表组的面板

    带列表组的面板 我们可以在任何面板中包含列表组,通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板,并在面板中添加列表组.您可以从 列表组 一章中 ...

  6. Bootstrap历练实例：基本输入框组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. Bootstrap历练实例：成功按钮

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. bootstrap历练实例：按钮作为输入框组前缀或后缀

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. Bootstrap历练实例：按钮组大小

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. Codeforces Round #439 (Div. 2)C - The Intriguing Obsession（简单dp）

    传送门 题意 给出三个集合,每个集合的元素数量为a,b,c,现在需要连边,满足集合内元素不可达或最短路为3,求可行方案数 分析 设dp[i][j]为a集合元素为i个,b集合元素为j个的可行方案,易知( ...

  2. [Xcode 实际操作]八、网络与多线程-(9)使用异步Get方式获取网页源码

    目录:[Swift]Xcode实际操作 本文将演示如何通过Get请求方式,异步获取网页源码. 异步请求与同步请求相比,不会阻塞程序的主线程,而会建立一个新的线程. 在项目导航区,打开视图控制器的代码文 ...

  3. SpringBoot 2.0 集成 JavaMail ,实现异步发送邮件

    一.JavaMail的核心API 1.API功能图解 2.API说明 (1).Message 类: javax.mail.Message 类是创建和解析邮件的一个抽象类 子类javax.mail.in ...

  4. AutoLayout 根据文字、图片自动计算 UITableViewCell 高度

    原文网址: http://lvwenhan.com/ios/449.html 此系列文章代码仓库在 https://github.com/johnlui/AutoLayout ,有不明白的地方可以参考 ...

  5. [Noip2012普及组]摆花

    Description 小明的花店新开张,为了吸引顾客,他想在花店的门口摆上一排花,共 m 盆.通过调查顾客的喜好,小明列出了顾客最喜欢的 n 种花,从 1 到 n 标号.为了在门口展出更多种花,规定 ...

  6. noip2017普及组

    过了这么久才来写博客,也是我这么一段时间都很低迷吧.... 老实来说,今年应该是要打提高组的...可还是打了普及组... 其实最猥琐的还是我连普及都写挂了,作为一个学了两年的人,图论,进阶dp都写过的 ...

  7. 黑马MySQL数据库学习day02 表数据CRUD 约束CRUD

    /* 基础查询练习: 1.字段列表查询 当查询全部字段时,一种简便方式,使用*代替全部字段(企业中不推荐使用) 2.去除重复行 DISTINCT,注意修饰的是行,也就是整个字段列表,而不是单个字段. ...

  8. 未能载入软件包“WebDriverAgentRunner”,因为它已损坏或丢失必要的资源。

    添加 YYCache.framework RoutingHTTPServer.framework

  9. Zynq7000开发系列-2（VMware与Ubuntu安装使用）

    一.前言 在嵌入式开发中,是无法避免使用Linux系统的,因为在开发之前必须先搭建起交叉编译环境,而后关于Bootloader.Linux Kernel的裁剪移植,File system的制作,底层驱 ...

  10. 101 Symmetric Tree 判断一颗二叉树是否是镜像二叉树

    给定一个二叉树,检查它是否是它自己的镜像(即,围绕它的中心对称).例如,这个二叉树 [1,2,2,3,4,4,3] 是对称的.    1   / \  2   2 / \ / \3  4 4  3但是 ...