Bootstrap禁用响应式布局的实现方法

栏目: CSS · CSS3 · 发布时间: 7年前

内容简介:Bootstrap禁用响应式布局的实现方法

在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禁用响应式布局的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

从算法到程序

从算法到程序

徐子珊 / 2013-3 / 59.00元

《从算法到程序:从应用问题编程实践全面体验算法理论》第1章讨论算法设计、分析的基本概念,第2章讨论算法设计中最常用的几个数据结构,包括链表、栈、队列、二叉搜索数、散列表等。第3章讨论了算法设计的两个基本策略:渐增策略与分支策略。这3章的内容,为读者阅读本书以后的内容奠定了基础。第4章讨论了几个代数计算的基本问题及其算法,包括矩阵运算、解线性方程组、多项式运算等。第5章讨论了几个关于计算几何的基本问......一起来看看 《从算法到程序》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码