摘要：前言：导航是一个网站重要的元素组件之一，可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪，五花八门。在下面的内容中，介绍两种制作导航栏的方式。一、用按钮组实现，代码如下：<div style="width:100%; background:#ff0">
<div class="btn-gr
前言：导航是一个网站重要的元素组件之一，可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪，五花八门。在下面的内容中，介绍两种制作导航栏的方式。
一、用按钮组实现，代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div style="width:100%; background:#ff0">
<div class="btn-group">
<button class="btn btn-default" type="button">首页</button>
<button class="btn btn-default" type="button">产品展示</button>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">联系我们</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">公司简介</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">组织结构</a></li>
<li><a href="#">客服服务</a></li>
</ul>
</div>
</div>
</div>
|
二、Bootstrap为导航专门做了相应的css类，代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div style="width:100%; background:#ff0">
<ul class="nav nav-pills nav-justified">
<li><a href="##">首页</a></li>
<li><a href="##">联系我们</a></li>
<li><a href="##">产品展示</a></li>
<li class="dropdown">
<a href="##" class="dropdown-toggle" data-toggle="dropdown">关于我们<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">公司简介</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">组织结构</a></li>
<li><a href="#">客服服务</a></li>
</ul>
</li>
</ul>
</div>
|
如果想要将导航栏设为垂直显示，第一中方法在div.btn-group后追加.btn-group-vertical就可以，第二种在div.nav后追加.nav-stacked即可。
