默认情况下,导航条的定位属性为 static,它的位置由它的HTML代码中定义的顺序出现,并随着页面向下滚动而消失。也可以改变它的定位方式,让它固定显示在浏览器窗口的顶部或底部。

1、固定在顶部

如果想让导航条固定在页面顶部,只需在 .navbar 类后面追加一个 .navbar-fixed-top 类即可。如:


  1. <div class="navbar navbar-fixed-top">
  2.   ...
  3. </div>

效果如图 4‑35所示:

图4-35 Bootstrap导航条固定在顶部

2、固定在底部

要让导航条固定在页面底部,只要把 .navbar-fixed-top 类改为 .navbar-fixed-bottom 类即可。如:


  1. <div class="navbar navbar-fixed-bottom">
  2.   ...
  3. </div>

效果如图 4‑36所示:

图4-36 Bootstrap导航条固定在底部

需要注意的是,导航条被固定之后,它就可能覆盖其他页面元素。为了防止这种情况发生,需要给给 <body> 元素设置合适的内边距。由于导航条的默认高度是 40px,所以至少要给 <body> 元素添加 40px 的内边距。

导航条固定在顶部的时候,设置如下:


  1. body { padding-top: 40px; }

导航条固定在底部的时候,设置如下:


  1. body { padding-bottom: 40px; }

上述两行代码不必同时设置,只需根据导航条所固定的位置,选择其中一个即可。并且,一定要在Bootstrap的核心CSS(即,bootstrap.css)文件之后,响应式CSS(即,bootstrap-responsive.css)文件之前添加该样式。

Bootstrap 固定导航条的更多相关文章

  1. Bootstrap系列 -- 43. 固定导航条

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

  2. Bootstrap学习-导航条-分页导航

    1.导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条 ...

  3. Bootstrap之导航条

    基本导航条 <!-- navbar-inverse相反颜色风格 --> <!-- navbar-static-top去除圆角 --> <!-- navbar-fixed- ...

  4. bootstrap框架 导航条组件使用

    本文记载boot 导航条组件使用方法 导航条组件 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展 ...

  5. bootstrap-导航条

    默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式. 两端对齐的导航条导航链 ...

  6. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  7. Bootstrap每天必学之导航条

    http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...

  8. bootstrap 组件之"导航条"

    一个典型的导航条基本代码如下: <nav class="navbar navbar-default"> <div class="container&qu ...

  9. 玩转Bootstrap(基础) -- (6.导航条基础)

    1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

随机推荐

  1. 20165215 实验一 Java开发环境的熟悉

    20165215 实验一 Java开发环境的熟悉 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:张家佳 学号:20165215 指导教师:娄嘉鹏 实验日期:2018年4月2日 实验 ...

  2. JustOj 2043: N!

    题目描述 输出N的阶乘.(注意时间限制150ms&&注意不能打表后输出,赛后我们会检查代码,如有发现,该位同学总分记0分处理) 打表的定义:在本地主机预先计算出了每个值对应的答案,并把 ...

  3. How to use CAR FANS C800 Diagnostic Scan Tool to do diagnosis operation

    How to use Heavy Duty Diagnostic CAR FANS C800 Diagnostic Scan Tool to do diagnosis operation Here i ...

  4. linux上限值网速、限值带宽

    Linux操作系统中的流量控制器TC(Traffic Control)用于Linux内核的流量控制,主要是通过在输出端口处建立一个队列来实现流量控制. Linux流量控制的基本原理如下图所示. 接收包 ...

  5. 自学Java第四周的总结

    在这一周里我主要把以前学的知识复习了一遍,加深了自己对那些知识点的熟悉程度.另外我还学习了有关于Java中的异常处理.继承.抽象类等相关知识.了解了其基本意义,即继承是java面向对象编程技术的一块基 ...

  6. WinCHM 制作开发知识库,So easy!!!

    开发过程中可能需要一些团队需要相互参照的东西,如前后台开发中的接口定义,团队开发规范,公用的类库,开发FAQ等 ,可以考虑用WinCHM这种工具制作开发知识库,然后发布至一Web服务器上,这样开发人员 ...

  7. Spring数据库开发

    Spring的数据库开发 #Spring中JDBC模板的作用 JDBC模板负责数据库资源管理和错误处理: #熟悉Spring  JDBC的配置 配置数据源和jdbc模板 <?xml versio ...

  8. RTP协议全解析(H264码流和PS流)

    转自:http://blog.csdn.net/chen495810242/article/details/39207305 写在前面:RTP的解析,网上找了很多资料,但是都不全,所以我力图整理出一个 ...

  9. eclispe设置workspace text file encoding

    在windows下开发,经常会遇到eclipse新导入的工程 java代码中的注释或者字符串中文显示乱码,每次都要一个个项目更改麻烦,特地找了下,可通过如下方法一次性设置.

  10. Java Web-----JSP与Servlet(一)

    JSP (java服务器页面) JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它[1]  是由Sun Microsystems公司倡 ...