.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. openerp js调用Python类方法

    转自:http://blog.csdn.net/kuaileboy1989/article/details/42875497 js调用.py文件中定义的类 形式如下: //创建product.prod ...

  2. PgSql备份pg_dump与还原手记pg_restore（转）

    可以直接跳转至最后面的示例进行查看 真没有想到,以前一直是PostgreSQL使用者,突然需要库移植又成了头一招了!原来它与mysql命令行操作区别还挺大. 不用怕,但绝对要细心,因为数据库操作是网站 ...

  3. Spring Boot（一）启动方式

    1.系统自动生成 SpringApplication.run(XX.class, args); 2.创建SpringApplication对象 SpringApplication app = new ...

  4. 安装Drupal7.12升级至7.22

    怀揣着为中小企业量身定做一整套开源软件解决方案的梦想开始了一个网站的搭建.http://osssme.org/ [2013-08-11] 资料更新,Drupal 7.22升级至7.23 访问自己的Dr ...

  5. ThreadLocal源码

    /* * Copyright (c) 1997, 2007, Oracle and/or its affiliates. All rights reserved. * ORACLE PROPRIETA ...

  6. php json_decode失败，返回null

    在使用json_decode之前,一定得保证字符串是utf-8编码,而执行json_decode失败的原因有很多,罗列如下: 1)编码不对: 2)字符串格式不对: 3)字符串格式对,但是有异常字符: ...

  7. centos7防火墙的关闭

    从centos7开始使用systemctl来管理服务和程序,包括了service和chkconfig. #systemctl list-unit-files|grep firewalld.servic ...

  8. 一．软件介绍(apache lighttpd nginx)

    一．软件介绍(apache  lighttpd  nginx) 1. lighttpd Lighttpd是一个具有非常低的内存开销,cpu占用率低,效能好,以及丰富的模块等特点.lighttpd是众多 ...

  9. Maven实战（一）搭建Nexus伺服器

    在搭建伺服器之前我们先要说明一下为什么要搭建伺服器以及伺服器的作用是什么.在进行分布式开发中maven工具的使用可以极大的提高我们管理项目颗粒的效率,既然是管理颗粒那总得有地方存放才行,而伺服器扮演的 ...

  10. 通过camera + gallery android上传文件到html

    今天做项目的时候遇到一个问题:当html通过js调用input of type file时候,希望android手机的选择器可以同时出现“相机”和“图片”等,但通过下面代码 Intent i = ne ...