導航條簡單地說就是對你整個網站模塊的簡單介紹，你可以直接點擊導航條某一個按鈕或板塊便可進入其相應的界面，如：網頁、新聞、貼吧等 。在企業網站上，導航條上常見的有：產品介紹，公司簡介，最新產品，聯繫我們。
而現在導航條的編寫方式多種多樣，如：CSS、Jquery、Bootstrap等。而在這裡就和大家簡單的介紹如何用Bootstrap編寫一個網頁導航條，由於本人習慣用HBuilder進行編寫，所以就在HBuilder和大家進行編碼展示。
首先打開HBuilder，單擊左上角「文件」-->「新建」-->「web項目」，然後隨便取一個項目名稱，我們這裡就取導航欄，位置選一個自己能找到的的地方就行，我這裡位置放在桌面，其它的不用管，單擊完成就好了。
接下來選中建好的項目，滑鼠右鍵單擊選擇」新建「-->」HTML文件「，文件所在目錄不用變，文件名我們這裡就寫導航條，其餘依舊不用管，然後點擊完成。
差不多就好了，接下來開始配置環境，首先下載Bootstrap插件和Jquery插件，將下載好的插件解壓，根據後綴名分別複製到導航欄項目下的CSS和JS文件中。
環境配置好了，接下來開始編寫。
<title>導航條</title>，這裡名字取為導航條。
然後開始對插件進行引用。（插件需要進行引用，否則沒用。）
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link>是標籤的一種， 用於定義文檔與外部資源的關係。這種標籤是空標籤，它僅包含屬性，<link> 標籤沒有結束標籤。另外，<link>標籤位置一般寫在<head>標籤之內，用來連接外部的文件。rel="stylesheet" type="text/css" 是固定寫法，不可修改，rel是relationship的英文縮寫，也就是「關係」，stylesheet中style是樣式的意思，sheet是表格之意，總起來是樣式表的意思，rel="stylesheet" 的意思就很明顯了：描述了當前頁面與href所指定文檔的關係。即說明的是，href連接的文檔是一個新樣式表，後面是插件所在地址。
<script src="js/jquery-3.3.1.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>
src 屬性規定外部腳本文件的 URL（插件位置）。我們需要在網站的多個頁面中運行 JavaScript。不需要重複編寫相同的腳本，只需在單獨的文件中創建 JavaScript，並以 .js 為後綴保存，然後使用 <script> 標籤中的 src 屬性引用該文件即可。
然後開始對<body></body>進行編寫，由於篇幅關係就不再進行詳細介紹，接下來看代碼。如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>導航條</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery-3.3.1.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>
</head>
<body>
<div>
<div>
<div>
<div>
<div role="navigation">
<div>
<a href="##">XXXX</a>
</div>
<ul>
<li><a href="##">網站首頁</a></li>
<li><a href="##">小說</a></li>
<li><a href="##">電影</a></li>
<li><a href="##">網站介紹</a></li>
<li>
<a href="##" data-toggle="dropdown">更多<span></span></a>
<ul>
<li><a href="##">廣告投放</a></li>
<li><a href="##">管理員權限</a></li>
<li><a href="##">關於我們</a></li>
<li><a href="##">聯繫客服</a></li>
</ul>
</li>
</ul>
<form action="##" rol="search">
<div>
<input type="text" placeholder="請輸入關鍵詞" />
</div>
<button type="submit">搜索</button>
</form>
</div>
</div>
</div
</div>
</div>
</body>
</html>
今天的介紹到這裡就結束了，如果大家有什麼疑問或不懂得地方可以留言或私信，如有需要可以再做一期具體介紹。
謝謝大家。