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 相关文章推荐
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
javascript操作excel生成报表示例
May 08 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 Javascript
JavaScript常用工具函数库汇总
Sep 17 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
一个简单php扩展介绍与开发教程
2010/08/19 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
JavaScript实现下拉列表
2021/01/20 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
Python读取properties配置文件操作示例
2018/03/29 Python
Python高级用法总结
2018/05/26 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
python实现数字炸弹游戏
2020/07/17 Python
遇到的Mysql的面试题
2014/06/29 面试题
暑期研修感言
2014/02/17 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
离职信范文
2015/06/23 职场文书