今天完成的事：学习了栅格系统和初步了解了bootstap

Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)，支持Sass mixins自由调用，并结合自己预定义的CSS、Js类，用来创建各种形状和尺寸的布局。

机制原理

Bootstrap的网格系统使用一系列div容器的行、列来布局和对齐内容，不同于旧版3.0，新版是完全基于flexbox流式布局构建的，完全支持响应式标准。下面的示例，可以让我们深入了解网格如何组合在一起。

三分之一空间占位三分之一空间占位三分之一空间占位Copy

<div class="container">   <div class="row">     <div class="col-sm">       三分之一空间占位     </div>     <div class="col-sm">       三分之一空间占位     </div>     <div class="col-sm">       三分之一空间占位     </div>   </div> </div>

上面的例子使用BootStrap预定义的栅格系统，演示了在.container容器内建立了三个等宽的列，并且分别兼容在small(极窄宽度网页)、medium(中等宽度网页)、large(宽网页)、extra large(超宽网页)四种设备类型-即无论网页宽度如何，这三个列都是恒在呈现的。

让我们来慢慢揭开它的工作原理：

• 栅格系统提供了集中内容居中、水平填充网页内容的方法，使用.container(严格意义上也包括.container-fluid，后文相同不再备注-译者)应答网页宽度，或使用.container-fluid使网页能够以100%宽度呈现在所有的浏览器窗口或设备尺寸上。
  换一个说法就是：.container实现固定的宽度并居中呈现，.container-fluid实现全宽度，并和其它网格实现对齐(译者注)。
