Bootstrap开发漂亮的前端界面之实现原理

引：Bootstrap采用的是一个“响应式”设计。响应式Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如，您先在计算机显示器上浏览一个网站，然后再智能手机上浏览，智能手机的屏幕 尺寸远小于计算机显示器，但是你却没有感觉到任何差别，两者的用户体验几乎一样，这说明这个网站在响应式设计方面做得很好(响应式:简单可以理解为不同的 设备屏幕的大小是不同的，但是页面中的内容是固定的，为了让用户在不同大小屏幕看到的内容更加友好，页面的内容或排版需要更随屏幕的变化而变化)。

一个简单的列子：问题分析，我们需要做一个网站，而且需要让网页中的内容居中显示（90%的网站都是如此）。

1440*900分辨率效果如下：

通过firebug工具查看到container的内容宽度为1150,内边距为15（左边、右边）*2,所占总宽度为1150+15*2=1180px。

接下来，请尝试拖动浏览器让浏览器的宽度变小，注意当浏览器的宽度小于1200px的时候你会发现container的宽度变为了970(内容宽度940+内边距为15（左边、右边）*2)

 

通过浏览器宽度修改而导致container的宽度变化的这个细节，我们可以看出bootstrap内部感知的了这个小细节，并且做出了一定的响应。那么Bootstrap到底使用了什么高端的技术来实现这个功能的。

CSS3 Media Queries（媒体（设备）查询）

Media Queries含义：为不同的媒体类型添加某些条件，检测设备并采用不同的样式表。

简单例子：

图为普通屏幕和打印分别定义样式

普通页面显示内容为：

打印预览页面显示内容为 (firefox打印预览显示：文件--->打印预览)

通过以上的一个简单的例子你已经知道Media Queries（媒体查询）到底能干什么了，页面内容在不同的媒体环境运行时，会自动查询应用我们编写的特定样式。

Bootstrap中也是使用了Media Queries（媒体查询）来实现了响应式布局 ，bootstrap.css中定义如下代码:

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

@media部分代表任何媒体 

(min-width: 1200px)部分代表条件,min-width指媒体（浏览器）宽度不小于（大于）1200条件成立。 比如：浏览器的宽度为1250，条件成立使用该样式。浏览器的宽度为1119，条件不成立。

bootstrap.css中很多地方都使用了@media（media queries媒体查询），比如工具条、栅格（网格）系统。建议各位读者打开bootstrap.css文件，搜索“@media”，对这些样式进行分 析，这对学习bootstrap非常有帮助。

关注作者：