很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。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. oracle常用命令集合

    一. 表空间相关命令 创建数据表空间 create SMALLFILE tablespace dataSpace datafile 'E:\oracle\product\10.2.0\oradata\ ...

  2. 烂泥：CentOS6.5挂载windows共享文件夹

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 由于工作需要,需要把本机的文件夹共享出去,然后让CentOS服务器临时使用下. 服务器使用的是CentOS系统,而本机使用的win7系统.考虑到是临时使 ...

  3. linux下如何打包压缩？解包解压？.tar文件.gz文件

    ===文件打包.压缩 ==打包 tar [root@521478.com]# tar -cvf etc1.tar /etc //c创建 v详细 f打包后文件名 [root@521478.com]# t ...

  4. python 的异常及其处理

    Python 异常处理 python提供了两个非常重要的功能来处理python程序在运行中出现的异常和错误.你可以使用该功能来调试python程序. 异常处理: 本站Python教程会具体介绍. 断言 ...

  5. Struts2工作原理

    Struts2工作原理 Struts2请求响应流程: 在struts2的应用中,从用户请求到服务器返回相应响应给用户端的过程中,包含了许多组件如:Controller.ActionProxy.Acti ...

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

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

  7. 第一天接触Orchard

    第一天接触Orchard 为什么要研究Orchard 呢? 楼主是因为要研究下最新的ASP.NET技术, Orchard 用的人多,历史也比较久,算是老牌了 再就是中文资料比较多,Orchard 有中 ...

  8. BeanShell Assertion in Jmeter

    以下为几个beanshell assertion的栗子: if (ResponseCode != null && ResponseCode.equals ("200" ...

  9. HTML 学习笔记 CSS3(过度 transition)

    通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.请把鼠标移动到下面的元素上: 先看一下这个代码 实现旋转放大的效 ...

  10. QContester

    发个福利好了(求不吐槽名字 自己做的软件,(目前)效果大概如上图- 对于我这种比较喜欢参加一些奇怪比赛的人来说还是有用的. 原理-就是在后台开七个浏览器2333 按左边的按钮会开始抓取比赛,进度可以在 ...