bootstrap-导航组件

• 对于导航有许多中:基本导航形式,导航条,面包屑导航,分页导航.

导航样式

• 对于导航室友基础的导航样式的,下面先来看基本的结构

• 定义导航基本模型

<div>
	<ul  class="nav">
		<li><a>主页</a></li>
		<li><a>商城</a></li>
		<li><a>咨询</a></li>
		<li><a>个人中心</a></li>
	</ul>
</div>

• nva是最基本的导航模型,所有的导航都是需要将其连接到一个页面上中,所以导航的样式都是以a元素为主的.但是这个时候的导航太大条了,数着显示

• 示例:水平显示导航条

<div>
	<ul  class="nav nav-tabs">
		<li><a>主页</a></li>
		<li><a>商城</a></li>
		<li class="active"><a>咨询</a></li>
		<li><a>个人中心</a></li>
	</ul>
</div>

• 对于导航效果而言,也可以使用胶囊导航模式

• 使用胶囊导航

<ul  class="nav nav-pills">
	<li><a>主页</a></li>
	<li><a>商城</a></li>
	<li class="active"><a>咨询</a></li>
	<li><a>个人中心</a></li>
</ul>

• 如果希望导航可以变为竖排显示,那么尅使用"nav-stacked"

• 使用nav-stacked

<ul  class="nav nav-stacked nav-pills">
	<li><a>主页</a></li>
	<li><a>商城</a></li>
	<li class="active"><a>咨询</a></li>
	<li><a>个人中心</a></li>
</ul>

• 此时发现nav-stacked样式要和"navnav-pills"样式一起使用

• 为了能够让导航能够自适应,所以可以使用"nav.justfied

• 自适应导航

<ul  class="nav nav-stacked nav-pills nav-justified">
	<li><a>主页</a></li>
	<li><a>商城</a></li>