当前位置: 首页 > news >正文

Bootstrap 下拉菜单

Bootstrap 下拉菜单:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
</head>

<body style="margin:50px 0">
    <div class="container">
        <div class="dropdown open clearfix">
            <ul class="dropdown-menu">
                <li class="dropdown-header">title</li>
                <li class="active"><a href="">01</a>
                </li>
                <li><a href="">02</a>
                </li>
                <li><a href="">03</a>
                </li>
                <li><a href="">04</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-header">title</li>
                <li class="disabled"><a href="">01</a>
                </li>
                <li><a href="">02</a>
                </li>
                <li><a href="">03</a>
                </li>
                <li><a href="">04</a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>b index</title>
<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
</head>
<body style="margin:150px;">
    <div class="bg-primary">组合式下拉菜单</div>
    <div class="btn-group">
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            success <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a>01</a></li>
            <li><a>02</a></li>
            <li><a>03</a></li>
            <li class="divider"></li>
            <li><a>04</a></li>
        </ul>
    </div>
    <div class="bg-primary">组合式上拉菜单</div>
    <div class="btn-group dropup">
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            success <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a>01</a></li>
            <li><a>02</a></li>
            <li><a>03</a></li>
            <li class="divider"></li>
            <li><a>04</a></li>
        </ul>
    </div>
    <div class="bg-primary">分离式下拉菜单</div>
    <div class="btn-group">
        <button type="button" class="btn btn-success">success</button>
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a>01</a></li>
            <li><a>02</a></li>
            <li><a>03</a></li>
            <li class="divider"></li>
            <li><a>04</a></li>
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="b/js/bootstrap.js"></script>
</body>
</html>

 

转载于:https://www.cnblogs.com/stono/p/4889084.html

相关文章:

  • jQuery的Ajax提交
  • linux命令ps aux|grep xxx详解
  • EXCEL数据导入SQL表的方法
  • 研究:我们的宇宙至少四次进入其它宇宙
  • js获取元素样式
  • Adobe:下一代Flash Player效率将提高10倍
  • 九度OJ 1054:字符串内排序 (排序)
  • [CareerCup] 12.3 Test Move Method in a Chess Game 测试象棋游戏中的移动方法
  • Java常量池解析与字符串intern简介
  • Flash开发利器IntelliJ IDEA - 安装
  • 微软出页游用flash技术
  • 具体的了解“gt;/dev/null 2gt;amp;1”
  • 2.C#的输入、输出与运算符、数据类型
  • Flash CS5暗藏物理引擎
  • [国嵌攻略][042][代码搬移不可少]
  • (十五)java多线程之并发集合ArrayBlockingQueue
  • [译] React v16.8: 含有Hooks的版本
  • ERLANG 网工修炼笔记 ---- UDP
  • js作用域和this的理解
  • mysql中InnoDB引擎中页的概念
  • Python3爬取英雄联盟英雄皮肤大图
  • Tornado学习笔记(1)
  • Webpack4 学习笔记 - 01:webpack的安装和简单配置
  • 翻译--Thinking in React
  • 说说动画卡顿的解决方案
  • 无服务器化是企业 IT 架构的未来吗?
  • 写给高年级小学生看的《Bash 指南》
  • 一个项目push到多个远程Git仓库
  • 用Visual Studio开发以太坊智能合约
  • linux 淘宝开源监控工具tsar
  • 阿里云ACE认证学习知识点梳理
  • 翻译 | The Principles of OOD 面向对象设计原则
  • ​RecSys 2022 | 面向人岗匹配的双向选择偏好建模
  • ​水经微图Web1.5.0版即将上线
  • #考研#计算机文化知识1(局域网及网络互联)
  • (003)SlickEdit Unity的补全
  • (1/2)敏捷实践指南 Agile Practice Guide ([美] Project Management institute 著)
  • (32位汇编 五)mov/add/sub/and/or/xor/not
  • (4)(4.6) Triducer
  • (Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例
  • (分布式缓存)Redis分片集群
  • (附源码)计算机毕业设计SSM在线影视购票系统
  • (算法)前K大的和
  • (转)Linux下编译安装log4cxx
  • **Java有哪些悲观锁的实现_乐观锁、悲观锁、Redis分布式锁和Zookeeper分布式锁的实现以及流程原理...
  • ./indexer: error while loading shared libraries: libmysqlclient.so.18: cannot open shared object fil
  • .FileZilla的使用和主动模式被动模式介绍
  • .NET 4.0中的泛型协变和反变
  • .Net转前端开发-启航篇,如何定制博客园主题
  • /deep/和 >>>以及 ::v-deep 三者的区别
  • [20150904]exp slow.txt
  • [Android] Implementation vs API dependency
  • [BUUCTF]-PWN:wustctf2020_number_game解析(补码,整数漏洞)
  • [C#]C#学习笔记-CIL和动态程序集
  • [GN] DP学习笔记板子