导航条简单地说就是对你整个网站模块的简单介绍，你可以直接点击导航条某一个按钮或板块便可进入其相应的界面，如：网页、新闻、贴吧等。在企业网站上，导航条上常见的有：产品介绍，公司简介，最新产品，联系我们。
而现在导航条的编写方式多种多样，如：CSS、Jquery、Bootstrap等。而在这里就和大家简单的介绍如何用Bootstrap编写一个网页导航条，由于本人习惯用HBuilder进行编写，所以就在HBuilder和大家进行编码展示。
首先打开HBuilder，单击左上角“文件”--“新建”--“web项目”，然后随便取一个项目名称，我们这里就取导航栏，位置选一个自己能找到的的地方就行，我这里位置放在桌面，其它的不用管，单击完成就好了。
接下来选中建好的项目，鼠标右键单击选择”新建“--”HTML文件“，文件所在目录不用变，文件名我们这里就写导航条，其余依旧不用管，然后点击完成。
差不多就好了，接下来开始配置环境，首先下载Bootstrap插件和Jquery插件，将下载好的插件解压，根据后缀名分别复制到导航栏项目下的CSS和JS文件中。
环境配置好了，接下来开始编写。
title导航条/title，这里名字取为导航条。
然后开始对插件进行引用。（插件需要进行引用，否则没用。）
linkrel=stylesheettype=text/csshref=css/bootstrap.min.css/
link是标签的一种，用于定义文档与外部资源的关系。这种标签是空标签，它仅包含属性，link标签没有结束标签。另外，link标签位置一般写在head标签之内，用来连接外部的文件。rel=stylesheettype=text/css是固定写法，不可修改，rel是relationship的英文缩写，也就是“关系”，stylesheet中style是样式的意思，sheet是表格之意，总起来是样式表的意思，rel=stylesheet的意思就很明显了：描述了当前页面与href所指定文档的关系。即说明的是，href连接的文档是一个新样式表，后面是插件所在地址。
scriptsrc=js/jquery-3.3.1.min.js/script
scriptsrc=js/bootstrap.min.js/script
src属性规定外部脚本文件的URL（插件位置）。我们需要在网站的多个页面中运行JavaScript。不需要重复编写相同的脚本，只需在单独的文件中创建JavaScript，并以.js为后缀保存，然后使用script标签中的src属性引用该文件即可。
然后开始对body/body进行编写，由于篇幅关系就不再进行详细介绍，接下来看代码。如下：
!DOCTYPEhtml
html
head
metacharset=UTF-8
title导航条/title
linkrel=stylesheettype=text/csshref=css/bootstrap.min.css/
scriptsrc=js/jquery-3.3.1.min.js/script
scriptsrc=js/bootstrap.min.js/script
/head
body
div
divclass=container
divclass=row
divclass=col-md-12
divclass=navbarnavbar-defaultnavbar-inverserole=navigation
divclass=navbar-header
ahref=##class=navbar-brandXXXX/a
/div
ulclass=navnavbar-nav
liclass=activeahref=##网站首页/a/li
liahref=##小说/a/li
liahref=##电影/a/li
liahref=##网站介绍/a/li
liclass=dropdown
ahref=##data-toggle=dropdownclass=dropdown-toggle更多spanclass=caret/span/a
ulclass=dropdown-menu
liahref=##广告投放/a/li
liclass=disabledahref=##管理员权限/a/li
liahref=##关于我们/a/li
liahref=##联系客服/a/li
/ul
/li
/ul
formaction=##class=navbar-formnavbar-rightrol=search
divclass=form-group
inputtype=textclass=form-controlplaceholder=请输入关键词/
/div
buttontype=submitclass=btnbtn-default搜索/button
/form
/div
/div
/div
/div
/div
/body
/html
今天的介绍到这里就结束了，如果大家有什么疑问或不懂得地方可以留言或私信，如有需要可以再做一期具体介绍。
谢谢大家。