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脚本编程解决考试分数统计问题
Oct 18 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
smarty实例教程
2006/11/19 PHP
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Django框架封装外部函数示例
2019/05/28 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
一份Java笔试题
2012/02/21 面试题
机械绘图员岗位职责
2013/11/19 职场文书
如何写你的创业计划书
2014/01/07 职场文书
女娲补天教学反思
2014/02/05 职场文书
2014年会策划方案
2014/05/11 职场文书
2015年采购部工作总结
2015/04/23 职场文书
cf战队宣传语
2015/07/13 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
优化Mysql查询的示例
2022/04/26 MySQL