Bootstrap中导航条和分页导航如何实现

这篇文章主要介绍Bootstrap中导航条和分页导航如何实现，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联是一家企业级云计算解决方案提供商,超15年IDC数据中心运营经验。主营GPU显卡服务器，站群服务器，IDC机房托管，海外高防服务器，成都机柜租用，动态拨号VPS，海外云手机，海外云服务器，海外服务器租用托管等。

本篇文章带大家了解一下Bootstrap中的导航条和分页导航，顺带介绍一下标签和徽章，希望对大家有所帮助！

1、导航条基础

导航条（navbar）和上一节介绍的导航（nav），就相差一个字，多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。

2、基础导航条

在Bootstrap框中，导航条和导航从外观上差别不是太多，但在实际使用中导航条要比导航复杂得多。

使用方法：

在制作一个基础导航条时，主要分以下几步：

第一步：首先在制作导航的列表(

)基础上添加类名“navbar-nav” 第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”

原理分析：

而导航条的颜色都是通过“.navbar-default”来进行控制。

3、为导航条添加标题、二级菜单及状态

在Web页面制作中，常常在菜单前面都会有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为大家做了这方面考虑，其通过“navbar-header”和“navbar-brand”来实现，此功能主要起一个提醒功能，当然改良一下可以当作是logo(此处不做过多阐述)。其样式主要是加大了字体设置，并且设置了最大宽度，同样在默认导航条（navbar-default）下，对navbar-brand也做了颜色处理，同样的，在基础导航条中对菜单提供了当前状态，禁用状态，悬浮状态等效果，而且也可以带有二级菜单的导航条。

4、带表单的导航条

在Bootstrap框架中提供了一个“navbar-form”，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单，在Bootstrap框架中，还提供了“navbar-right”样式，让元素在导航条靠右对齐。这里有一个条件，只有当浏览器视窗宽度大于768px生效。

5、导航条中的按钮、文本和链接

Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素。框架提供了三种其他样式：

1）导航条中的按钮navbar-btn

2）导航条中的文本navbar-text

3）导航条中的普通链接navbar-link

但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

6、固定导航条

很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式：

☑  .navbar-fixed-top：导航条固定在浏览器窗口顶部

☑  .navbar-fixed-bottom：导航条固定在浏览器窗口底部

使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可。

　…