這篇文章主要介紹了基于Bootstrap實(shí)現(xiàn)下拉菜單項(xiàng)和表單導(dǎo)航條(兩個(gè)菜單項(xiàng)，一個(gè)下拉菜單和登錄表單導(dǎo)航條)的相關(guān)資料,需要的朋友可以參考下
效果圖如下所示：
實(shí)現(xiàn)代碼如下：
<!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>導(dǎo)航條</title>
<link rel="stylesheet" href=" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<nav role="navigation">
<div>
<div>
<button type="button" data-toggle="collapse" data-target="#menu">
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<a href="">某管理系統(tǒng)</a>
</div>
<div id="menu">
<ul>
<li><a href="#">首頁</a></li>
<li>
<a href="#" data-toggle="dropdown" role="button">
功能
<span></span>
</a>
<ul>
<li>業(yè)務(wù)功能</li>
<li><a href="#">信息建立</a></li>
<li><a href="#">信息查詢</a></li>
<li><a href="#">信息管理</a></li>
<li role="separetor"></li>
<li>系統(tǒng)功能</li>
<li><a href="#">設(shè)置</a></li>
</ul>
</li>
<li><a href="#">幫助</a></li>
</ul>
<form>
<div>
<input type="text" placeholder="username">
<input type="text" placeholder="password">
<button type="button">登錄</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實(shí)現(xiàn)下拉菜單項(xiàng)和表單導(dǎo)航條(兩個(gè)菜單項(xiàng)，一個(gè)下拉菜單和登錄表單導(dǎo)航條)，希望對大家有所幫助