Bootstrap入门(十)组件4:按钮组与下拉菜单结合
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
.btn-group
中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了。 只要改变一些基本的标记,就能把按钮变成下拉菜单的开关。<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>
<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="#">dianwo1</a>
<li><a href="#">dianwo2</a>
</ul>
</div>
</div>
<div class='btn-group'>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle='dropdown'>
xiala1
<span class="caret"></span>
</button>
<ul class='dropdown-menu' role='menu'>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul>
</div>
<div class='btn-group'>
<button type="button" class="btn btn-info dropdown-toggle">xiala2</button>
<button type="button" class="btn btn-info 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="#">1</a></li>
<li><a href="#">1</a></li>
</ul>
</div>
<div class='btn-group'>
<button type="button" class="btn btn-info dropdown-toggle btn-lg" data-toggle='dropdown'>
xiala1
<span class="caret"></span>
</button>
<ul class='dropdown-menu' role='menu'>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul>
</div> <div class='btn-group'>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle='dropdown'>
xiala1
<span class="caret"></span>
</button>
<ul class='dropdown-menu' role='menu'>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul>
</div> <div class='btn-group'>
<button type="button" class="btn btn-info dropdown-toggle btn-sm" data-toggle='dropdown'>
xiala1
<span class="caret"></span>
</button>
<ul class='dropdown-menu' role='menu'>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul>
</div> <div class='btn-group'>
<button type="button" class="btn btn-info dropdown-toggle btn-xs" data-toggle='dropdown'>
xiala1
<span class="caret"></span>
</button>
<ul class='dropdown-menu' role='menu'>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul>
</div>
<div class='btn-group dropup'>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle='dropdown'>
xiala1
<span class="caret"></span>
</button>
<ul class='dropdown-menu' role='menu'>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul>
</div>
Bootstrap入门(十)组件4:按钮组与下拉菜单结合的更多相关文章
- Bootstrap历练实例:标签页内的下拉菜单
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 简单叨叨bootstrap按钮无限层级下拉菜单的实现
0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...
- bootstrap 响应式导航条模板(含下拉菜单,弹出框)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Delphi 工具条按钮上的下拉菜单
制作步骤: 1.添加一个 TImageList: ImageList1, 然后载入些图标; 2.添加两个 TPopupMenu: PopupMenu1.PopupMenu2, 并分别添加些菜单项; 3 ...
- Bootstrap入门(八)组件2:下拉菜单
Bootstrap入门(八)组件2:下拉菜单 先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:内嵌下拉菜单的按钮组
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap<基础十四> 按钮下拉菜单
使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...
- Bootstrap 字体图标、下拉菜单、按钮组
Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...
- Bootstrap入门(六)按钮和图片
Bootstrap入门(六)按钮和图片 先引入本地的CSS文件 <link href="css/bootstrap.min.css" rel="styleshe ...
随机推荐
- git 以及 github 使用系列
本人打算开始写一个有关git 使用,以及github 使用的系列文章了,一来可以自己总结,二来github用好了,可以存放自己的一些知识框架吧. 1.准备 : 有一个 github上的账号, wind ...
- Git 常用命令汇总
#安装git yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel yum install -y g ...
- ACM录 之 常识和错误。
接下来说说一些ACM里面的常识和错误...(可能会比较乱) —— 首先ACM里面的代码都是要提交上去,然后让计算机自动判题的,所以...千万不要把 system("pause"); ...
- iBATIS 3 试用手记 - The FUTURE - ITeye技术网站
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- lpc1768的系统时钟
#define XTAL_FREQ 12000000 #define VECT_TAB_OFFSET 0x0000 void SystemInit(void) { //PLL0时钟配置 LPC_ ...
- github上forck一个分支之后,如何和主分支同步
github forck一个分之后,如果过一段时间就会和主分支的差异比较大. 这样提交pr的时候 就会冲突,这个时候我们就需要和主分支同步代码 git remote add upstream git@ ...
- X-001 FriendlyARM Tiny4412 uboot移植前奏
版权声明:本文为博主原创文章,转载请注明出处 开发环境:win7 64位 + VMware12 + Ubuntu14.04 64位 工具链:linaro提供的gcc-linaro-6.1.1-2016 ...
- sqlserver merge into
create table #ttt(id int,name nvarchar(10));merge into #ttt t using (select 1 as id ,'eee' as name ) ...
- INSTALL_FAILED_UPDATE_INCOMPATIBLE
安装apk的时候,报错. 解决:把所有这个apk的相关信息删除干净,隐藏较深的是设置->应用管理->这个应用的相关信息删除干净就可以了
- 【滚动数组】【状压dp】Gym - 100956F - Colored Path
f(i,j,S)表示到(i,j),且经由的路径上的颜色集合为S的价值的最小值,从上方和左方转移过来即可. 要注意,内存不足,需要滚动数组优化,即使用了map,还是需要. 路径输出的时候,可以再跑一遍d ...