Bootstrap如何禁止响应式布局
Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好。下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样。
禁止响应式布局有如下几步:
- 移除 此 CSS 文档中提到的设置浏览器视口(viewport)的标签:
<meta>。 - 通过为
.container类设置一个width值从而覆盖框架的默认 width 设置,例如width: 970px !important;。请确保这些设置全部放在默认的 Bootstrap CSS 文件的后面。注意,如果你把它放到媒体查询中,也可以略去!important。 - 如果使用了导航条,需要移除所有导航条的折叠和展开行为。
- 对于栅格布局,额外增加
.col-xs-*类或替换掉.col-md-*和.col-lg-*。 不要担心,针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。
针对 IE8 仍然需要额外引入 Respond.js 文件(由于仍然利用了浏览器对媒体查询(media query)的支持,因此还需要做处理)。这样就禁用了 Bootstrap 对移动设备的响应式支持。
Bootstrap如何禁止响应式布局的更多相关文章
- Bootstrap如何禁止响应式布局 不适配
Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好.下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样. 禁止响应式布局有如下几步: 移除 此 ...
- bootstrap 自适应和响应式布局的区别
自适应: 不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...
- Bootstrap工具包--用于响应式布局和移动设备优先的web项目
Bootstrap是用于前端开发的工具包,是一个css/html框架 用于响应式布局和移动设备优先的web项目 响应式布局--一个网站能兼容多个终端 有很多版本:v3,v4,v5 三个没啥区别 ...
- Bootstrap学习笔记-响应式布局原理
响应式布局的原理就是利用css3中@media媒体来实现的 <html> <head> <meta charset="utf-8"> <t ...
- bootstrap第一天,响应式布局,栅格系统运用
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...
- Bootstrap实战 - 响应式布局
一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...
- 关于bootstrap和响应式布局
bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...
- 响应式布局之BootStrap
本文在于巩固基础 学习bootStrap官网http://getbootstrap.com/ 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多 ...
- Bootstrap禁用响应式布局
在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootst ...
随机推荐
- 【Android Studio】使用 Genymotion 调试出现错误 INSTALL_FAILED_CPU_ABI_INCOMPATI
RT -- 解决方法参考: https://my.oschina.net/u/242764/blog/375909 http://blog.csdn.net/wjr2012/article/detai ...
- Mac环境下升级gcc版本--rocksdb
前言 在mac环境下编译rocksdb,需要配置依赖的编译环境,其中有一项比较麻烦:c++编译要支持C++11,但是在mac环境安装xcode-select --install之后,已经安装有了gcc ...
- ubuntu/deepin 下下载wxpython
1 输入apt-cache search wxpython 如果有返回信息 则输入 sudo apt-get install python-tools 2 否则 1.添加软件源地址到apt列表中.输入 ...
- 百度网盘 人工智能书籍【Tensorflow和深度学习】
链接:https://pan.baidu.com/s/1ejCvwn08ILI2fMhBEdXR8w 提取码:6pk9
- ceph log机制
Log 是每个项目必须的,他是跟踪问题的最直接的依据.Ceph 也设计自己的log机制. 初始化启动log实例,启动log线程. _log = new ceph::log::Log(&_con ...
- 【Java例题】4.4使用牛顿迭代法求方程的解
4. 使用牛顿迭代法求方程的解:x^3-2x-5=0区间为[2,3]这里的"^"表示乘方. package chapter4; public class demo4 { publi ...
- 为什么建立数据仓库需要使用ETL工具?
在做项目时是不是时常让客户有这样的困扰: 1.开发时间太长 2.花费太多 3.需要太多资源 4.集成多个事务系统数据总是需要大量人力成本 5.找不到合适的技能和经验的人 6.一旦建立,数据仓库无法足够 ...
- python3学习-lxml模块
在爬虫的学习中,我们爬取网页信息之后就是对信息项匹配,这个时候一般是使用正则.但是在使用中发现正则写的不好的时候不能精确匹配(这其实是自己的问题!)所以就找啊找.想到了可以通过标签来进行精确匹配岂不是 ...
- jq css3实现跑马灯+大转盘
前端效果, <!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" con ...
- Linux故障处理最佳实践
引言 业务中断了! 老板咆哮,主管抓狂,而你就是那个要去处理故障.恢复业务的不幸的人. 你独自一人在阴暗的隔间里.北边是老板的办公室,西边是Team Leader的办公室,南面是茶水间,在那你能泡上一 ...