Bootstrap禁用响应式布局
在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行。
不过正所谓“萝卜青菜各有所爱”,如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局(或者你所设计的页面布局不允许你使用响应式技术),那么你可以通过以下方式禁用响应式布局。
移除标签
禁用第一步,就是需要移除在head标签中添加的
<meta name="viewport" content="width=device-width, initial-scale=1.0”>
该标签的作用在于使得你的网站在移动设备端被访问的时候,不会进行缩放,而是以100%的比例显示在移动设备中。
设定宽度
禁用第二步,为.container类设置一个宽度,从而覆盖它根据设备宽度而自动调节的功能。
例如你可以设定.container {width: 980px;},为了起到覆盖原bootstrap样式的作用,最好将你自定义的css文件在bootstrap.css文件之后引入。
删除菜单折叠
倘若你采用了导航栏,那么就要注意删掉菜单在移动端的折叠样展开式(主要通过button的navbar-toggle来实现)。
栅格布局
除此之外,如果你采用了栅格布局,那么就要采用.col-xs-*(最小设备栅格类)的样式来代替.col-md-*以及.col-lg-*,这样就能确保栅格能够在所有设备中展开。
通过以上几个步骤,你便可以禁用自己项目中的响应式布局,还等什么?快试试吧!
Bootstrap禁用响应式布局的更多相关文章
- 关于bootstrap和响应式布局
bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...
- Bootstrap实战 - 响应式布局
一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...
- 基于 bootstrap html 响应式 布局
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- bootstrap之响应式布局
1.手动配置viewport 在HTML中: <meta name="viewport" content="width=device-width,initial-s ...
- 前端bootstrap框架禁用响应式的方法
在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓“萝卜青菜各有所爱”,如果你想要使用Bootstrap开发自己的项目 ...
- 响应式布局之BootStrap
本文在于巩固基础 学习bootStrap官网http://getbootstrap.com/ 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多 ...
- 前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...
- Bootstrap如何禁止响应式布局 不适配
Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好.下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样. 禁止响应式布局有如下几步: 移除 此 ...
- 响应式布局和BootStrap 全局CSS样式
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
随机推荐
- 关于函数strtok和strtok_r的使用要点和实现原理(二)
http://www.cnblogs.com/stemon/p/4013264.html已经介绍了使用strtok函数的一些注意事项,本篇将介绍strtok的一个应用并引出strtok_r函数. 1. ...
- C语言中头文件和cpp文件解析
务必提前预读这里的内容:http://www.cnblogs.com/stemon/p/3999844.html 回到cpp文件与头文件各写什么内容的话题上: 理论上来说cpp文件与头文件里的内容,只 ...
- day9_python学习笔记_chapter12_模块
1. 名称空间加载顺序: 首先加载内建名称空间,他由__builtin模块中的名字构成.然后加载执行模块的全局名称空间,他会在模块开始执行后变为活动名称空间.如 果在执行期间调用了一个函数,那么将创建 ...
- 将数据从服务器端同步到手机上, 并且需要离线工作,Couchebase Mobile 也许是目前最好的解决方案:
将数据从服务器端同步到手机上, 并且需要离线工作,Couchebase Mobile 也许是目前最好的解决方案: 原文地址: https://www.infinum.co/the-capsized-e ...
- C#学习日志 day8 -------------- async await 异步方法入门(引用博客)以及序列化和反序列化的XML及json实现
首先是异步方法的介绍,这里引用自http://www.cnblogs.com/LoveJenny/archive/2011/11/01/2230933.html async and await 简单的 ...
- Java 拾遗
1.选择表达式中的类型转换 public class Test { public void static main(String args[]){ int i = 5; System.out.prin ...
- OSG中的视角 eye up center
这三个值都是vec3变量,其中eye和center确定视角 eye就相当于人的眼睛,我们观察场景,是从这个坐标去看的,然后有了眼睛,我们观察得有一个方向,那么久需要另外一个坐标,就是c ...
- SQL Server 修改表
alter table 可能用三种方式来完成. 第一种: 只修改元数据. 1.删除一个列. 2.一个行被增加而且空值被认为是所有行的新值. 3.当可变长度的列的长度增加时. 4.不允许为空的列被允许为 ...
- 杭电 1272 POJ 1308 小希的迷宫
这道题是我学了并查集过后做的第三个题,教我们的学姐说这是并查集的基础题,所以有必要牢牢掌握. 下面就我做这道题的经验,给大家一些建议吧!当然,我的建议不是最好的,还请各位大神指出我的错误来,我也好改正 ...
- NET-A-PORTER为何难以模仿?_全文显示_生活福布斯中文网
NET-A-PORTER为何难以模仿?_全文显示_生活福布斯中文网 NET-A-PORTER为何难以模仿?