| 
1、导航条TS
导航条（navbar）和上一节先容的导航（nav），就收支一个字，多了一个“条”字。其确凿Bootstrap框架中他们照旧显然的区别。在导航条(navbar)中有一个背雅瞻念（流露更隆起）、而且导航条不错是纯聚合（雷同导航），也不错是表单，还有等于表单和导航总计引诱等多种体式。在这一节中将总计探讨Bootstrap框架中导航条的使用。
导航条和导航一样，在Bootstrap框架中是一个孤苦组件，是以你也不错把柄我方的需求使用不同的版块：
LESS版块：对应的源文献navbar.less Sass版块：对应的源文献_navbar.scss
编译后的版块：放哨bootstrap.css文献第3642行～第4111行（详确这个所说的Bootstrap版块是3.1.1，其它版块位置是不一致的）。
2、基础导航条
在Bootstrap框中，导航条和导航从外不雅上折柳不是太多，但在骨子使用中导航条要比导航复杂得多。咱们先来看导航条中最基础的一个——基础导航条。
1）、使用次第：
在制作一个基础导航条时，主要分以下几步：
第一步：率先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”
第二步：在列表外部添加一个容器（div），何况使用类名“navbar”和“navbar-default”
".navbar”相貌的主邀功能等于缔造控制padding和圆角等成果，但他和相貌关系的相貌莫得进行任何的缔造。其主要源码如下：
/源码放哨bootstrap.css文献第3642行～第3647行/
2）、旨趣分析：
而导航条的相貌都是通过“.navbar-default”来进行范畴：
/源码放哨bootstrap.css文献第3940行～第3943行/
navbar-nav相貌是在导航.nav的基础上再行退换了菜单项的浮动与表里边距。同期也不包括相貌等相貌缔造，源码请放哨bootstrap.css文献第3785行～第3830行，咱们把代码节选出来放入右侧bootstrap.css中。
而相貌和其他相貌是通过和洽父容器“navbar-default”来总计竣事：
/源码请放哨bootstrap.css文献第3955行～第3974行/
3、为导航条添加标题、二级菜单及景况
1）、加入导航条标题
在Web页面制作中，时时在菜单前边都会有一个标题（翰墨字号比其它翰墨稍大一些），其确凿Bootstrap框架也为公共作念了这方面议论，其通过“navbar-header”和“navbar-brand”来竣事。
2）、旨趣分析： 香蕉在线精品视频在线
此功能主要起一个领导功能，固然改变一下不错动作是logo(此处不作念过多发扬)。其相貌主若是加大了字体缔造，何况缔造了最大宽度：
/源码放哨bootstrap.css文献第3739行～第3755行/
雷同在默许导航条（navbar-default）下，对navbar-brand也作念了相貌处理：
/源码请放哨bootstrap.css文献第3947行～3951行/
3）、导航条景况、二级菜单
雷同的，在基础导航条中对菜单提供了现时景况，禁用景况，悬浮景况等成果，而且也不错带有二级菜单的导航条。
成果图如下：
4、带表单的导航条
有的导航条中会带有搜索表单，比如新浪微博的导航条：
在Bootstrap框架中提供了一个“navbar-form”，使用次第很简单，在navbar容器中甩掉一个带有navbar-form类名的表单。
竣事导航条+表单的相貌代码源码请放哨bootstrap.css文献第3839行～第3904行.
在上头的示例中，公共看到了“navbar-left”让表单左浮动，更好竣事对王人。在Bootstrap框架中，还提供了“navbar-right”相貌，让元素在导航条靠右对王人。
/源码请放哨bootstrap.css文献第3831行～第3838行/
详确：这里有一个要求，只消当浏览器视窗宽度大于768px奏效。
5、导航条中的按钮、文本和聚合
Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form以外，还不错使用其他元素。框架提供了三种其他相貌：
1、导航条中的按钮navbar-btn
2、导航条中的文本navbar-text
3、导航条中的鄙俚聚合navbar-link
但这三种相貌在框架中使用时受到一定的结尾，需要和navbar-brand、navbar-nav和洽起来使用。而且对数目也有一定的结尾，一般情况在使用一到两个不会有问题，向上两个就会有问题。
先来望望这三种相貌对应的源码：
/源码请放哨bootstrap.css文献第3914行～第3939行/
navbar-btn和navbar-link在上一末节也曾讲过，咫尺咱们来看一下navbar-text的一个简单行使
在结尾窗口中放哨成果，不错看出显然的存在问题.
通过浏览器调试器用，不错看到a标签有margin-top和margin-bottom的值为15px，欲将其对王人，咱们将上头的结构作念一定的退换. 将<ul>标签换成<div>就OK了。
6、固定导航条
很厚情况之一，联想师但愿导航条固定在浏览器顶部或底部，这种固定式导航条的行使在迁徙端开荒中更为常见。Bootstrap框架提供了两种固定导航条的风景：
☑ .navbar-fixed-top：导航条固定在浏览器窗口顶部☑ .navbar-fixed-bottom：导航条固定在浏览器窗口底部
使用次第很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可：
1）、竣事旨趣：
竣事旨趣很简单，等于在navbar-fixed-top和navbar-fixed-bottom使用了position：fixed属性，何况缔造navbar-fixed-top的top值为0，而navbar-fixed-bottom的bottom值为0。具体的源码如下：
/源码请放哨bootstrap.css文献第3717 行～第3738行/
2）、存在bug及惩处次第:
从运转成果中公共不难发现，页面主内容顶部和底部都被固定导航条给遮住了。为了幸免固定导航条守密内容，咱们需要在body上作念一些处理：
因为固定导航条默许高度是50px，咱们一般缔造padding-top和padding-bottom的值为70px，固然有的时辰照旧需要具体情况具体分析。
3）、第二种惩处这个bug次第：
其实除了这种惩处有诡计以外，咱们还有其他的惩处次第，把固定导航条都放在页面内容前边：
在文献中添加下列相貌代码：
固然，这种次第有的时辰亦然需要具体情况具体分析的。
7、反应式导航条
如今浏览Web页面的终局不在是一尘不变了，前边示例竣事的导航条仅能适配于大屏幕的浏览器，但当浏览器屏幕变小的时辰，就不稳当了。因此反应式联想也就随之而来。那么在一个反应式的Web页面中，关于反应式的导航条也就十分的遑急。举例Bootstrap框架官网的导航条：
（宽屏时成果）
（中屏时成果）
（窄屏时成果）
那么在这一节中，主要和公共探讨何如使用Bootstrap框架竣事反应式导航条成果。
先上代码：
 1）、
