bootstrap实现下拉菜单需要的链接引入

最新推荐文章于 2026-06-29 09:13:56 发布

原创最新推荐文章于 2026-06-29 09:13:56 发布 · 1.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web前端

博主分享了在使用Bootstrap框架时遇到下拉菜单无法正常显示的问题及其解决过程。通过按照菜鸟教程设置环境并尝试引入Flat-UI包，仍然无法解决问题。最终发现是由于jQuery与Bootstrap的导入顺序错误，调整顺序后成功实现下拉菜单。博客记录了这一学习历程，虽然技术含量不高，但表达了坚持写作和提高的决心。

我理解的bootstrap框架就是定义了一些常用HTML元素的样式，把bootstrap包导入到HTML后，不必自己定义样式，可以直接引用定义好的样式。

我理解bootstrap框架就是定义了一些常用HTML元素的样式，把bootstrap包导入到HTML后，不必自己定义样式，可以直接引用定义好的样式。

但是最初在导入bootstrap时也遇到了很多问题。我是按照菜鸟教程http://www.runoob.com/bootstrap/bootstrap-environment-setup.html上环境安装的教程来下载部署的，但是按照上面教程导入后，发现下拉菜单不能下拉，有的样式也不完整。然后百度这个问题，有人回答需要Flat-UI的包。于是导入了Flat-UI的包，这时候样式比较完整了，但依然不能下拉菜单。关于下拉菜单不能正常显示这个问题，说的最多的原因是jquery和bootstrap的导入顺序错误，因为bootstrap的实现是依赖于jQuery的，所以要先导入jquery再导入bootstrap，这一点我记住了，不过我的导入顺序是没有错的，我的问题不在这里。最终是在百度知道看到一个回答，那个人贴出了他的html代码，说实验过是可以实现下拉菜单的，我适用了他的代码也是可以的。就沿用了他导入的代码。这里想记录一下。

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
   <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
   <link href="http://cdn.bootcss.com/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
   <link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
</head>

<body>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="">会议室管理系统</a>
    </div>
    <div>
		<ul class="nav navbar-nav">
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					会议室管理
					<b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
					<li><a href="">添加会议室</a></li>
					<li><a href="#">删除会议室</a></li>
					<li><a href="#">修改会议室</a></li>
				</ul>
			</li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					用户管理
					<b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
					<li><a href="#">添加用户</a></li>
					<li><a href="#">删除用户</a></li>
					<li><a href="#">修改用户</a></li>
				</ul>
			</li>
			<li><a href="#">会议室预订记录</a></li>
		</ul>
	</div>
    <ul class="nav navbar-nav navbar-right">
      <li><a href=""></span> 注销</a></li>
    </ul>
  </div>
</nav>

   <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

其中，关键的导入代码是

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
   <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
   <link href="http://cdn.bootcss.com/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
   <link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
</head>

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

第一次写博客，不会排版，技术性也不高，逻辑也不清晰。

希望能坚持写博客，能写的越来越好！

标签

#bootstrap #下拉菜单 #css