基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项，一个下拉菜单和登录表单导航条)

前端技术 2023/09/03 JavaScript

效果图如下所示：

实现代码如下：

<!DOCTYPE html>
<html lang=\"zh-cn\">
<head>
<meta charset=\"utf-8\">
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<title>导航条</title>
<link rel=\"stylesheet\" href=\" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css\">
</head>
<body>
<nav class=\"navbar navbar-default navbar-fixed-top\" role=\"navigation\">
<div class=\"container\">
<div class=\"navbar-header\">
<button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#menu\">
<span class=\"sr-only\"></span>
<span class=\"icon-bar\"></span>
<span class=\"icon-bar\"></span>
<span class=\"icon-bar\"></span>
</button>
<a href=\"\" class=\"navbar-brand\">某管理系统</a>
</div>
<div class=\"collapase navbar-collapse\" id=\"menu\">
<ul class=\"nav navbar-nav\">
<li class=\"active\"><a href=\"#\">首页</a></li>
<li class=\"dropdown\">
<a href=\"#\" data-toggle=\"dropdown\" role=\"button\">
功能
<span class=\"caret\"></span>
</a>
<ul class=\"dropdown-menu\">
<li class=\"dropdown-header\">业务功能</li>
<li><a href=\"#\">信息建立</a></li>
<li><a href=\"#\">信息查询</a></li>
<li><a href=\"#\">信息管理</a></li>
<li role=\"separetor\" class=\"divider\"></li>
<li class=\"dropdown-header\">系统功能</li>
<li><a href=\"#\">设置</a></li>
</ul>
</li>
<li><a href=\"#\">帮助</a></li>
</ul>
<form class=\"navbar-form navbar-right\">
<div class=\"form-group\">
<input type=\"text\" class=\"form-control\" placeholder=\"username\">
<input type=\"text\" class=\"form-control\" placeholder=\"password\">
<button type=\"button\" class=\"btn btn-default\">登录</button>
</div>
</form>
</div>
</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>

以上所述是小编给大家介绍的基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项，一个下拉菜单和登录表单导航条)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/8490

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案