Bootstrap入门笔记之(五)导航条、分页导航_html/css_WEB-ITnose
导航条
导航条(navbar)和我们在上一个笔记中介绍的导航(nav)相比,就多了一个 “条” 字。其实在Bootstrap框架中他们有着一定的区别。
在导航条(navbar)中有一个背景色、而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。
基础导航条
实际上,导航条和导航在外观上的差别并不是那么的大,但是在实际使用中导航条要比导航复杂得多。下面就来实现一个最基础的导航条。
可以达到的效果是这样的:
宽屏:
窄屏:
在制作一个基础导航条时,主要注意以下几点:
- 首先在制作导航的列表(
- 在列表外部添加一个容器(div)在这里允许的话 推荐使用
- .navbar 类的主要功能就是设置左右padding和圆角等效果,通过 .navbar-default 来进行控制导航条的颜色比如还有 .navbar-inverse 。(有兴趣的可以去看看源码)
带标题、二级菜单
在Web页面制作中,一般都可以在菜单前面看到有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过 .navbar-header 和 .navbar-brand 来实现,如:
当然也可以用来做logo, 中文官网描述 ,在此不进行详细描述。
二级菜单自然不用多说,在上一篇博客中已经进行了详细说明,若还是不太了解的话,可以再去翻翻我的上一篇博客,我们一起来看看下面这段代码以及能实现的效果:(注意这里使用的是 navbar-inverse 反色的导航条)
效果如下:
带表单
我们常常在导航条中都能看到搜索表单,比如知乎,新浪微博等等都具有,Bootstrap框架当然不可能缺掉这样的东西。使用方法也非常简单:
在Bootstrap框架中提供了一个 .navbar-form ,在 .navbar 容器中放置一个带有 .navbar-form 类名的表单;再添加 .navbar-left 让表单左浮动,更好实现对齐。
在Bootstrap中,还提供了 .navbar-right 样式,让元素在导航条靠右对齐。
把这段代码复制到代码当中看看效果吧:
按钮、文本和链接
除了上面的一些样式之外,bootstrap框架提供了三种其他样式:
- 导航条中的按钮 navbar-btn ,使不在
- 导航条中的文本 navbar-text ,一般使用
元素,达到最优的行距
- 导航条中的普通链接 navbar-link ,非导航的链接,添加这个类,可以有正确的默认颜色与反色设置
但这三种样式在框架中使用时受到一定的限制,需要和 navbar-brand 、 navbar-nav 配合起来使用。而且 对数量也有一定的限制,一般情况在使用一到两个不会有问题,超过两个就会有问题 。
固定导航条
有时,我们希望导航条固定在浏览器顶部或底部,Bootstrap为我们方便的提供了两个类来实现这样的样式:
- .navbar-fixed-top :导航条固定在浏览器窗口顶部
- .navbar-fixed-bottom :导航条固定在浏览器窗口底部
使用方法很简单,只需要在制作导航条最外部容器(navbar)上追加对应的类名即可。
这个固定的导航条会 遮住页面上的其它内容 ,除非你给
元素底部设置了 padding 。提示:导航条的 默认高度 是 50px。如: body { padding-bottom: 70px; } ,当然你也可以使用你自己的值。响应式导航条
在上面的例子中,导航条就仅仅能大屏幕下有一个不错的效果,在屏幕变小的情况下,还 直接把所有的导航项直接展现出来就不适合了 。为了有一个更好的显示效果,响应式的导航条设计也就随之而来。我们先来看看效果,再一步一步分析它!
窄屏时,点击右边的按钮图标可展开,效果与上面的展开效果除了 active 状态不再溢出容器外,其他基本相同。实现代码如下:
分析:
推荐阅读
-
Bootstrap入门笔记之(二)表单_html/css_WEB-ITnose
-
Bootstrap入门笔记之(三)栅格系统_html/css_WEB-ITnose
-
Bootstrap入门笔记之(五)导航条、分页导航_html/css_WEB-ITnose
-
Bootstrap入门笔记之(四)菜单、按钮及导航_html/css_WEB-ITnose
-
Bootstrap入门笔记之(一)排版_html/css_WEB-ITnose
-
Bootstrap入门笔记之(六)其它:警示框、进度条、列表组、面板等_html/css_WEB-ITnose
-
Bootstrap入门笔记之(四)菜单、按钮及导航_html/css_WEB-ITnose
-
Bootstrap入门笔记之(五)导航条、分页导航_html/css_WEB-ITnose
-
Bootstrap组件之响应式导航条_html/css_WEB-ITnose
-
Bootstrap入门笔记之(一)排版_html/css_WEB-ITnose