Bootstrap下拉菜单
基本用法
-
新建一个web项目ch10，然后把ch09里面的内容复制过来。
-
2.打开ch10中的demo01，删除上节课里面的内容并且导入jquery。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>demo01</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
<script language="JavaScript" src="js/bootstrap.min.js"></script>
</head>
3.做一个带小三角的下拉菜单实例
1）下拉菜单
<div class="container">
<div class="dropdown col-sm-3 col-sm-offset-2">
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-user"></span>
（注意：可以添加自己喜欢的小图标，做法和之前讲的一样。）
<span class="caret"></span>
</button>
运行效果：
2）接下来，做点击向下三角符号出来的子菜单。
（注意：我们要在按钮上添加一个这样的属性data-toggle="dropdown"，否则点击下拉菜单时会没有反应。）
<button type="button" class="btn btn-danger" data-toggle="dropdown" >
（总的菜单项我们用<ul>和<li>来做：）
运行效果：
4.注意：下拉菜单的做法基本就是这样的，格式上就是首先我们给一个大的容器dropdown，然后给一个按钮（这个可以是<button>标签或者<a>标签都行，加图标也行），比如我们可以在这给个汉字“用户”。接下来是<ul>和<li>标签，是具体来做下拉菜单的每一项，记住它的类选择器一定是给dropdown-menu。最后记住在<button>标签里面一定要有data-toggle="dropdown"这个属性。
<span class="glyphicon glyphicon-user"></span>
用户
<span class="caret"></span>
运行效果：
对齐
1.下拉框默认是左对齐的，当然我们也可以设置右对齐
<ul class="dropdown-menu dropdown-menu-right">
2.运行效果
3.设置左对齐
<ul class="dropdown-menu dropdown-menu-left">
4.运行效果
标题
1.设置标题
（下拉菜单的这一项是标题，当鼠标移动到这一项时是选不中的。）
<li class="dropdown-header">文件管理</li>
2.运行效果
分隔线
1）分隔线我们再加一个类选择器叫divider，分割线让上面这个<li>和下面这个<li>离了大约 9个像素的距离。
<li><a href="#">文件</a></li>
<li class="divider"></li>
<li><a href="#">文件</a></li>
2）运行效果
禁用菜单
1.禁用菜单的用法就是在<li>上加一个class=“disable”
<li class="disabled"><a href="#">Disabled link</a></li>
2.运行效果：
3.设置下拉菜单class=”active”
<li class="active"><a href="#"> 文件</a></li>
（就是给文字默认设了一个蓝色的背景并且文字变成白色）
4.运行效果
5.菜单项上也可以用图标
<li class="active"><a href="#">
<span class="glyphicon glyphicon-off"></span>
文件</a></li>
6.运行效果
扫一扫
3234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
