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月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
随机推荐
- 监听enter事件
document.onkeydown=keyDownSearch; function keyDownSearch(e) { // 兼容FF和IE和Opera var theEvent = e || w ...
- Android BaseAdapter
ListView显示与缓存机制: 只会加载当前屏幕所要显示的数据.显示完成就会被回收到Recycler中. BaseAdapter 基本结构: public int g ...
- php的系统常量
认识一下系统常量 系统常量是PHP已经定义好的常量,我们可以直接拿来使用,常见的系统常量有: (1)__FILE__ :php程序文件名.它可以帮助我们获取当前文件在服务器的物理位置. (2)__LI ...
- Stream与byte转换
将 Stream 转成 byte[] /// <summary> /// 将 Stream 转成 byte[] /// </summary> public byte[] Str ...
- mini-httpd源码分析-mini-httpd.c之外总结
version.h #define SERVER_SOFTWARE "mini_httpd/1.21 18oct2014" #define SERVER_URL "htt ...
- 对手机SD卡的一些操作
首先要导入外包 log4j-1.2.16.jar 代码如下: package com.car273.util; import java.io.BufferedReader; import java.i ...
- 第五章 Spring3.0 、Hibernate3.3与Struts2的整合
5.1整合Spring与Hibernate 5.1.1使用MyEclipse加入Spring与Hibernate功能 使用MyEclipse工具主要是为了让工程拥有把数据表生成实体类与映射的功能.然后 ...
- centos6.5 openvpn安装配置
http://m.jb51.net/?host=www.jb51.net&src=http%3A%2F%2Fwww.jb51.net%2Fsoftjc%2F150885.html
- mysql字符集编码乱码测试如下
创建三个表tb_latin1,tb_utf8,tb_gbk,编码分别为latin1/utf8/gbk “你好a”字符串编码如下GBK : %C4%E3 %BA%C3 %61UTF-8 : %E4%BD ...
- Ruby on Rails开发Web应用的基本概念
Web应用架构 C/S架构 Web应用从最初就採用C/S架构.Server负责监听client请求,提供资源,Client向server发起请求并渲染页面.两者通过TCP/IP协议栈之上的HTTP协议 ...