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

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

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

<div class="navbar navbar-default navbar-fixed-top" role="navigation">

　…

</div>

<div class="content">我是内容</div>

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">

　…

</div>

Bootstrap系列 -- 43. 固定导航条的更多相关文章

  1. Bootstrap系列 -- 38. 基础导航条

    在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div), ...

  2. bootstrap基础学习【导航条、分页导航】（五）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Bootstrap系列 -- 37. 基础导航样式

    Bootstrap框架中制作导航条主要通过“.nav”样式.默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”.“nav-pills”之类.比如右侧代码 ...

  4. Bootstrap 固定导航条

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

  5. bootstrap学习笔记之导航条基础

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

  6. Bootstrap系列 -- 44. 分页导航

    带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式.平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航.不过,在B ...

  7. bootstrap最简单的导航条

    <nav class="navbar navbar-default navbar-static-top"> <div class="navbar-hea ...

  8. Bootstrap每天必学之导航条

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

  9. 玩转Bootstrap（基础） -- （6.导航条基础）

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

随机推荐

  1. C# 多线程，论多核时代爱恨情仇

    为什么要学习多线程? 2010年1月21日是10年某市公务员考试的报名截止日.因从下午2点开始,用于报名的北京市人事考试网瘫痪,原定于昨天下午5点截止的报名时间延迟至今天上午11点. 2011年3月1 ...

  2. SQL Server调优系列基础篇

    前言 关于SQL Server调优系列是一个庞大的内容体系,非一言两语能够分析清楚,本篇先就在SQL 调优中所最常用的查询计划进行解析,力图做好基础的掌握,夯实基本功!而后再谈谈整体的语句调优. 通过 ...

  3. eclipse 启动报错\workspace\.metadata\.log

    eclipse启动报错,让查看.metadata\.log日志 eclipse启动不了,让查看.metadata\.log日志,上面为日志中的错误提示. 解决办法:删除 .metadata\.plug ...

  4. cookie工具类，解决servlet3.0以前不能添加httpOnly属性的问题

    最近在解决XSS注入的问题,由于使用的servlet版本是2.5,不支持httpOnly的属性,故做了个工具类来实现cookie的httpOnly的功能.全类如下: /** * cookie工具类,解 ...

  5. plsql+绿色版oracle连接远程数据库配置及提示缺少msvcr71.dll解决方法

    之前一直用的sqldeveloper连接oracle数据库,这个免费而且也是官方出品,除了体积略大启动略慢外,也没什么不好的.. 一次偶然机会决定试一下plsql,整理一下安装资料,需要本地oracl ...

  6. plain framework 1 pak插件说明（资源压缩加密）

    在互联网的发展中,资源的整理一般成了发布软件应用的迫在眉睫的一件事情,不经打包的资源往往容易暴露而且众多的文件使得拷贝等待时间变长.在这种情况下,一种应用便诞生了,其起源是源自压缩软件,这便是我们今天 ...

  7. CF719C. Efim and Strange Grade[DP]

    C. Efim and Strange Grade time limit per test 1 second memory limit per test 256 megabytes input sta ...

  8. POJ3260The Fewest Coins[背包]

    The Fewest Coins Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 6299   Accepted: 1922 ...

  9. 以Access为支撑，书写一个C#写入记录的案例

    /// <summary> /// 读取Excel文档 /// </summary> /// <param name="Path">文件名称&l ...

  10. jsp考试的错题

    (选择一项) A: B: C: D: 正确答案是 A,首先,session的出现确实是为了解决HTTP无法保持客户状态的特点:因此A选项正确:用户信息也是客户状态的一部分,所以由A可以看出B的说法就不 ...