javaWeb项目中的Bootstrap 响应式布局(一)

     最近在做javaWeb项目的时候接触到一个布局框架感觉用处很大，所以在这里总结一下。

当然，每一个牛B的框架背后肯定都会有一个官方文档的，所以大家也可以去官方文档去看看它的使用。
Bootstrap中文官方文档：http://v3.bootcss.com/
Bootstrap英文官方文档http://getbootstrap.com/2.3.2/

一、简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

该图来源于菜鸟教程:http://www.runoob.com/bootstrap/bootstrap-intro.html

二、Bootstrap 网格系统（Grid System）

    由于Bootstrap中的这一特性广泛应用于手机和电脑上边，它的屏幕适配非常的好用，所以这篇文章主要总结一下这一块的知识。

该图来源于菜鸟教程:http://www.runoob.com/bootstrap/bootstrap-intro.html

从下方的一个基本结构总结他的特性：

<div class="container">
<div class="row">
<div class="col--"></div>
<div class="col--"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....

从上边可以看出其工作原理为：

1、行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
2、内容应该放置在列内，且唯有列可以是行的直接子元素。
3、预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
4、网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

三、适配的设备

来自Bootstrap中文网的表格

四、结言

   其实本篇文章总结的并不是很好，器只要目的是希望喜欢学习的同学们能够多多去看官方文档，因为我跟人感觉该框架的官方文档已经说的很好了，例子也有很多大家只要看一看就会使用了！