<!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. Multi-University板块

    力争补完所有 Multi-University 的"水题",任重而道远. HDU2819[二分匹配与矩阵性质] HDU2844[背包问题(二进制优化)] HDU2824[欧拉函数] ...

  2. nmon性能监控工具学习

    nmon在AIX环境上,是一款很出名的系统性能监控工具,其实它除了可以运行在AIX,还可以在Linux环境下编译.使用. 源码下载地址: http://nmon.sourceforge.net/pmw ...

  3. Python 实现简单的登录注册界面

    Python 实现简单的登录注册界面 注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import message ...

  4. 集成Activiti工作流的J2EE快速开发框架

    框架简介 enos款快速开发模块化脚手架,实现功能有系统模块:菜单管理.用户管理.角色管理,系统监控:系统日志.接口api.sql监控. 系统功能 系统管理:菜单管理.用户管理.角色管理 统一查询 p ...

  5. 转 【推荐】 RAC 性能优化全攻略与经典案例剖析

    https://mp.weixin.qq.com/s?__biz=MjM5MDAxOTk2MQ==&mid=2650277038&idx=1&sn=05cce57a1d253c ...

  6. Appium禁止appium setting和unlock在设备上重复安装

    1.文件:/Applications/Appium.app/Contents/Resources/node_modules/appium/node_modules/appium-android-dri ...

  7. 116 Populating Next Right Pointers in Each Node 每个节点的右向指针

    给定一个二叉树    struct TreeLinkNode {      TreeLinkNode *left;      TreeLinkNode *right;      TreeLinkNod ...

  8. STM32F4之SWO

    https://stm32f4-discovery.net/2014/12/library-46-debug-stm32f4-device-swo-feature/

  9. 通用全局CSS样式

    PC全局样式 *{padding:0;margin:0;} div,dl,dt,dd,form,h1,h2,h3,h4,h5,h6,img,ol,ul,li,table,th,td,p,span,a{ ...

  10. WGET and CURL

    目录 WGET and CURL 对比 wget curl curl使用示例 WGET and CURL 对比 CURL 和WGET都可以用来下载文件,用法也类似:curl/wget [-option ...