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 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
用jQuery扩展自写的 UI导航
Jan 13 Javascript
JavaScript网页定位详解
Jan 13 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
微信小程序 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
PHP闭包实例解析
2014/09/08 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
永不消失的title提示代码
2007/02/15 Javascript
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
详解如何webpack使用DllPlugin
2018/09/30 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
node 版本切换的实现
2020/02/02 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
车间组长岗位职责
2013/12/20 职场文书
大一自我鉴定范文
2013/12/27 职场文书
建筑班组长岗位职责
2014/01/02 职场文书
境外导游求职信
2014/02/27 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
集体生日活动方案
2014/08/18 职场文书
标准版离职证明书
2014/09/12 职场文书
2014年新教师工作总结
2014/11/08 职场文书
Python制作表白爱心合集
2022/01/22 Python