Bootstrap 固定导航条
默认情况下，导航条的定位属性为 static，它的位置由它的HTML代码中定义的顺序出现，并随着页面向下滚动而消失。也可以改变它的定位方式，让它固定显示在浏览器窗口的顶部或底部。
1、固定在顶部
如果想让导航条固定在页面顶部，只需在 .navbar 类后面追加一个 .navbar-fixed-top 类即可。如：
<div class="navbar navbar-fixed-top">...</div>
效果如图 4‑35所示：
图4-35 Bootstrap导航条固定在顶部
2、固定在底部
要让导航条固定在页面底部，只要把 .navbar-fixed-top 类改为 .navbar-fixed-bottom 类即可。如：
<div class="navbar navbar-fixed-bottom">...</div>
效果如图 4‑36所示：
图4-36 Bootstrap导航条固定在底部
需要注意的是，导航条被固定之后，它就可能覆盖其他页面元素。为了防止这种情况发生，需要给给 <body> 元素设置合适的内边距。由于导航条的默认高度是 40px，所以至少要给 <body> 元素添加 40px 的内边距。
导航条固定在顶部的时候，设置如下：
body { padding-top: 40px; }
导航条固定在底部的时候，设置如下：
body { padding-bottom: 40px; }
上述两行代码不必同时设置，只需根据导航条所固定的位置，选择其中一个即可。并且，一定要在Bootstrap的核心CSS（即，bootstrap.css）文件之后，响应式CSS（即，bootstrap-responsive.css）文件之前添加该样式。
Bootstrap 固定导航条的更多相关文章
- Bootstrap系列 -- 43. 固定导航条
很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见.Bootstrap框架提供了两种固定导航条的方式: .navbar-fixed-top:导航条固定 ...
- Bootstrap学习-导航条-分页导航
1.导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条 ...
- Bootstrap之导航条
基本导航条 <!-- navbar-inverse相反颜色风格 --> <!-- navbar-static-top去除圆角 --> <!-- navbar-fixed- ...
- bootstrap框架 导航条组件使用
本文记载boot 导航条组件使用方法 导航条组件 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展 ...
- bootstrap－导航条
默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式. 两端对齐的导航条导航链 ...
- Bootstrap组件之响应式导航条
响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...
- Bootstrap每天必学之导航条
http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...
- bootstrap 组件之"导航条"
一个典型的导航条基本代码如下: <nav class="navbar navbar-default"> <div class="container&qu ...
- 玩转Bootstrap（基础） -- （6.导航条基础）
1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
随机推荐
- （cvpr2019 ) Technology details of Deep Learning for Multiple-Image Super-Resolution
Mutiple-Image SSR 关键的技术imformation fusion 1. 将单一场景的多图像经过Resnet, 其中每张图片的维度变为了输入的两倍.同时,这些输入的单一场景的多图像进行 ...
- 区块链区块的生成和链接，比特币btc的产生，UTXO的生成和消耗，比特币系统
区块链区块的生成和链接,比特币btc的产生,UTXO的生成和消耗,比特币系统 区块链区块的生成和链接,比特币btc的产生,UTXO的生成和消耗,比特币系统
- Let's Chat ZOJ - 3961
ACM (ACMers' Chatting Messenger) is a famous instant messaging software developed by Marjar Technolo ...
- com.sun.jersey.api.client.UniformInterfaceException：returned a response status of 403
这是在同一台电脑上,然后启动两台tomcat进行文件传输时候,会出现的一个异常. 403,是因为tomcat默认禁止上传,在tomcat中的config中的web.xml中进行以下的配置就可以进行文件 ...
- 获取微信access_token
/** * 获取微信access_token * @return mixed */function get_access_token() { $appId = C('APPID'); $secret ...
- Docker学习笔记之通过 Dockerfile 创建镜像
0x00 概述 由于 Docker 镜像的结构优势,使它的占用空间远小于普通的虚拟机镜像,而这就大幅减少了 Docker 镜像在网络或者其他介质中转移所花费的时间,进而提高了我们进行迁移部署的效率.不 ...
- php 使用table方式导出excel文件
这些天在使用PHPExcel导出数据时,5000条数据竟然挂了.后来跟同事聊聊,有些明悟,PHPExcel做了很多处理,我在这里理解为渲染,就会暂用过多的空间,‘膨胀’的空间导致内存暂用过大,就挂了. ...
- P4172 [WC2006]水管局长（LCT）
P4172 [WC2006]水管局长 LCT维护最小生成树,边权化点权.类似 P2387 [NOI2014]魔法森林(LCT) 离线存储询问,倒序处理,删边改加边. #include<iostr ...
- Spring Boot（一）：入门篇
Spring Boot(一):入门篇 一.Spring Boot介绍 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程. 该框架 ...
- NOIP 2016 换教室 (luogu 1850 & uoj 262) - 概率与期望 - 动态规划
题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程. 在可以选择的课程中,有 2n2n 节课程安排在 nn 个时间段上.在第 ii(1 \leq i \leq n1≤ ...