浅析响应式网站布局Bootstrap

bootstrap是一款依赖于jquery开发的一款响应式网页布局的插件，可以针对不同的屏幕尺寸调整你的页面，使其在个尺寸屏幕上表现良好。

从bootstrap官方网站来看，bootstrap主要有下面几部分组成：

 

　　CSS——Bootstrap为我们预实现了很多CSS样式。包括一些图片以及网站的响应式布局。

　　组件——Bootstrap为我们预实现了很多CSS组件。如下拉框、按钮组、导航等。也就是说Bootstrap内容帮我们定义好了很多CSS样式，你可以将这些样式直接应用到之前的下拉框等元素里。

　　JavaScript插件——Bootstrap也为我们实现了一些JS插件，我们可以用其提供的插件要完成一些常用功能，而不需要我们再重新写JS代码来实现像提示框，模态窗口这样的效果了。

 

想要实现网站的响应式，最重要的原理就是css中的栅格系统。

　　

　　栅格系统用于通过一系列的行（row）与列（column）的组合创建页面布局，你的内容就可以放入创建好的布局中。下面就介绍以下Bootstrap栅格系统的工作原理：

• “行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 使用“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
• 通过设置padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。