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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
JS中的多态实例详解
Oct 15 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
js+html实现点名系统功能
Nov 05 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
php中随机显示图片的函数代码
2011/06/23 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
twig模板常用语句实例小结
2016/02/04 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
javascript的push使用指南
2014/12/05 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
Python 获得13位unix时间戳的方法
2017/10/20 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
打架检讨书800字
2014/01/10 职场文书
给分销商的致歉信
2014/01/14 职场文书
珍惜水资源建议书
2014/03/12 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
mysql部分操作
2021/04/05 MySQL
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS
GPU服务器的多用户配置方法
2022/07/07 Servers