Bootstrap实现导航栏的2种方式

更新时间：2016年11月28日 10:36:16 作者：塞上江南果

这篇文章主要为大家详细介绍了Bootstrap实现导航栏的2种方式，一是利用按钮组实现、二是Bootstrap专门做了相应的css类,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

前言：导航是一个网站重要的元素组件之一，可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪，五花八门。在下面的内容中，介绍两种制作导航栏的方式。

一、用按钮组实现，代码如下：

<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类，代码如下：

<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即可。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

移动端（微信等使用vConsole调试console的方法
这篇文章主要介绍了移动端（微信等使用vConsole调试console的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
js实现3D图片展示效果
本文主要介绍了js实现3D图片展示效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
同一个网页中实现多个JavaScript特效的方法
这篇文章主要介绍了同一个网页中实现多个JavaScript特效的方法,实例分析了多个特效的实现原理与相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
Javascript模块导入导出详解
这篇文章主要介绍了Javascript模块导入导出详解的相关资料,需要的朋友可以参考下
2022-12-12
使用javascript实现Iframe自适应高度
这篇文章主要介绍了使用javascript实现Iframe自适应高度,需要的朋友可以参考下
2014-12-12
javascript实现炫酷的拖动分页
非常酷的javascript拖动分页功能，无缝循环分页，拖动鼠标即可完成分页，鼠标向左拖动回到前一页，向右拖动则翻开第二页，还带有动画特效，着实很不错，界面黑色，非主流风格，相信很多人会喜欢的。
2015-05-05
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
这篇文章主要为大家详细介绍了Bootstrap富文本组件wysiwyg数据保存到mysql的方法，感兴趣的小伙伴们可以参考一下
2016-05-05
ajax分页效果（bootstrap模态框）
这篇文章主要为大家详细介绍了ajax分页效果的实现方法，结合bootstrap模态框使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
万字详解JavaScript手写一个Promise
这篇文章主要介绍了万字详解JavaScript手写一个Promise，Promise就是一个类，在执行这个类的时候，需要传递一个执行器(回调函数)进去，执行器会立即执行
2022-07-07
JS前端使用Blob和File读取文件的操作代码
JavaScript 无法处理二进制数据。如果一定要处理的话，只能使用 charCodeAt() 方法，一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成 Base64 编码，再进行处理，这篇文章主要介绍了JS前端使用Blob和File读取文件,需要的朋友可以参考下
2022-11-11