<!--声明方式的下拉菜单:三个要点-->
<!--1 外围容器用dropdown包裹-->
<!--2 内部点击事件data-toggle-->
<!--3 dropdown-menu菜单-->
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">产品</a></li>
</ul>
</div>

另外:如果用js调用下拉菜单并不好用,一般是用在点击别的按钮下拉菜单显示可能用到

dropdown下拉菜单的更多相关文章

  1. 巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)

    :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...

  2. 巧用CSS3:target 伪类制作Dropdown下拉菜单(无JS)

    原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...

  3. Dropdown 下拉菜单

    将动作或菜单折叠到下拉菜单中. 基础用法 移动到下拉菜单上,展开更多操作. 通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单.默认情况下,下拉按钮只要ho ...

  4. Bootstrap 下拉菜单(dropdown)插件

    使用下拉菜单的插件,您可以向任何组件(比如:导航栏,标签页,胶囊式导航,按钮)添加下拉菜单 用法 您可以切换下拉菜单(dropdown)插件隐藏内容 1.通过data属性,向链接或按钮添加data-t ...

  5. Bootstrap3系列:下拉菜单

    1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js">&l ...

  6. Bootstrap_下拉菜单

    在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件. 一.普通下拉菜单 <div class="dropdown"&g ...

  7. Bootstrap系列 -- 28. 下拉菜单状态

    下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus). 下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled).这两种状态使用方法 ...

  8. Bootstrap系列 -- 27. 下拉菜单对齐方式

    Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right ...

  9. Bootstrap系列 -- 26. 下拉菜单标题

    Bootstrap下拉菜单中使用 dropdown-header 来显示菜单标题,和上一篇说道的分割线一样 <div class="dropdown"> <but ...

随机推荐

  1. 一 SSH 无密码登陆 & Linux防火墙 & SELinux关闭

    如果系统环境崩溃.   调用/usr/bin/vim /etc/profile   SHH无密码登陆 所有要做得节点上运行   修改 host name vi /etc/sysconfig/netwo ...

  2. hibernate session.save()和session.persist()的区别

    save()需要返回一个Serialzable的实现类,因此执行这个方法时会马上插入到数据库 而persist()不会立即插入到数据库. "当我们封装一个长会话流程的时候,persist() ...

  3. [Recompose] Stream a React Component from an Ajax Request with RxJS

    Loading data using RxJS is simple using Observable.ajax. This lesson shows you how to take the ajax ...

  4. MFC的执行过程分析

    MFC程序的执行细节剖析 MFC程序也是Windows程序,所以它应该也有一个WinMain.可是在程序中看不到它的踪影.事实上在程序进入点之前.另一个(并且仅有一个)全局对象(theApp).这就是 ...

  5. 在Qt 4.4中,Alien Widget诞生了(Window负责与窗口系统的联系。Alien被号称是所有闪烁的终结者)

    2011年09月29日 23:47:46 阅读数:7269 Qt 4.0 automatically double-buffers Qt 4.1 QWidget::autoFillBackground ...

  6. Linux 6.2配置yum本地

    yum 1.挂在iso文件 [root@localhostmedia]# mount /dev/cdrom /media 2.安装createrepo createrepo是配置YUM源的配置工具,检 ...

  7. pandas 下的 one hot encoder 及 pd.get_dummies() 与 sklearn.preprocessing 下的 OneHotEncoder 的区别

    sklearn.preprocessing 下除了提供 OneHotEncoder 还提供 LabelEncoder(简单地将 categorical labels 转换为不同的数字): 1. 简单区 ...

  8. Announcing Zuul: Edge Service in the Cloud--转

    原文地址:http://techblog.netflix.com/2013/06/announcing-zuul-edge-service-in-cloud.html   The Netflix st ...

  9. ADO.NET数据读取封装

    public class sqlserver { //private string sqlstr = System.ConfigurationManager.ConnectionStrings[&qu ...

  10. Ubuntu16.04 “有线未托管”有线网络不可用问题解决

    Ubuntu16.04 “有线未托管”问题解决 电脑上安装的Ubuntu16.04 是通过先安装Ubuntu Server后在通过命令 sudo tasksel 安装的Gnome桌面环境,安装完成后发 ...