先上点媒体查询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. OpenGL Driver Architecture[转]

    http://www.cnblogs.com/cgwolver/archive/2009/01/04/1368350.html

  2. python 常见排序实例

    使用Python 基础排序算法设计,冒泡排序,插入排序,快速排序... 需求 对一组无序数据进行排序算法设计,要求如下: 输入:[1, 3, 5, 23, 75, 34, 456, 86, 22, 7 ...

  3. mysql 查询表结构 查询索引

    首先进入到mysql里 show databases; 选择数据库 use xxxcms; 查询数据库下的表结构 show create table 表名; 这样看着不太好可以后面加\G show c ...

  4. ElasticSearch之二——集群

    ElasticSearch 集群 首先看下ElasticSearch(ES)的架构: 术语解释: cluster:代表一个集群,集群中有多个节点,其中有一个master节点,master通过选举自动产 ...

  5. Python 对象的引用计数和拷贝

    Python 对象的引用计数和拷贝 Python是一种面向对象的语言,包括变量.函数.类.模块等等一切皆对象. 在python中,每个对象有以下三个属性: 1.id,每个对象都有一个唯一的身份标识自己 ...

  6. 在ASP.MVC中使用Ajax

    Asp.net MVC 抛弃了Asp.net WebForm那种高度封装的控件,让我们跟底层的HTML有了更多的亲近.可以更自由.更灵活的去控制HTML的结构.样式和行为.Asp.net MVC可以更 ...

  7. java从一个目录拷贝文件到另一个目录下

    ** * 复制单个文件 * @param oldPath String 原文件路径 如:c:/fqf.txt * @param newPath String 复制后路径 如:f:/fqf.txt * ...

  8. linux访问windows共享文件夹的方法

    博客转自:http://www.01happy.com/linux-access-windows-shares-folders/ 有时需要在linux下需要访问windows的共享文件夹,可以使用mo ...

  9. 浙大PAT-1001

    1001. 害死人不偿命的(3n+1)猜想 (15) 卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反复砍下去, ...

  10. iOS分类、延展和子类的区别

    iOS分类.延展和子类的区别 类别.延展.子类的区别   类别 延展 子类 功能 为类添加方法,不用知道类的源码,添加变量(通过运行时,具体参考下面注解) 为类添加私有变量和私有方法,在类的源文件中书 ...