Boot快速制作导航栏应用详解

导航栏制作详解

最简单之水平导航栏

首先，上一个最基础的水平导航栏，水平导航栏结构简单，代码清晰，有助于我们理解使用Boot构建导航栏的基本思想。

xml 复制代码

<ul class="nav nav-justified bg-dark text-white">
	<li class="nav-item"><a href="#" class="nav-link">1</a></li>
	<li class="nav-item"><a href="#" class="nav-link">2</a></li>
	<li class="nav-item"><a href="#" class="nav-link">3</a></li>
	<li class="nav-item"><a href="#" class="nav-link">4</a></li>
</ul>

可以看到，水平导航栏是简单的ul>li>a结构，这也是制作导航栏的基础结构。

其中，ul作为导航栏部分最外层的父元素，其基本类是nav；li基本类为nav-item；li中包含有a，a的基本类为nav-link。

创建ul>li>a架构，填充基本类，再填充一个控制ul位置的类，如nav-justified(项目等宽显示)，就可以构成一个水平导航栏。

值得说明的是，nav类的本质为以x为主轴可换行的弹性盒子，故作用与弹性盒子的类都可以与之替换，如可用ustify-content-end(项目右对齐)来代替nav-justified来控制导航栏的位置。

选项卡导航栏与胶囊导航栏

选项卡导航栏与胶囊导航栏为水平导航栏的变种，两者结构类似。

选项卡导航栏

xml 复制代码

<ul class="nav justify-content-end nav-tabs">
	<li class="nav-item"><a data-toggle="tab" href="#d1" class="nav-link">1</a></li>
	<li class="nav-item"><a data-toggle="tab" href="#d2" class="nav-link">2</a></li>
	<li class="nav-item"><a data-toggle="tab" href="#d3" class="nav-link active">3</a></li>
	<li class="nav-item"><a data-toggle="tab" href="#d4" class="nav-link">4</a></li>
</ul>

胶囊导航栏

xml 复制代码

<ul class="nav nav-pills">
	<li class="nav-item"><a data-toggle="pill" class="nav-link" href="#d5">1</a></li>
	<li class="nav-item"><a data-toggle="pill" class="nav-link active" href="#d6">2</a></li>
	<li class="nav-item"><a data-toggle="pill" class="nav-link" href="#d7">3</a></li>
	<li class="nav-item"><a data-toggle="pill" class="nav-link" href="#d8">4</a></li>
</ul>

可以看到，两者与水平导航栏，三者之间的导航栏部分基本类似，都为ul>li>a架构，再填充基本类的格式，justify-content-end为弹性项目右对齐，不添加即为默认左对齐。

选项卡导航栏仅在水平导航栏的基础上，在外层ul中增加了nav-tabs类，内层li中增加自定义属性data-toggle="tab" ,用以控制导航栏外观。

胶囊导航栏与选项卡导航栏类似，为在外层ul中增加了nav-pills类，内层li中增加自定义属性data-toggle="pill" 。

导航栏绑定内容

有时，我们希望点击不同的导航栏出现不同的对应的内容。Boot也为此做了对应类。

ini 复制代码

<div class="tab-content">
	<div id="d1" class="tab-pane">第一导航内容</div>
	<div id="d2" class="tab-pane">第二导航内容</div>
	<div id="d3" class="tab-pane active">第三导航内容</div>
	<div id="d4" class="tab-pane">第四导航内容</div>
</div>

如上代码，Boot将需要根据导航栏显示的*内容用tab-content类包裹起来，内层根据对应的导航栏中的项目的不同，使用N个子div包裹起来。

子div需要写明id，id被用来作为连接导航栏的纽带，在导航栏项目(li>a)中，以href="#d1"的形式体现出来。

所以被导航栏绑定的内容需要写一个父级div与N个子div，父div的基本类为tab-content，子div的基本类为tab-pane*。

如此，完成导航栏与内容后，点击导航栏中的项目，将出现对应id的内容。

折叠导航栏

折叠导航栏有两个要点，分别为折叠与导航栏，折叠是指在小屏时，默认导航栏内容隐藏，取代的是一个可以控制导航栏内容显示与隐藏的折叠按钮，显示方式类似于下拉框。

