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. hadoop笔记之Hive的管理(CLI方式)

    Hive的管理(一) Hive的管理(一) Hive的启动方式 CLI(命令行)方式 Web界面方式 远程服务启动方式 CLI方式 1. 进入命令行方式 直接输入<HIVE_HOME>/b ...

  2. javaTemplates-学习笔记四

    应用的调用顺序理解 这个地方很薄弱,浏览器 http://localhost:9000/index.html  ->  conf/routes  ->  app/controllers/A ...

  3. Python核心编程笔记---- print@2

    print 的输出从定向问题 print 可以用’>>‘来重定向输出,下面是例子 f = open('D:/python.txt','w+') print >> f," ...

  4. 关于ODI agent的配置部署

    分类: Linux 最近,做了几个ODI项目的部署,发现ODI agent所在的位置对整个E-LT工作的影响还是比较大的,根据Oracle的官方说法,agent一般需要部署在目标端的数据库服务器上,或 ...

  5. J2SE知识点摘记(八)

    1.        多线程指的是在单个进程中可以同时运行多个不同的线程,执行不用的任务.多线程意味着一个程序的多行语句可以看上去几乎同时进行. 同样作为基本的执行单元,线程是划分得比进程更小的执行单位 ...

  6. IP地址获取到为0:0:0:0:0:0:0:1

    引用 13 楼 oXiaoShe 的回复: Quote: 引用 11 楼 ahjsdzm 的回复: [Quote=引用 9 楼 huazaiyou 的回复:]最近在进行web开发时,遇到了reques ...

  7. MojoliciousLite: 实时的web框架 概述

    MojoliciousLite: 实时的web框架: SYNOPSIS 简介: # Automatically enables "strict", "warnings&q ...

  8. sshuttle基于VPN的透明代理,安全连接

    sshuttle基于VPN的透明代理, 通过 ssh 创建一条从你电脑连接到任何远程服务器的 VPN 连 sudo sshuttle -r username@sshserver 0.0.0.0/0 - ...

  9. Unix/Linux环境C编程入门教程(14) Mandriva LinuxCCPP开发环境搭建

    1. Mandriva是目前全球最优秀的Linux发行版之一,稳居于linux排行榜第一梯队. Mandriva公司现在仍然是 这个时候mandriva Linux系统安装完成,基于Mandriva的 ...

  10. Unix/Linux环境C编程入门教程(11) 开发环境搭建VMWare虚拟安装之虚拟化检测

    常开启虚拟化技术.如果你的主板是最新的,它在冷启动后能够检测到配置变化.每当我改变我的主板上的VT设置,它都会自动推迟下次重新启动生效.如何确定VT已经开启或禁用? 如图表示成功开启了VT. F10 ...