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 ...
随机推荐
- FL studio钢琴卷工具简介
FL studio中的钢琴卷工具在业内各编曲软件中享有当之无愧的声誉.钢琴卷是一款将音符和自动数据发送到钢琴卷的频道相关联的插件.而钢琴卷的这个操作运行过程被称为“排序”. 下面给大家介绍讲解钢琴卷中 ...
- Ansible 的安装
On Fedora: $ sudo dnf install ansible On RHEL and CentOS: $ sudo yum install ansible On Ubuntu: $ su ...
- Win32汇编学习(5):绘制文本2
这次我们将学习有关文本的诸多属性如字体和颜色等. 理论: Windows 的颜色系统是用RGB值来表示的,R 代表红色,G 代表绿色,B 代表蓝色.如果您想指定一种颜色就必须给该颜色赋相关的 RGB ...
- 牛客练习赛43C Tachibana Kanade Loves Review
题目地址 Link 题解 虚点这种东西还是没有掌握好啊. 考虑建一个虚点,向已经学会的东西连一条边权为0的边,关系正常连边,单独学的从虚点连一条边过去. 然后做一遍最小生成树就得到答案了. 这题略卡常 ...
- Selenium如何在谷歌浏览器模拟H5页面
一.基于java语言(转载:http://www.mamicode.com/info-detail-1972340.html) public class runtest { WebDriver dri ...
- 【八】jqeury之click事件[添加及删除数据]
要求:1.添加数据显示在下方列表.2.添加的数据可动态删除. 界面显示: 代码: <!DOCTYPE html> <html> <head> <script ...
- 力扣(LeetCode)561. 数组拆分 I
给定长度为 2n 的数组, 你的任务是将这些数分成 n 对, 例如 (a1, b1), (a2, b2), ..., (an, bn) ,使得从1 到 n 的 min(ai, bi) 总和最大. 示例 ...
- Maven的pom配置文件
1.1 Maven的pom配置文件 1.1.1 pom文件内容和作用 Pom.xml文件用来设置项目的项目依赖.插件.项目版本等信息,其中必须的是xml的根元 ...
- winform 分页控件
http://www.cnblogs.com/liuyunsheng/p/4853387.html http://www.cnblogs.com/wuhuacong/archive/2011/07/0 ...
- Kali linux 2016.2(Rolling)里安装OpenVAS
不多说,直接上干货! 本博文,是在Kali 2.0 linux里,安装OpenVAS. 前言 OpenVAS是一款开放式的漏洞评估工具,主要用来检测目标网络或主机的安全性.与安全焦点的X-Scan工具 ...