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" ...
随机推荐
- redux 数据规律
counter increase info todos 为 reducers 文件名 export default combineReducers({ todos, visibilityFilter ...
- Android百大框架排行榜
Android百大框架排行榜 15类Android通用流行框架 - 流风,飘然的风 - 博客园https://www.cnblogs.com/zdz8207/p/android-opensource- ...
- memcache,redis对比
一.问题: 数据库表数据量极大(千万条),要求让服务器更加快速地响应用户的需求. 二.解决方案: 1.通过高速服务器Cache缓存数据库数据 2.内存数据库 ( ...
- 自写Jquery插件 Datagrid
原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9086582.html 废话不多说,先上个整体效果: html <div id='data ...
- Python爬虫【一】爬虫的基本原理
一.爬虫基本原理 1.获取网络数据 用户方式:浏览器提交请求->下载网页代码->解析/渲染成页面 爬虫方式:模拟浏览器发送请求->下载网页代码->只提取有用的数据->存放 ...
- winform跨线程访问控件
首先说下,.net 2.0以后加强了安全机制,不允许在winform中直接跨线程访问控件的属性.所以除了控件所在的线程外的线程调用会抛异常 (Cross-thread operation not va ...
- 余额表前后台操作和对应sql
发生额的含义:产生于账行表. gl_je_lines账行表——>借贷(会产生额度,即发生额) —————————————————————————— gl_balances余额表: 余额 = ...
- JavaScript实现全选功能
最终效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- 一次 Java 内存泄漏排查过程,涨姿势
人人都会犯错,但一些错误是如此的荒谬,我想不通怎么会有人犯这种错误.更没想到的是,这种事竟发生在了我们身上.当然,这种东西只有事后才能发现真相.接下来,我将讲述一系列最近在我们一个应用上犯过的这种错误 ...
- 数据库中char和varchar区别
区别: 1)char长度是固定,而varchar长度是可变的: 比如:'abc'对于char(10)表示存储字符将占10个字节(包括7个空字符),而同样varchar(10)只占3个自己长度,10只是 ...