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 ...
- css的响应式布局和动画
把响应式布局和动画放在一起写是因为他们有个共同点@符号 先讲讲响应式布局@media 响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件 ...
- 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
- 响应式布局与bootstrap框架
原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...
- Bootstrap响应式布局
Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...
随机推荐
- 分析hello1项目里面的web.xml
在example目录下的web\jsf\hello1\target\hello1\WEB-INF路径里可以找到hello1的web.xml <?xml version="1.0&quo ...
- CF285E Positions in Permutations
思路 dp+二项式反演的神题 就是dp部分非常麻烦(好吧是我傻了 考虑先钦定m个满足条件的位置,这m个\(x_i\),只能放\(x_i-1\)或\(x_i+1\),然后其他的随便放(得出至少m个的方案 ...
- vmware workstation 14 快速安装操作系统
一.NAT网络配置 设置子网IP.子网掩码 网关IP:子网IP前三位+2 DHCP设置 二.网卡配置 vi /etc/sysconfig/network-scripts/ifcfg-ens33 TYP ...
- Kaggel比赛 : [Give Me Some Credit]
通过预测在未来两年内某人将经历财务困境的可能性,改善信用评分的状态. Description 银行在市场经济中扮演着至关重要的角色.他们决定谁可以获得融资,以及什么条件,可以做出或破坏投资决策.为了让 ...
- Pandas 基础(11) - 用 melt 做格式转换
melt 也可以用来做数据格式转换, 请看下图, 我们可以用 melt 把左表转成右表的格式: 首先引入文件(已上传): df = pd.read_csv('/Users/rachel/Sites/p ...
- java基础 (三)之ConcurrentHashMap(转)
一.背景: 线程不安全的HashMap 因为多线程环境下,使用Hashmap进行put操作会引起死循环,导致CPU利用率接近100%,所以在并发情况下不能使用HashMap. 效率低下的H ...
- Orchard是如何呈现内容的
首先Orchard是一个建立在ASP.NET MVC框架上的CMS应用框架.Orchard在呈现内容的时候也遵循MVC的规律,也是通过Controller来处理Url请求并决定用那个View来呈现那种 ...
- spoj1433 KPSUM
题意:略: 首先知道10,20,......100,200,1000的前面的符号都是负号. 举具体例子:221时,计算过程为 000-009, 010-019, 020-029...... ...
- 解决无法连接mysql问题
解决无法连接mysql问题 在my.ini文件下加入explicit_defaults_for_timestamp 清空data文件夹 Cmd初始化mysql 输入>Mysqld --in ...
- 如何分析java内存泄漏问题
java中的内存泄漏首先需要dump文件出来,主要包括内存dump.线程dump: 内存dump是指通过jmap -dump <pid>输出的文件,而线程dump是指通过jstack &l ...