.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. Java学习笔记1、常用dos命令

    cd 改变当前目录 sys      制作DOS系统盘 copy 拷贝文件 del 删除文件 deltree 删除目录树 dir 列文件名 diskcopy 制磁盘 edit 文本编辑 format ...

  2. XAudio2学习之混音

    XAudio2不仅能够进行採样率转换.还能够进行混音.所谓混音就是将多路音频混合成一路进行输出.混音主要是IXAudio2SubmixVoice进行此项功能. 数据由IXAudio2SourceVoi ...

  3. Java 中equals和==差别

    java中的数据类型,可分为两类:  1.基本数据类型.也称原始数据类型.byte,short,char,int,long,float,double,boolean    他们之间的比較,应用双等号( ...

  4. 【VBA编程】01.第一个VBA程序Hello world

    [程序1] 所有程序语言的开始都源于Hello world,那么我们也使用Hello world进行第一个VBA编程 新建Excle文件-----文件-------选项-----自定义功能区域---- ...

  5. struts2 result type类型

    result标签中type的类型 类型 说明 chain 用于Action链式处理 dispatcher 用于整合JSP,是<result>元素默认的类型 freemarket 用来整合F ...

  6. Java构建工具_Ant详解

    1,什么是antant是构建工具2,什么是构建概念到处可查到,形象来说,你要把代码从某个地方拿来,编译,再拷贝到某个地方去等等操作,当然不仅与此,但是主要用来干这个3,ant的好处跨平台   --因为 ...

  7. SCRUM敏捷开发规则一栏

    敏捷.敏捷开发这类词近期非常火!敏捷开发,就是指可以在需求迅速变化的情况下高速开发软件.我们接触最多的和敏捷相关的名词是:极限编程(XP).结对编程.測试驱动开发(TDD)等. 敏捷建模(Agile ...

  8. 修改easyui panel 默认样式

    有这么个需求需要修改easyui panel头部中的背景色.于是根据panel中的最终被浏览器解析出来的类名,直接修改这个css样式,设置backgroud-color这个属性,发现不管用. 于是,就 ...

  9. linux 环境下git的安装与配置

    git是一个分布式的版本控制工具 1.安装git相关的依赖 yum install curl-devel expat-devel gettext-devel openssl-devel zlib-de ...

  10. unity, Awake的调用时机

    Awake是在setActive(true)时才会被调用,不过如果再setActive(false)然后重新setActive(true)的话,Awake就不会再被调用了,也就是说Awake能保证仅被 ...