zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    java基本数据类型及运算的注意事项
    B-Tree 和 B+Tree 结构及应用,InnoDB 引擎, MyISAM 引擎
    软件工程与软件开发模型、软件开发方法
    2020年3月份Unity3D游戏源码合集-免费下载
    独立游戏开发必备!8个效果不错的Unity3D 免费模型资源包
    2019年4月份整理的Unity3D 20个实用插件-免费下载
    2019年4月份整理的Unity3D游戏完整源码
    2019年3月整理的2D美术资源合集
    画面效果都不错!20个精品Unity3D着色器插件
    Unity3D中UnityPlayerActivity与UnityPlayerNativeActivity有什么区别
  • 原文地址:https://www.cnblogs.com/stono/p/4889084.html
Copyright © 2011-2022 走看看