先上点媒体查询css（某个著名的”段子“），跟bootstrap无关：

<html>

<head>

<style>

body {

    background-color: white;

}

@media screen and (max-width: 960px){

    body {

        background-color: red;

    }

}

@media screen and (max-width: 768px){

    body {

        background-color: yellow;

    }

}

@media screen and (max-width: 550px){

    body {

        background-color: green;

    }

}

@media screen and (max-width: 320px){

    body {

        background-color: blue;

    }

}

</style>

</head>

<body>

</body>

</html>

保存以上文件为test.html, 然后用浏览器打开。缩放浏览器看效果。（ps：如果看不到任何效果，说明你的浏览器太老了，不支持css3）

再来说bs的布局：默认情况下，bs认为你是在为移动设备编写样式！

注意这句，但前提是，网页的head里要加这么一段：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

然后，就可以愉快的忽略上面css样式的问题。不用为了某个尺寸的设备写一大堆重复的代码。

当然， 必要时需要写少量代码，做某个尺寸设备的适配。配合 :

visible-lg/sm/md

hidden-xs/sm/md/lg

来动态显示，宽度比例的调整根据col-lg/md/sm/xs-1～12 来做。

bootstrap 响应式布局的更多相关文章

  1. Bootstrap响应式布局

    Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...

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

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

  3. Bootstrap响应式布局介绍

    一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...

  4. bootstrap响应式布局原理

    百分比布局+媒体查询 首先通过媒体查询确认container的宽度,每个col-xx-xx都是通过百分比定义的,屏幕尺寸变化了,container就变化了,col自然就变了 Bootstrap的官方解 ...

  5. Bootstrap响应式布局(1)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. css模拟Bootstrap响应式布局——栅格

    做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...

  7. bootstrap响应式布局简单实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. bootstrap响应式布局列子

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

  9. Bootstrap页面布局7 - Bootstrap响应式布局的实用类

    在bootstrap-responsive.css这个CSS样式表中已经为我们设定好了几个实用的类: .visible-phone: 在智能手机设备上显示这个元素,在其他设备上隐藏该元素 .visib ...

随机推荐

  1. iOS直播点赞动画,iOS直播心型点赞动画

    https://github.com/songxing10000/LikeAnimation-PraiseAnimation

  2. CLR

    [精]步步为营 C# 技术漫谈 三.公共语言运行库(CLR) http://www.cnblogs.com/springyangwc/archive/2011/06/12/2079250.html [ ...

  3. centos忘记开机密码

    系统:centos6.6,忘记开机密码,进入单用户模式进行重置,以下为操作过程. 1. reset(重启)Linux系统,在出现如下图的界面时,请点Enter键,确保一定要快,只存在几秒.. 2.点击 ...

  4. rpm 命令

    这些事rpm的常用参数!!! 你可以在linux下man 一下rpm就知道了!!! 不过是英文的,不然你可以百度一下rpm就知道了额!!! 下面我帮你贴几个!!!!rpm 常用命令1.安装一个包 # ...

  5. Kafka——分布式消息系统

    Kafka——分布式消息系统 架构 Apache Kafka是2010年12月份开源的项目,采用scala语言编写,使用了多种效率优化机制,整体架构比较新颖(push/pull),更适合异构集群. 设 ...

  6. Python操作 RabbitMQ、Redis、Memcache、SQLAlchemy

    Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...

  7. 【转】asp.net mvc 页面跳转

    1.使用传统的Response.Redirect例如string url = "/account/create";Response.Redirect(url); 1.Server. ...

  8. rehat 出现GDB debuginfo-install 问题处理

    本人使用rhel 6    GDB 调试代码时,出现以下错误: Missing separate debuginfos, use: debuginfo-install glibc-2.12-1.166 ...

  9. mapreduce 自定义数据类型的简单的应用

    本文以手机流量统计为例: 日志中包含下面字段 现在需要统计手机的上行数据包,下行数据包,上行总流量,下行总流量. 分析:可以以手机号为key 以上4个字段为value传传递数据. 这样则需要自己定义一 ...

  10. php 计算字符串长度

    在项目的开发中,常常遇到要计算一个字符串的长度(中英文结合),由于产品要求不同,每个中文的长度要求也不一样. 解决utf-8编码下的字符串长度(可自定义每个中英文算几个字节) /** * 计算字符串长 ...