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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
创建nuxt.js项目流程图解
Mar 13 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和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
PHP实现文件上传与下载
2020/08/28 PHP
js判断字符长度及中英文数字等
2014/03/19 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
python输入中文的实例方法
2020/09/14 Python
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
公务员政审个人鉴定
2014/02/25 职场文书
青春演讲稿范文
2014/05/08 职场文书
爱与责任演讲稿
2014/05/20 职场文书
学校安全责任书范本
2014/07/23 职场文书
总经理检讨书
2014/09/15 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
教师党员个人自我评价
2015/03/04 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
MySQL 十大常用字符串函数详解
2021/06/30 MySQL