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禁用响应式布局的更多相关文章

  1. 关于bootstrap和响应式布局

    bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...

  2. Bootstrap实战 - 响应式布局

    一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...

  3. 基于 bootstrap html 响应式 布局

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  4. bootstrap之响应式布局

    1.手动配置viewport 在HTML中: <meta name="viewport" content="width=device-width,initial-s ...

  5. 前端bootstrap框架禁用响应式的方法

    在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓“萝卜青菜各有所爱”,如果你想要使用Bootstrap开发自己的项目 ...

  6. 响应式布局之BootStrap

    本文在于巩固基础 学习bootStrap官网http://getbootstrap.com/ 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多 ...

  7. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  8. Bootstrap如何禁止响应式布局 不适配

    Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好.下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样. 禁止响应式布局有如下几步: 移除 此 ...

  9. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

随机推荐

  1. 监听enter事件

    document.onkeydown=keyDownSearch; function keyDownSearch(e) { // 兼容FF和IE和Opera var theEvent = e || w ...

  2. Android BaseAdapter

    ListView显示与缓存机制:      只会加载当前屏幕所要显示的数据.显示完成就会被回收到Recycler中.       BaseAdapter 基本结构:      public int g ...

  3. php的系统常量

    认识一下系统常量 系统常量是PHP已经定义好的常量,我们可以直接拿来使用,常见的系统常量有: (1)__FILE__ :php程序文件名.它可以帮助我们获取当前文件在服务器的物理位置. (2)__LI ...

  4. Stream与byte转换

    将 Stream 转成 byte[] /// <summary> /// 将 Stream 转成 byte[] /// </summary> public byte[] Str ...

  5. mini-httpd源码分析-mini-httpd.c之外总结

    version.h #define SERVER_SOFTWARE "mini_httpd/1.21 18oct2014" #define SERVER_URL "htt ...

  6. 对手机SD卡的一些操作

    首先要导入外包 log4j-1.2.16.jar 代码如下: package com.car273.util; import java.io.BufferedReader; import java.i ...

  7. 第五章 Spring3.0 、Hibernate3.3与Struts2的整合

    5.1整合Spring与Hibernate 5.1.1使用MyEclipse加入Spring与Hibernate功能 使用MyEclipse工具主要是为了让工程拥有把数据表生成实体类与映射的功能.然后 ...

  8. centos6.5 openvpn安装配置

    http://m.jb51.net/?host=www.jb51.net&src=http%3A%2F%2Fwww.jb51.net%2Fsoftjc%2F150885.html

  9. mysql字符集编码乱码测试如下

    创建三个表tb_latin1,tb_utf8,tb_gbk,编码分别为latin1/utf8/gbk “你好a”字符串编码如下GBK : %C4%E3 %BA%C3 %61UTF-8 : %E4%BD ...

  10. Ruby on Rails开发Web应用的基本概念

    Web应用架构 C/S架构 Web应用从最初就採用C/S架构.Server负责监听client请求,提供资源,Client向server发起请求并渲染页面.两者通过TCP/IP协议栈之上的HTTP协议 ...