Bootstrap学习：Bootstrap 网格系统

    前面3节其实就是对w3c菜鸟日记的一个粘贴复制，下面开始真正的学习之路不过之。

Bootstrap 网格系统

    先做个介绍吧，看不懂的可以掠过，一样取自《w3c菜鸟日记》

什么是网格（Grid）？

摘自维基百科：

在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的非常有效的方法。

简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。

什么是 Bootstrap 网格系统（Grid System）？

Bootstrap 官方文档中有关网格系统的描述：

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。

移动设备优先策略

• 内容

  • 决定什么是最重要的。

• 布局

  • 优先设计为更小的宽度。

  • 基础的 CSS 地址是移动设备优先，媒体查询地址是针对于平板电脑、台式电脑。

• 渐进增强

  • 随着屏幕大小的增加而添加元素。

其实说白了就是布局！！！

接下来就来说下这个网格系统。

网格选项

下面的截图可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动设备上面进行工作的。

下标总结了 Bootstrap 网格系统如何跨多个设备工作:

    从上面的截图可以看出来，Bootstrap针对不同尺寸的屏幕（包括手机、平板、PC等等）设置了不同的样式类，这样让开发人员在开发时可以有更多的选择。如果在一个元素上使用多个不同的上面的样式类，那么元素会根据在不同尺寸选择最合适（匹配最理想的）的样式类。简单的举例进行说明：比如在一个元素上我们使用了两个样式 类：.col-md-和.col-lg。可以对照上面的截图来看

　　第一种情况：尺寸》=1200px;那么会选择.col-lg。

　　第二种情况：尺寸》=992px 并且尺寸《=1200px;那么会选择.col-md。

　　第三种情况如果尺寸《992px;那么这两个样式类都将不会作用于元素上。

    （这个可以通过浏览器缩小窗口看出）

基本的网格结构

 　　栅格选项中的四个样式类的使用都是依附于.row类的基础上，而.row类通常都会在.container的里进行。

      

          

   ...