导航栏部分的特殊之处在于，在大屏时横向排列，在小屏时纵向排列。

所以折叠导航栏的实现效果为，大屏中直接显示导航栏，导航栏横向显示，小屏时隐藏导航栏，显示折叠按钮，点击按钮导航栏内容向下排列展开。

折叠按钮实现

ini 复制代码

<button data-target="#d9" class="btn btn-info" data-toggle="collapse">折叠按钮</button>
<div id="d9" class="collapse"></div>

折叠功能的实现由一个折叠开关(button)与一个 折叠内容(div)组成，折叠开关需要添加折叠基本属性data-toggle="collapse" ，根据id写明其折叠内容data-target="#d9"。

折叠内容需要写明id，用来作为连接折叠开关的纽带，折叠内容需要写基本类collapse。

折叠导航栏部分的响应式变化

折叠导航栏部分需要根据浏览器设备大小不同来变化导航栏的排列方向，这部分的实现也很简单。

xml 复制代码

<div class="navbar bg-dark navbar-expand-md">
	<ul class="navbar-nav">
		<li class="nav-item"><a class="nav-link" href="#">第一导航</a></li>
		<li class="nav-item"><a class="nav-link" href="#">第二导航</a></li>
		<li class="nav-item"><a class="nav-link" href="#">第三导航</a></li>
		<li class="nav-item"><a class="nav-link" href="#">第四导航</a></li>
	</ul>
</div>

为更好的控制界面，__复杂的导航栏通常设置一个外层div__来帮助实现功能，为__div>ul>li>a__结构，此时，由于导航栏部分最外层不再是ul，而是div，对应的基本类也发生了变化。

外层div的基本类为navbar，ul的基本类由nav变为为navbar---item，li与a的基本类不变，仍旧为nav-item与nav-link。

外层div设置了_navbar-expand-md类来进行响应式变化_，其中md为中屏含义，代表此类的变化以中屏为界限，与此类似的标志还有lg，sm等屏幕标志。

在上面这段代码中，navbar-expand-md类仅用来控制导航栏的排列方式，当屏幕大于md时，导航栏横向显示，否则导航栏纵向显示。实际上，在下文我们将提到，结合其他的类，此类作用巨大，是实现折叠导航栏的重要砖瓦。

折叠导航栏实现

xml 复制代码

<div class="navbar navbar-expand-md navbar-dark bg-dark">
	<a href="#" class="navbar-brand">Bootstrap中文网</a>
	<button data-toggle="collapse" data-target="#card0" class="navbar-toggler">
		<spam class="navbar-toggler-icon"></spam>
	</button>			
		
	<div class="collapse navbar-collapse" id="card0">
		<ul class="navbar-nav">
			<li class="nav-item"><a class="nav-link" href="#">Boot3</a></li>
			<li class="nav-item"><a class="nav-link" href="#">Boot4</a></li>
			<li class="nav-item"><a class="nav-link" href="#">Less教程</a></li>
			<li class="nav-item"><a class="nav-link" href="#">jQuery API</a></li>
		</ul>
	</div>
</div>

如上，最外层的div将整个导航栏代码包裹起来，导航栏代码分为不被折叠的标题，折叠按钮，和响应式折叠的导航栏内容三部分。

响应式折叠的导航栏内容被一个div包裹起来，此div拥有折叠基础类collapse，拥有id，id于折叠按钮中使用自定义属性data-target="#card0"指向的id相同，用以连接折叠开关和折叠内容，div中的ul>li>a基础类不变。

.navbar-expand-md作用：

配合button.navbar-toggler让按钮md以上隐藏，md以下显示
让隐藏的div.collapse.navbar-collapse在md以上显示，在md以下隐藏
配合ul.navbar-nav让li在md以上横向，在md以下纵向

.navbar-dark控制三件事：

让不隐藏的a.navbar-brand变浅色
让span.navbar-toggler-icon变成浅色
让a.nav-link变成浅色

没有让导航栏变为深色，所以需要写bg-dark