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 表格隔行颜色
Dec 02 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
php5.2时间相差8小时
2007/01/15 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
使用python实现baidu hi自动登录的代码
2013/02/10 Python
Python中的pprint折腾记
2015/01/21 Python
Python获取服务器信息的最简单实现方法
2015/03/05 Python
Django中使用locals()函数的技巧
2015/07/16 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
2014年大学生就业规划书
2014/04/04 职场文书
篮球比赛口号
2014/06/10 职场文书
军训口号
2014/06/13 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
乱世佳人观后感
2015/06/08 职场文书
Java spring单点登录系统
2021/09/04 Java/Android