您的位置：首页 > Web前端 > BootStrap

Bootstrap 下拉菜单

2015-10-18 10:34 495 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航