• 行(.row)是列(.col-*)的横向组合和父容器(它们有效组织在.row下)，每列都有水平的padding值，用于控制它们之间的间隔，同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验。
• 网页开发者的呈现内容必须放置在列(.col-*中，而且只有列可以是行的直接子元素，否则都是违法的(不可以在.col-*以上添加呈现内容。
• 这一切都要感谢flexbox流式布局，从而使我们不需要指定列的宽度(旧版Bootsrap3是采用严格宽度定义来实现的)就能实现网页自动等宽排列，比如我们在.container中置入初始化的四个.col-sm就能实现各自25%宽度并左对齐形成一行的排列。更多示例，请参阅本文档 自动布局列部分。
• 你可能注意到.col-*后面有不同的数字，如.col-sm-4或.col-xl-12，这些css类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列。如果你想用三个等宽的列，则取12的三分之一，即.col-sm-4就是正确的(后文会有详细的介绍)。
• .col-*的width属性(即列宽)是用百分比来表现和定义的，所以它们总是流式的，其尺寸大小受父元素的定义影响(这正是flexbox布局的特征，子元素的宽比和排列受父元素定义)。
• 列具有水平padding定义，用于创建列与列之的间隙。
• .row上带有margin-left: -15px;margin-right: -15px;属性，你可以在.row上上定义.no-gutters属性，从而消除这个属性，使页面不会额外宽出30px，即<div class="row no-gutters"...。(译者原意拆成两行表述)。
• 总共有五个栅格等级，每个响应式分界点隔出一个等级：特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大（大、特大也可以称为宽、超宽）.col-xl-*。
• 栅格断点的媒体查询基于宽度的最小值，意味着它们应用到某一等级以及这一等级之上的所有（如.col-sm-4的的定义可以在小型、中型、宽、超宽设备上呈现，但不适用于能在超小型.col-sx上呈现）。
• 用户不需要自行定义网格，可以直接使用系统预定义的栅格类（如.col-4）或采用Sass mixins来进行更多的语义标记满足开发需要。

请注意：Flexbox布局虽然很先进，但也有一定的限制和错误，如无法使用某些HTML元素作为弹性容器，点此可扩展相关知识。

栅格选项

Bootstrap使用ems或rems来定义大多数属性的规格大小、px用于全局层面网格断点和容器宽度（因为浏览器和设备的宽度是以像素px为单位，且不会随字体大小而变化）。

通过一个简单的表格查看Bootstrap的网格系统在各种屏幕和设备上的细节约定：

下面的列子，展示了一行两列与一行三列的布局，从xs（如上表如见，实际上并不存在xs这个空间命名，是以.col表示，下同不再注）到xl（即.col-xl-*）所有设备上都是等宽并占满一行，只要简单的应用.col就可以完成。

1 of 22 of 21 of 32 of 33 of 3Copy

<div class="container">   <div class="row">     <div class="col">       1 of 2     </div>     <div class="col">       2 of 2     </div>   </div>   <div class="row">     <div class="col">       1 of 3     </div>     <div class="col">       2 of 3     </div>     <div class="col">       3 of 3     </div>   </div> </div>

等宽列可以分成多行，但是有一个Safari旧版浏览器的flexbox错误，阻止它在没有显示flex-basis或border（影响到边框效果）。
Bootstrap非官方的一个实例，已经介绍了两种解决方法，但如果是最新safri浏览器下，则不需要这样做。

下面是等宽列两行的处理方法，引用w-100进行切割分行：

ColumnColumnColumnColumnCopy

<div class="container">   <div class="row">     <div class="col">Column</div>     <div class="col">Column</div>     <div class="w-100"></div>     <div class="col">Column</div>     <div class="col">Column</div>   </div> </div>

设置一列宽度

在Flexbox的布局上，拥有很多现代特征，比如自动布局和列宽处理。你可以在一行多列的情况下，特别指定一列并进行宽度定义，同时其它列自动调整大小，可以使用预定义的栅格类（如下所示），从而实行栅格宽或行宽的优化处理。注意在这种民琣上，无论中心定义列的宽度如何，其他列都将调整大小。

1 of 32 of 3 (更宽-12格中占6格，其它6格另外两列平分)3 of 31 of 32 of 3 (更宽-12格中占5格,其它7格另外两列平分-不论奇偶都能达成)3 of 3Copy

<div class="container">   <div class="row">     <div class="col">       1 of 3     </div>     <div class="col-6">       2 of 3 (更宽-12格中占6格，其它6格另外两列平分)     </div>     <div class="col">       3 of 3     </div>   </div>   <div class="row">     <div class="col">       1 of 3     </div>     <div class="col-5">       2 of 3 (更宽-12格中占5格,其它7格另外两列平分-不论奇偶都能达成)     </div>     <div class="col">       3 of 3     </div>   </div> </div>

响应式的class选择器

Bootstrap的栅格系统包括五种宽带预定义，用于构建复杂的响应布局，你可以根据需要定义在特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大.col-xl-*五种屏幕(设备)下的样式。

覆盖所有设备

如果要一次性定义从最小设备到最大设备相同的网格系统布局表现，请使用.col和.col-*类。后者是用于指定特定大小的(如.col-6)，否则使用.col就可以了。

使用单一的.col-sm-*类方法，可以创建一个基本的网格系统，此时如果没有指定其它媒体查询断点宽度，这个栅格系统是成立的，而且会随着屏幕变窄成为超小屏幕.col-后，自动成为每列一行、水平堆砌。改变网页屏幕宽度你可以在下面列子看到效果：

col-sm-8col-sm-4col-smcol-smcol-smCopy

<div class="row">   <div class="col-sm-8">col-sm-8</div>   <div class="col-sm-4">col-sm-4</div> </div> <div class="row">   <div class="col-sm">col-sm</div>   <div class="col-sm">col-sm</div>   <div class="col-sm">col-sm</div> </div>

混合布局

设计师们当然不会简单的把各个屏幕下的栅格都做成一样，那将是单调乏味的，所以你可以根据需要对每一个列进行不同的设备定义。下方示例展示了原理：

.col-12 .col-md-8.col-6 .col-md-4.col-6 .col-md-4.col-6 .col-md-4.col-6 .col-md-4.col-6.col-6Copy

<!-- 定义在超小屏幕下1列全宽、1列半宽，而其它场景以8:4比例并行排列 --> <div class="row">   <div class="col-12 col-md-8">.col-12 .col-md-8</div>   <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row">   <div class="col-6 col-md-4">.col-6 .col-md-4</div>   <div class="col-6 col-md-4">.col-6 .col-md-4</div>   <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row">   <div class="col-6">.col-6</div>   <div class="col-6">.col-6</div> </div>

明天的事：继续任务8