Bootstrap禁用响应式布局的实现方法


Posted in Javascript onMarch 09, 2017

在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禁用响应式布局的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
jquery实现pager控件示例
Apr 09 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
javascript中clone对象详解
Dec 03 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
微信小程序 template模板详解及实例代码
Mar 09 #Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 #Javascript
canvas实现爱心和彩虹雨效果
Mar 09 #Javascript
vue如何实现observer和watcher源码解析
Mar 09 #Javascript
详解VueJs异步动态加载块
Mar 09 #Javascript
微信小程序 设置启动页面的两种方法
Mar 09 #Javascript
js实现登录框鼠标拖拽效果
Mar 09 #Javascript
You might like
PHP 字符串分割和比较
2009/10/06 PHP
php牛逼的面试题分享
2013/01/18 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
python3.5仿微软计算器程序
2020/03/30 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
Python实现ping指定IP的示例
2018/06/04 Python
Python调用服务接口的实例
2019/01/03 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
基于Python 函数和方法的区别说明
2021/03/24 Python
学校食堂标语
2014/10/06 职场文书
建筑工程催款函
2015/06/24 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
课文《燕子》教学反思
2016/02/17 职场文书