.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. javascript 将内容复制到剪贴板

      javascript 将内容复制到剪贴板 CreateTime--2017年9月19日11:36:50 Author:Marydon js 操作剪贴板 1.设置剪贴板内容 UpdateTime-- ...

  2. remove &#39;^M&#39; in shell script

    近期在windows上编辑一些shell脚本后上传到交换机框体上. 但这些shell脚本无法运行,每一行结尾都有'^M',同一时候框体上又没有dos2unix工具. 这么多脚本也不可能一行一行来改动. ...

  3. iOS 购物车动画

    代码地址如下:http://www.demodashi.com/demo/11155.html 先看看动画效果: 项目结构: 接下来开始具体实现过程: 一.先计算动画开始结束位置 方法:- (CGPo ...

  4. mongodb的基本语法（一）

    一.数据库常用命令 1.Help查看命令提示 help db.help(); db.yourColl.help(); db.youColl.find().help(); rs.help(); 2.切换 ...

  5. 登录首页时报错：java.lang.IllegalArgumentException （不合法的参数异常）

    处理一个老项目,DOWN下项目并配好之后,启动没问题,但是登陆之后首页显示如下: 控制台报错如下: 严重: Servlet.service() for servlet jsp threw except ...

  6. PHP中根据IP地址判断所在城市等信息

    本篇文章由:http://xinpure.com/php-based-on-information-such-as-the-ip-address-in-your-city/ 获得IP地址 在 PHP ...

  7. laydate 和 Vue 奇怪的清空问题

    laydate的input,会自动被清空,当别的input修改的时候.改成这样既可解决 <td><input type="text" id="retur ...

  8. CentOS7 安装lua环境(我是在mysql读写分离用的)

    下载地址:http://www.lua.org/download.html 安装方法: 依次执行以下命令: curl -R -O http://www.lua.org/ftp/lua-5.3.1.ta ...

  9. POJ--3529--Wormholes

    Wormholes Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 36889   Accepted: 13520 Descr ...

  10. iptables 使用

    原文链接 本文介绍25个常用的iptables用法.如果你对iptables还不甚了解,可以参考上一篇iptables详细教程:基础.架构.清空规则.追加规则.应用实例,看完这篇文章,你就能明白ipt ...