使用次第：
保证在窄屏时需要折叠的内容必须包裹在带一个div内，何况为这个div加入collapse、navbar-collapse两个类名。临了为这个div添加一个class类名约略id名。
保证在窄屏时要流露的图标相貌（固定写法）：
3、并为button添加data-target=“.类名/#id名”，究竞是类名照旧id名呢？由需要折叠的div来决定。如：
（1）需要折叠的div代码段（用id暗意）：
窄屏时流露的图标代码段：
（2）也不错这样写，需要折叠的div代码段（用class暗意）：
窄屏时要流露的图标：
8、反色导航条
反色导航条其实是Bootstrap框架为公共提供的第二种作风的导航条，与默许的导航条比拟，使用次第并无区别，仅仅将navbar-deafult类名换成navbar-inverse。其变化仅仅导航条的背雅瞻念和文本作念了修改。如下：
运转成果如下：
对应的源码，请放哨bootstrap.css文献第4023行～第4111行
9、分页导航（带页码的分页导航）
分页导航险些在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航：
☑ 带页码的分页导航
☑ 带翻页的分页导航1）、带页码的分页导航
带页码的分页导航，可能是最常见的一种分页导航，尽头是在列表页内容超多的时辰，会给用户提供分页的导航风景。在Bootstrap框架为开荒者提供不同的版块：
☑ LESS版块：对应的源文献pagination.less
☑ Sass版块：对应的源文献_pagination.scss
☑ 编译后版块：对应bootstrap.css文献第4130行～第4222行
使用次第：
普通好多东说念主可爱用div>a和div>span结构来制作带页码的分页导航。不外，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination次第：
运转成果：
 2）、竣事旨趣：
从成果中不错看出，现时景况页码会高亮流露，而且不可点击。而临了一页是禁用景况，也不可点击。竣事相貌：
/bootstrap.css文献第4170行~第4192行/
详确：要禁用现时景况和禁用景况不可点击，咱们还要依靠js来竣事，约略将这两景况下的a标签换成span标签。
3）、大小缔造：
在Bootstrap框架中，也不错通过几个不同的情况来缔造其大小。雷同于按钮一样：
通过“pagination-lg”让分页导航变大；
通过“pagination-sm”让分页导航变小：
4）、大小缔造竣事旨趣：
其实等于通增多相应的padding大小、font-size大小和圆角大小，源码放哨bootstrap.css文献第4193行～第4222行.
10、分页导航（翻页分页导航）
Bootstrap框架除了提供带页码的分页导航以外还提供了翻页导航。这种分页导航时时在一些简单的网站上看到，比如说个东说念主博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。
Bootstrap框架将其孤苦成一个单独的部分：
☑ LESS版块：对应源文献为pager.less
☑ Sass版块：对应源文献为_pager.scss
☑ 编译后版块：对应bootstrap.css文献第4223行～第4260行
使用次第：
在骨子使用中，翻页分页导航和带页码的分页导航雷同，为ul标签加入pager类：
运转成果：
«上一页
下一页»1）、竣事旨趣：
对应相貌代码：
/bootstrap.css文献第4223行～第4244行/
2）、对王人相貌缔造：
默许情况之下，翻页分页导航是居中流露，但有的时辰咱们需要一个居左，一个居右。Bootstrap框架提供了两个相貌：
☑ previous：让“上一步”按钮居左☑ next：让“下一步”按钮居右
具体使用的时辰，只需要在li标签上添加对应类名即可：
运转成果：
«上一页
下一页»3）、竣事旨趣：
竣事旨趣很简单，等于一个进行了左浮动，一个进行了右浮动：
/bootstrap.css文献第4245行～第4252行/
4）、景况相貌缔造：
和带页码分页导航一样，如果在li标签上添加了disabled类名的时辰，分页按钮处于禁用景况，但雷同不可挫折其点击功能。你不错通过js来处理，或将a标签换成span标签。
运转成果：
«上一页
下一页»5）、景况相貌竣事旨趣：
/bootstrap.css文献第4253行～第4260行/
本文系列教程整理到：Bootstrap基础教程 专题中，接待点击学习。
如果公共还思真切学习，不错点击这里进行学习，再为公共附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程
本文系列教程整理到：Bootstrap基础教程 专题中，接待点击学习。
以上等于本文的全部内容TS，但愿对公共的学习有所匡助。
您可能感兴趣的著作:
第一次战争神奇的Bootstrap导航条
BootStrap创建反应式导航条实例代码
Bootstrap导航条可点击和鼠标悬停流露下拉菜单的竣事代码
JS组件Bootstrap导航条使用次第详解
全面战争神奇的Bootstrap导航条实战篇
Bootstrap每天必学之导航条(二)
一系列Bootstrap导航条使用次第共享
BootStrap反应式导航条实例先容
BootStrap制作导航条实例代码
基于bootstrap竣事减弱导航条
|
