bootstrap-下拉菜单（菜单项状态）

1.运行效果如图所示

2.实现代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>表单控件——下拉菜单（菜单项状态）</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
    crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
    crossorigin="anonymous">
</head>
<body>
    <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" type="button" 
          id="dropdownMenu1" data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation" class="active">
            <a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation" class="disabled">
            <a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
          </ul>
    </div>   

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"></script>
</body>
</html>

时间： 2024-10-10 23:18:45

bootstrap-下拉菜单（菜单项状态）的相关文章

BootStrap 下拉多级菜单

<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 3 的多级下拉菜单示例</title> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.

Bootstrap下拉菜单

[Bootstrap 下拉菜单] <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题 <span class="caret"></span> </but

Bootstrap 下拉菜单disabled

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 下拉菜单</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"&g

Bootstrap下拉菜单的认识误区

Bootstrap下拉菜单HTML有两种写法: 一.内置式: <div class="dropdown"> <button class="btn btn-primary" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <

bootstrap下拉菜单组件描述:http://v3.bootcss.com/components/#dropdowns 问题环境:安卓4.4.2,微信6.2内置浏览器,bootstrap 3.1.1.1 问题描述:bootstrapV3的下拉菜单组件,在ios的微信浏览器中表现正常,但安卓微信浏览器中无法正常触发,安卓非微信浏览器可以触发问题触发条件:未知解决方案:去除button元素的属性data-toggle="dropdown",自己另外写一小段事件监听代码来切换div.

bootstrap下拉菜单插件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 下拉菜单</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"&g

Bootstrap 下拉菜单（Dropdowns）

本章将重点介绍 Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与下拉菜单(Dropdown) JavaScript 插件的互动来实现. 如需使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <div class="dropdown"> <button type="button" class="btn dropdown-toggl

Web前端开发实战2：二级下拉式菜单之JS实现

上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的,我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏.使用 JavaScript方法实现我们需要用的知识有: 1)JS事件:onmouseover鼠标经过事件和onmouseout鼠标离开事件. 2)JS基础语法:使用function关键字定义函数. 3)DOM编程:getElementsByTagName()方法. 那么接下来就是我们制作的流程: 1)隐藏二级菜单:设置CSS样式,让二级菜单隐藏. 2)编写显示子菜单show

Web前端开发实战3：二级下拉式菜单之jQuery实现

大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有: 1)使用$(function(){...})获取到想要作用的HTML元素. 2)通过使用children()方法寻找子元素. 3)通过使用show()方法来显示HTML元素. 4)通过使用hide()方法来隐藏HTML元素. 5)jQuery库引用方法: 第一种方法:将jQuery库下载到电脑上

带下拉子菜单的导航菜单

一.带下拉子菜单的导航菜单下拉菜单在一些企业网站应用尤为广泛,它存在使用方便,占用空间小等特点.之前纵向导航教程中已使用过二级导航,今天制作下横向导航菜单的二级菜单,方法和纵向一样,只不过由纵向改变为横向而已,下面我们以上一章第二节用图片美化的横向导航中的实例进行修改. 先在html代码增加二级菜单的代码: <div id=”menu”><ul><li><a id=”current” href=”#”>首页</a></li><