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修改input的type属性问题探讨
Oct 12 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
JQuery性能优化的几点建议
May 14 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
JS正则表达式常见用法实例详解
Jun 19 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
基于javascript的拖拽类封装详解
Apr 19 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
微信小程序实现星星评分效果
Nov 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
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
js时间控件只显示年月
2017/01/08 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
python处理PHP数组文本文件实例
2014/09/18 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
django如何自己创建一个中间件
2019/07/24 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
Python正则表达式学习小例子
2020/03/03 Python
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
测绘工程个人的自我评价
2013/11/23 职场文书
询价采购方案
2014/06/09 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
医院合作协议书
2014/08/19 职场文书
护士2015年终工作总结
2015/04/29 职场文书
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript
Go语言测试库testify使用学习
2022/07/23 Golang