Bootstrap框架中制作导航条主要通过 .nav 样式。默认的 .nav 样式 不提供 默认的导航样式，必须附加另外一个样式才会有效，比如 nav-tabs 、 nav-pills 之类。
<ul> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li><a href="#">JavaScript</a></li></ul>
当然他们同样也有 当前状态 （ .active ）和 禁用状态 （ .disabled ），我们给第一个导航添加当前状态，最后一个导航添加禁用状态，实现效果如下：
修饰
垂直堆叠的导航
在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在 .nav-pills的基础上添加一个 .nav-stacked 类名即可，同时，我们和下拉菜单一样，同样可以使用组之间的分割线例，只需要在导航项之间添加 <li class=”nav-divider”></li> ,如：
<ul> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li></li> <li><a href="#">JavaScript</a></li></ul>
复制到浏览器中看看效果吧！
你应该已经发现了在垂直导航中，每一个导航项都是占 文字居左 ，占100%的父容器宽度的，如果你想有响应式的效果，应该和栅格系统一起使用，另外为什么不试试使用 nav-tabs 来实现垂直导航呢？看看效果，你就会明白为什么不使用了。
自适应导航
自适应导航和前面制作自适应按钮是一样的，不过更换了一个类名， .nav-justified 。当然他需要和 .nav-tabs 或者 .nav-pills
配合在一起使用。 它是响应式的，在宽度足够时，给多个导航项，均分空间；在达到一个临界值（768px）时，它会和垂直导航一样：每一项都充满父容器的宽度，不同的是，他的文字是 居中显示 的
导航中加下拉菜单（二级导航）
前面介绍的都是使用制作一级导航，但很多时候，在Web页面常常会用到二级导航的效果。
在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使用类名 .dropdown ，同时在 li 中嵌套另一个列表 ul
<ul> <li ><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li> <a href="##" data-toggle="dropdown">JavaScript<span></span></a> <ul> <li><a href="##">JQuery</a></li> <li><a href="##">Vue</a></li> … </ul></ul>
这里的话不进行太多的讲解，与上面的嵌套按钮效果一致。
面包屑式导航
面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（ 当前位置 ）。一般在文章、博客、列表处用的比较多，需要用到 .breadcrumb 类。
<ol> <li><a href="#">个人首页</a></li> <li><a href="#">标签</a></li> <li>Bootstrap</li></ol>
可以实现的效果：
是不是很简洁明了呢？
关于Bootstrap入门书籍之（四）菜单、按钮及导航的相关知识就给大家介绍这么多，下篇给大家介绍Bootstrap入门书籍之（五）导航条、分页导航，感兴趣的朋友继续关注，谢谢！
您可能感兴趣的文章: