《基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项一个下拉菜单和登录表单导航条)》由会员分享，可在线阅读，更多相关《基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项一个下拉菜单和登录表单导航条)（2页珍藏版）》请在金锄头文库上搜索。
1、这篇文章主要介绍了基于 Bootstrap实现下拉菜单项和表单导航条（两个菜单项，一个下 拉菜单和登录表单导航条）的相关资料，需要的朋友可以参考下效果图如下所示：实现代码如下：& lt;!DOCTYPE html >& lt;html la ng=zh-cn>& lt;head >& lt;meta charset=utf-8>& lt;meta http-equiv=X-UA-Compatible conten t=IE=edge >& lt;meta n ame=viewport conten t=width=device-width, i nitial-sc
2、ale=1><title>导航条 </title>& lt;li nkrel=stylesheethref=n etd na.bootstrapcd n. com/bootstrap/3.1.1/css/bootstrap. min. css ></head >& lt;body >< nav class=n avbar n avbar-default n avbar-fixed-top role=n avigati on& gt;<div class=c ontainer& gt;<div class=n avbar-h
3、eader><butt ontype=butt onclass=n avbar-togglecollapsed data-toggle=collapsedata-target=#me nu><spa n class=sr- only& gt ;& lt;/spa n& gt;<spa n class=ic on-bar> ;</spa n& gt;<spa n class=ic on-bar> ;</spa n& gt;<spa n class=ic on-bar> ;</spa n& gt;</butto n& g
4、t;<a href= class=navbar-brand> 某管理系统 </a></div><div class=collapase n avbar-collapse id=me nu><ul class=nav n avbar- nav><li class=active><a href=#>首页 </a></li><li class=dropdow n& gt;<a href=# data-toggle=dropdow n role=butt on>功能<sp
5、a n class=caret > ;</spa n></a><ul class=dropdow n-menu& gt;<li class=dropdown-header>业务功能 </li><li><a href=#>信息建立 </a></li><li><a href=#>信息查询 </a></li>&t;li><a href=#>信息管理 </a></li>& lt;li role=separet
6、or class=divider></li><li class=dropdown-header>系统功能 </li>&It;li><a href=#>设置 </a></li>& lt;/ul >& t;/li >&It;li><a href=#>帮助 </a></li>& lt;/ul >& lt;form class=n avbar-form n avbar-right><div class=form-group><i npu
7、t type=text class=form-c on trol placeholder=user name ><i nput type=text class=form-c on trol placeholder=password >& lt;butt on type=butt on class=btn btn-default>登录& lt;/butto n& gt;</div></form ></div></div>& lt;/nav><script src=http:/cd n. min.js></script><script src=http:/cd n. min.js> ;& lt;/script >& t;/body >& lt;/html>以上所述是小编给大家介绍的基于Bootstrap实现下拉菜单项和表单导航条（两个菜单项，一个下拉菜单和登录表单导航条），希望对大家有所帮助
