.dropdown——设置父元素为下拉菜单组件，向下弹出子菜单；

.dropup——设置父元素为下拉菜单组件，向上弹出子菜单；

.dropdown-toggle——设置button为下拉菜单切换button；

.dropdown-menu——设置ul元素为下拉菜单；

.dropdown-menu-right——将菜单右对齐；

.pull-right——将菜单组件的父元素右对齐；

.dropdown-header——为菜单项加入标题；

.divider——为菜单项加入切割线；

.disabled——禁用对应菜单项。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>CSS全局样式_下拉菜单</title>

    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">

    <script src="jquery-1.11.1.min.js"></script>

    <script src="bootstrap.min.js"></script>

</head>

<body>

<div class="container">

    <div class="dropdown pull-right">

        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

            下拉菜单

            <span class="caret"></span>

        </button>

        <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">

            <li role="presentation" class="dropdown-header">中超Big4</li>

            <li><a href="#" role="menuitem">上海上港</a></li>

            <li><a href="#" role="menuitem">广州恒大</a></li>

            <li><a href="#" role="menuitem">山东鲁能</a></li>

            <li class="disabled"><a href="#" role="menuitem">北京国安</a></li>

            <li role="presentation" class="divider"></li>

            <li role="presentation" class="dropdown-header">中超5-8</li>

            <li><a href="#" role="menuitem">上海申花</a></li>

            <li><a href="#" role="menuitem">江苏舜天</a></li>

            <li><a href="#" role="menuitem">长春亚泰</a></li>

            <li><a href="#" role="menuitem">河南建业</a></li>

        </ul>

    </div>

</div>

</body>

</html>

Bootstrap组件之下拉菜单的更多相关文章

  1. bootstrap的下拉菜单组件与导航条

    前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...

  2. Bootstrap按钮式下拉菜单

    前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...

  3. bootstrap多级下拉菜单

    只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类,并在该 <li> 元素下添加 .dropdown-menu 类的列表,就可以为该菜单项添加一 ...

  4. BT之下拉菜单

    <div class="dropdown"> <button class="btn btn-default dropdown-toggle" ...

  5. Bootstrap学习js插件篇之下拉菜单

    案例 通过此插件可以为几乎所有东西添加下拉菜单,包括导航条.标签页.胶囊式按钮. 用于导航条 导航条分为四个部分.第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列. <n ...

  6. 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

    Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来.   Bootstrap提供了不少的前端UI组件.带下拉 ...

  7. Bootstrap--组件之下拉菜单

    用于显示链接列表的可切换.有上下文的菜单. 对齐 B默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度. 为 .dropdown-menu 添加 .dropdown-menu-ri ...

  8. bootstrap悬停下拉菜单显示

    使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...

  9. Bootstrap的下拉菜单float问题

    在学习bootstrap中的下拉菜单时,遇到下面情况: <div class="dropdown"> <button class="btn btn-de ...

随机推荐

  1. Visual studio之C# 重新定义Messbox的显示窗口位置

    背景 当前做的APP需要新建一个设置窗口,该设置窗口会出现在靠近屏幕边缘位置,但主窗口铺满屏幕,设置窗口会弹出一些讯息,但默认情况下Messagebox窗口会居中于主窗口,这不太符合要求,正常应该居中 ...

  2. 使用Monkeyrunner进行Android自动化的总结

    http://www.2cto.com/kf/201411/356056.html 使用Monkeyrunner进行Android自动化的总结 使用Android自动化的方式,不仅可以用来对Andro ...

  3. Docker、DAOCloud

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...

  4. canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）

    [下篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  5. docker容器互连

    三种方式 1.使用容器连接的示例如下: $ docker run --name some-app --link itbilu-mysql:mysql -d application-that-uses- ...

  6. linux 批量替换内容

    sed -i "s/被替换的内容/替换的内容/g" `grep "被替换的内容" -rl 目录` -r = 搜索下级目录

  7. NIO - Selector源码分析

    1. 背景 SelectableChannel对象的多路复用器. 可以通过调用Selector.open()方法创建Selector对象.Selector.open()方法会利用系统默认的Select ...

  8. iOS5 ARC，IBOutlets 应该定义strong还是weak

    转自:http://blog.csdn.net/yiyaaixuexi/article/details/7864974 写这篇文章的缘由,是因为我泡在stackoverflow上翻帖子,看到一个名为S ...

  9. [python小记]使用lxml修改xml文件，并遍历目录

    这次的目的是遍历目录,把目标文件及相应的目录信息更新到xml文件中.在经过痛苦的摸索之后,从python自带的ElementTree投奔向了lxml.而弃用自带的ElementTree的原因就是,na ...

  10. myeclipse之完全破解

    并不是所有的破解都是成功的,就如并不是所有的战争都会胜利一样,我们在做事情的时候,总会遇到些问题,比如Activate不成功,需要手动激活. 激活不成功就是不成功,来回的破解.卸载.重装,都还是不可能 ...