bootstrap响应式布局
乔乔 2014-05-03
关于作者：
- 郑云飞(天放), 程序员Java
- weibo：@tianFang
- blog: zhengyunfei.iteye.com
- email: [email protected]
- 学习路线图
- 跟我一步一步学习bootstrap
bootstrap在网页中使用
bootstrap布局
bootstrap响应式布局
现在呢用户上网所使用的设备都不太一样，又可能是大屏幕的桌面电脑，也可能是平板电脑，或者是智能手机，那么这些设备屏幕的上网尺寸都不太一样，如果你想在不同的上网设备上优化页面的设计的话，你可以考虑使用响应式的布局设计，响应式布局就是根据浏览窗口的尺寸做出相应的变化，比如你可以设置当浏览窗口小于940像素的时候，文字的大小变成15像素，原理呢其实很简单，就是利用css3的media queries来判断浏览窗口的尺寸，我们可以在css样式表里面去设计一些规则，比如当浏览窗口的宽度小于或者是大于某个尺寸的时候，那么应用某些特定的样式，比如找一些代码，@media (max-width:767px){}。那么这一行代码的意思就是当浏览窗口小于767像素的时候，在页面里面去应用｛｝大括号之间去定义的那些样式，下面我们通过一个简单的演示来帮助你理解一下响应式的布局设计，我们先创建一个mediaqueries.html文件，
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
</head>
<body>
</body>
</html>下面我们为这个页面去添加一下样式，首先我们为这个页面添加，body{background:#000;}这样就把页面的背景颜色设置为黑色，再加入下面这行代码 @media (max-width: 767px) {body{background: #f00;}
}这行代码的意思就是当窗口的宽度小于767像素的时候，就重新定义body的背景颜色变为#f00红色，下面我们在浏览器中预览一下；
下面我们把窗口的宽度缩小，小于767像素的时候，窗口如下：
窗口的颜色变为红色。
我们可以把max-width:767px换成min-width:767px;效果正好相反，当窗口的宽度小于767像素的时候，背景颜色是黑色，大于等于767像素的时候背景颜色是红色。我们还可以组合一下，@media(min-width:767px) and (max-width:979px){body{background:#foo;}}这段代码的意思就是当窗口的尺寸在767px和979px的时候，会触发我们在大括号里面定义的样式
上一篇博客：bootstrap布局 下一篇博客：工作中遇到的bootstrap知识点总结
