bootstrap怎么实现响应式布局

响应式布局概念：

响应式web布局是让用户通过不同尺寸的浏览器都可以获得良好视觉的一种方法。是目前比较流行的一种布局方法。

bootstrap响应式布局实现原理：

通过CSS3 Media Queries（媒体（设备）查询），媒体查询是让页面内容在不同的媒体环境下运行时可以展示不同的样式（这个样式当然是由我们来书写规定的）。

@media是CSS3中规定的属性，它可以实现针对不同媒体设备来设置不同的样式的目的。而且就算是在同一设备中它也可以在你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

应用：

Bootstrap主要用到min-width、max-width，以及and语法，用于在不同的分辨率下设置不同的CSS样式。

@media的语法

@media mediatype and|not|only (media feature) {
CSS-Code;
}

其中mediatype有print（打印设备）、screen（用于电脑屏幕，平板电脑，智能手机等）、speech（应用于屏幕阅读器等发声设备）；media feature则是用来规定如最大宽度或者最小宽度。

我们来看看bootstrap中布局容器的例子：

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。

如下

固定宽度布局
<div class="container">
...
</div>
或者 流式布局
<div class="container-fluid">
...
</div>

在bootstrap的css文档中@media属性

1591~1605行
 
@media (min-width: 768px) {
 .container {
 width: 750px;
 }
}
@media (min-width: 992px) {
 .container {
 width: 970px;
 }
}
@media (min-width: 1200px) {
 .container {
 width: 1170px;
 }
}
……

以上代码实现了随浏览器宽度的变化container容器的宽度也进行变化。

推荐：bootstrap入门教程