.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. [Exception Android 20] - Error:Execution failed for task ':app:processDebugResources'

    Error:Execution failed for task ':app:processDebugResources'. > com.android.ide.common.process.Pr ...

  2. MVC 强类型传值Model。和弱类型传值ViewData[&quot;&quot;]。及用EF进行增删查改（母版页的使用）

    <1> 控制器 </pre><pre name="code" class="csharp">using MvcTest.Mo ...

  3. 操作系统CPU调度知识点

    1.进程基本概念:进程是程序的一次运行. 是系统进程资源分配和调度的基本单位. 2.进程三态:运行状态.就绪状态.堵塞状态.三态转换规则,就绪状态的进程因为调度进程运行状态,运行状态因为时间片用完而进 ...

  4. Win7 + vs2012 + cocos2d-x2.2 配置开发环境

    昨天開始打算学习Cocos2d-x,首先肯定是要在自己的电脑上配置开发环境.昨天折腾了一天,以下将自己在当中遇到的问题与解决方法跟大家分享一下.大多数会遇到的问题,我都遇到了....     1.安装 ...

  5. Ajax高级应用---Comet

    非常适合处理体育比赛的分数和股票报价 1.HTTP流 将输出缓存中的内容一次性全部发送到客户端的功能是实现HTTP流的关键所在.

  6. Django Ajax提交数据请求

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. 删除MYSQL账号多于的空用户

    默认情况下,mysql安装好之后,会存在匿名用户,也可以叫空用户,输入mysql之后直接回车便可进入mysql. 该匿名用户具有一定的权限,通过SHOW DATABASES;可以查看到informat ...

  8. JavaScript正则表达式基础知识汇总

    一.创建正则对象: 1.构造函数RegExp创建正则对象 var pattern = new RegExp('s$'); //pattern匹配以s结尾的字符串 2.使用正则直接量 var patte ...

  9. IIS8.5设置 MVC HTTP 错误 404.0 - Not Found

    0. 确认 设置IIS的“ISAPI和CGI限制”中的“ASP.NET v4.0.0.30319”为允许 1. 解决方案 <system.webServer>    <modules ...

  10. CentOS安装自动补全安装包

    CentOS7标准版有这个功能,但是CentOS6却没有,其实很简单: 1.安装bash-completion yum install bash-completion 2.保存一下最新的缓存 yum ...