不管怎样，生活还是要继续向前走去。有的时候伤害和失败不见得是一件坏事，它会让你变得更好，孤单和失落亦是如此。每件事到最后一定会变成一件好事，只要你能够走到最后。纸上得来终觉浅，绝知此事要躬行。
前言：导航是一个网站重要的元素组件之一，可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪，五花八门。在下面的内容中，介绍两种制作导航栏的方式。
一、用按钮组实现，代码如下：
<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 rel="nofollow noopener noreferrer" href="#">公司简介</a></li> <li><a rel="nofollow noopener noreferrer" href="#">企业文化</a></li> <li><a rel="nofollow noopener noreferrer" href="#">组织结构</a></li> <li><a rel="nofollow noopener noreferrer" href="#">客服服务</a></li> </ul> </div> </div> </div>
二、Bootstrap为导航专门做了相应的css类，代码如下：
<div style="width:100%; background:#ff0"> <ul class="nav nav-pills nav-justified"> <li><a rel="nofollow noopener noreferrer" href="##">首页</a></li> <li><a rel="nofollow noopener noreferrer" href="##">联系我们</a></li> <li><a rel="nofollow noopener noreferrer" href="##">产品展示</a></li> <li class="dropdown"> <a rel="nofollow noopener noreferrer" href="##" class="dropdown-toggle" data-toggle="dropdown">关于我们<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a rel="nofollow noopener noreferrer" href="#">公司简介</a></li> <li><a rel="nofollow noopener noreferrer" href="#">企业文化</a></li> <li><a rel="nofollow noopener noreferrer" href="#">组织结构</a></li> <li><a rel="nofollow noopener noreferrer" href="#">客服服务</a></li> </ul> </li> </ul> </div>
如果想要将导航栏设为垂直显示，第一中方法在div.btn-group后追加.btn-group-vertical就可以，第二种在div.nav后追加.nav-stacked即可。
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习好代码教程
Bootstrap实战好代码教程
Bootstrap插件使用好代码教程
以上就是Bootstrap实现导航栏的2种方式。部下的素质低，不是你的责任；但不能提高部下的素质，是你的责任。更多关于Bootstrap实现导航栏的2种方式请关注haodaima.com其它相关文章！