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 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
vue使用i18n实现国际化的方法详解
Sep 05 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 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
关键字final的用法
2013/10/02 面试题
研究生导师推荐信
2014/09/06 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
Python实现socket库网络通信套接字
2021/06/04 Python
Golang 链表的学习和使用
2022/04/19 Golang