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和响应式布局
bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...
- Bootstrap实战 - 响应式布局
一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...
- 基于 bootstrap html 响应式 布局
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- bootstrap之响应式布局
1.手动配置viewport 在HTML中: <meta name="viewport" content="width=device-width,initial-s ...
- 前端bootstrap框架禁用响应式的方法
在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓“萝卜青菜各有所爱”,如果你想要使用Bootstrap开发自己的项目 ...
- 响应式布局之BootStrap
本文在于巩固基础 学习bootStrap官网http://getbootstrap.com/ 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多 ...
- 前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...
- Bootstrap如何禁止响应式布局 不适配
Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好.下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样. 禁止响应式布局有如下几步: 移除 此 ...
- 响应式布局和BootStrap 全局CSS样式
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
随机推荐
- 关于ThreadAbortExcption异常处理
之前程序中,使用Thread.Abort()方法来终止线程的运行,但它是抛出ThreadAbortException异常来终止线程. 异常信息摘要: Unhandled Exception:Threa ...
- 简单的表单验证(js、jquery)
//javascript代码 function valForm(){ var username=document.getElementById("username"); var p ...
- PHP中计算时间差(上周,上月,去年,昨天等)
运用了date()和strtotime()函数,直接上代码 echo date('Y-m-d' , strtotime('-1 day')).PHP_EOL; echo date('Y-m-d' , ...
- android sdk 更新问题——截止2014年6月10日有效
因为墙的原因,很多人的sdk都更新不了,下面记录了我刚刚实现更新的方法: 进到Android SDK Manager,菜单Tools->Options..,这时弹出一个框,在这个框的下面Othe ...
- 黑马程序员-- C语言变量作用域与代码块
这里通过变量作用域的两种错误用法来介绍一下C语言变量作用域 其次对代码块的使用进行了简单说明: #include <stdio.h> 1.变量的作用域(作用范围) 变量定义的那一行开始,直 ...
- Siverlight+WCF+Nhibernate 开发之旅(一)
最近正在开发sl程序,考虑了很久,参考了一些框架,令人头疼的数据访问层最终选择wcf+nhibernate,至于为什么选择wcf和nh,个人参考了其他的框架感觉这两者结合从开发效率和便捷性方面比其他的 ...
- APUE读书笔记-第14章-高级I/O
14.1 引言 *高级I/O包括非阻塞I/O.记录锁.系统V流机制.I/O多路转换(select和poll函数).readv和writev函数以及存储映射I/O(mmap) 14.2 非阻塞I/O * ...
- 【我所認知的BIOS】—>ADU.exe
[我所認知的BIOS]—>ADU.exe By LightSeed 2009-5-12 1.概要 在學習的過程中,肯定會要用不少的工具,作為底層的engineer那麼用的工具大多是DOS下.在D ...
- Python操作Access数据库
我们在这篇文章中公分了五个步骤详细分析了Python操作Access数据库的相关方法,希望可以给又需要的朋友们带来一些帮助. AD: Python编 程语言的出现,带给开发人员非常大的好处.我们可以利 ...
- 按模板打印word防止并发操作
/// <summary> /// /// <summary> /// 打印人员备案表 /// </summary> /// <param name=&quo ...