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之选择组件的深入解析
Jun 19 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
jQuery实现大图轮播
Feb 13 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 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 删除记录实现代码
2009/03/12 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
Python OS模块实例详解
2019/04/15 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
高中美术教师事迹材料
2014/08/22 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
先进工作者个人总结
2015/02/15 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
Oracle中DBLink的详细介绍
2022/04/29 Oracle