Bootstrap禁用响应式布局
2016-07-11 17:52
447 查看
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-*,这样就能确保栅格能够在所有设备中展开。转自:http://www.yeahzan.com/course/106-bs-13.html
相关文章推荐
- 玩转Bootstrap(JS插件篇)
- html+css复习之第3篇 | jquery | bootstrap
- bootstrap的模态框问题
- bootstrap和bootstrap-select去除蓝色边框outline
- bootstrap学习
- Bootstrap3制作搜索框样式的方法
- Bootstrap实现弹性搜索框
- springmvc+mybatis+spring 整合 bootstrap html5
- HTML+CSS项目答辩遇到的问题锦集(一)——Bootstrap最基本最简单的模板
- 基于bootstrap和php的项目
- bootstrap表单
- bootstrap Botton
- bootstrap表格
- bootstrap 自定义表单 全部开源 HTM5
- bootstrap 全局样式排版
- Bootstrap框架下下拉框select搜索功能
- angular之bootstrap()
- bootstrap3学习1:响应式布局layout
- angular ui-bootstrap日期控件如何显示成中文
- 转发:在ASP.NET MVC中引入 后台模板ACE Bootstrap