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 相关文章推荐
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
JavaScript 基本概念
Jan 20 Javascript
Bootstrap精简教程
Nov 27 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
微信小程序 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
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
flash 得到自身url参数的代码
2009/11/15 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
用python实现批量重命名文件的代码
2012/05/25 Python
python直接访问私有属性的简单方法
2016/07/25 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
如何用python写个模板引擎
2021/01/14 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
班主任经验交流会主持词
2014/04/01 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
六查六看剖析材料
2014/10/06 职场文书
财务务虚会发言材料
2014/10/20 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
Spring中的@Transactional的工作原理
2022/06/05 Java/Android
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL