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>
复制代码

 

posted @   stono  阅读(141)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
点击右上角即可分享
微信分享提示
主题色彩