带下拉菜单的按钮

<div class='btn-toolbar'>
<div class='btn-group'>
<a href='javascript:;' class='btn dropdown-toggle' data-toggle='dropdown'>专题 <span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='#'>自然科学</a></li>
<li><a href='#'>社会科学</a></li>
<li><a href='#'>人文历史</a></li>
<li><a href='#'>地理海洋</a></li>
</ul>
</div>
</div>

如图:

<div class='btn-toolbar'>
<div class='btn-group'>
<a href='javascript:;' class='btn'>专题</a>
<a href='javascript:;' class='btn dropdown-toggle' data-toggle='dropdown'><span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='#'>自然科学</a></li>
<li><a href='#'>社会科学</a></li>
<li><a href='#'>人文历史</a></li>
<li><a href='#'>地理海洋</a></li>
</ul>
</div>
</div>

说明:

  .caret:小三角图标

  使用ul li 构造一个下拉列表并且给这ul添加class='dropdown'

  最外围:.btn-toolbar

  .btn-group:按钮群组包围.btn和ul的div

Bootstrap页面布局15 - BS带下拉菜单的按钮的更多相关文章

  1. jquery带下拉菜单和焦点图

    jQuery,下拉菜单,二级菜单,索引按钮,焦点图代码,jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码. JQuery特效代码来源:http://www.huiy ...

  2. Bootstrap历练实例:导航内下拉菜单的用法

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

  3. 8.bootstrap下拉菜单、按钮组、按钮式下拉菜单

    下拉菜单 dropdown 对齐方式: .dropdown-menu-right     .dropdown-menu-left <div class="container" ...

  4. 关于Eclipse插件开发(四)-------给视图加下拉菜单和按钮和加入编辑器.

    本例将给视图加入下拉菜单和按钮,同时再为列表添加一个右键菜单. 创建ActionGroup类 加入菜单和按钮的方法与SWT和JFace组件的一样,先创建一个ActionGroup代码如下: MyAct ...

  5. Bootstrap系列 -- 36. 向上弹起的下拉菜单

    有些菜单是需要向上弹出的,比如说你的菜单在页面最底部,而这个菜单正好有一个下拉菜单,为了让用户有更好的体验,不得不让下拉菜单向上弹出.在Bootstrap框架中专门为这种效果提代了一个类名“dropu ...

  6. html 布局;css3+jq 下拉菜单;table分页动态添加行;html5本地存储;简单易用的html框架

    简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...

  7. BootStrap字体图标不显示、下拉菜单不显示

    在W3CSchool学习BootStrap教程时遇到的问题…… 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...

  8. Bootstrap 字体图标、下拉菜单、按钮组

    Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:内嵌下拉菜单的按钮组

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. hdu 1241:Oil Deposits(DFS)

    Oil Deposits Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total ...

  2. tnsnames.ora存放路径

    tnsnames.ora存放路径: D:\app\Administrator\product\11.2.0\dbhome_1\NETWORK\ADMIN

  3. 013_VM+WinDbg安装

    预计平均三天一课,录制过程中,大纲会实时更新(更改) 主讲:郁金香灬老师  QQ150330575 开发环境:VC6,VS2003,VS2008 www.yjxsoft.net www.yjxsoft ...

  4. Centos升级内核 --已验证

    Docekr 对内核由要求,3.10以上 Centos 6.5内核达不到要求 [linux@localhost Desktop]$ sudo service docker statusdocker d ...

  5. Json格式数据某一列。

    {title : '支付费率',elCls : 'center', dataIndex :'zfrate',width:100, renderer :function(value,obj){ if(o ...

  6. MVC WEB安全——XSS攻击防御

    XSS(跨站脚本攻击) 描述: 原理:攻击者往Web页面里插入恶意代码,当用户浏览该页之时,嵌入其中Web里面的代码会被执行,从而达到攻击用户的特殊目的. 类别: 1)被动注入(Passive Inj ...

  7. BestCoder Round #78 (div.2)

    因为rating不够QAQ就报了Div2.. [CA Loves Stick] CA喜欢玩木棍. 有一天他获得了四根木棍,他想知道用这些木棍能不能拼成一个四边形. Sample Input 2 1 1 ...

  8. 简单了解Flux,注意这是一个设计思想,是一个架构!!!!!

    在RN开发中,我们总是需要去更改一个组件个数据(也就是所谓的状态),我们一般是采用是在初始化的函数constror()(好像拼错了) 在这个函数里面申明我们的初始化数据(状态)eg:this.stat ...

  9. 什么是J2EE,包括哪些规范!

    J2EE平台由一整套服务(Services).应用程序接口(APIs)和协议构成,它对开发基于Web的多层应用提供了功能支持,下面对J2EE中的13种技术规范进行简单的描述(限于篇幅,这里只能进行简单 ...

  10. Solve error: Cannot open include file: 'X11/Xlocale.h': No such file or directory

    When you use FLTK with VS2010, you may get the error: fatal error C1083: Cannot open include file: ' ...