本文介绍如何使用Bootstrap创建一个响应式的下拉菜单。通过引入必要的JS和CSS文件，并正确配置HTML结构，解决下拉菜单不显示的问题。文章还提供了一个完整的示例代码。
下载了bootstrap以后，最关键的文件夹，就是dist，基础使用只要引入这里面的文件就可以
解决了两个晚上了。目标：一个下拉菜单，其实是<a>，点了以后，下面就是菜单，本来是要放在页头的导航栏里面的，但是，引用了以后，没有反应
要引用的包，基本的有
<script src="dist/js/jquery-1.9.1.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
这里要特别说明一下，
第一，在idea里面建立了静态工程，这个工程下面直接建立html，然后放dist目录，这样就可以使用了。
第二， src="dist/js/bootstrap.min.js"，不能写成src="/dist/js/bootstrap.min.js"，因为是相对路径
第三，jquery-1.9.1.min.js，不需要改成jquery.min.js，也是可以的
第四，如果这样还是不能得到下拉菜单，可能就是hmtl有问题，之前没有注意这个问题
第五，虽然这里只要引入这3个文件就可以了，其实还有其它东西，可以引用，只是这里不需要，要引用其它东西，就只能继续学习
完整的hmtl如下：
<!DOCTYPE html>
<html>
<head>
<script src="dist/js/jquery-1.9.1.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</body>
</html>
解决了两个晚上了。目标：一个下拉菜单，其实是<a>，点了以后，下面就是菜单，本来是要放在页头的导航栏里面的，但是，引用了以后，没有反应
要引用的包，基本的有
<script src="dist/js/jquery-1.9.1.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
这里要特别说明一下，
第一，在idea里面建立了静态工程，这个工程下面直接建立html，然后放dist目录，这样就可以使用了。
第二， src="dist/js/bootstrap.min.js"，不能写成src="/dist/js/bootstrap.min.js"，因为是相对路径
第三，jquery-1.9.1.min.js，不需要改成jquery.min.js，也是可以的
第四，如果这样还是不能得到下拉菜单，可能就是hmtl有问题，之前没有注意这个问题
第五，虽然这里只要引入这3个文件就可以了，其实还有其它东西，可以引用，只是这里不需要，要引用其它东西，就只能继续学习
完整的hmtl如下：
<!DOCTYPE html>
<html>
<head>
<script src="dist/js/jquery-1.9.1.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</body>
</html>
扫一扫
1219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
