Bootstrap教程笔记（二）------网格系统

1.Bootstrap网格系统有以下5个类：

    .col- 针对所有设备

    .col-sm- 平板 屏幕宽度等于或大于576px

    .col-md- 桌面显示器 屏幕宽度等于或大于768px

    .col-lg- 大桌面显示器 屏幕宽度等于或大于992px

    .col-xl- 超大桌面显示器 屏幕宽度等于或大于1200px

2.Bootstrap网格基本结构

<!--第一个例子：控制列的宽度以及在不同设备上如何显示-->
<div class="row">
    <div class="col-*-*></div>
</div>
<div class="row">
    <div class="col-*-*></div>
    <div class="col-*-*></div>
    <div class="col-*-*></div>
</div>

<!--第二个例子：让Bootstrap自动处理布局-->
<div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

简单解释一下：第一个例子，通过<div class="row">创建一行，然后通过<div class="col-*-*">将行分成列。第一个*表示相应的设备sm，md，lg或sl，第二个*表示每列所占的宽度，用一个数字表示，同一行的数字相加为12。第二个例子，不在每个col上添加数字表示宽度，而是让bootstrap根据列的数目自动处理布局，同一行的列宽度相同，有几列就将宽度平分为几部分。

有几个实例如下：

<!--自动布局-->
<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<!--等宽响应式列-->
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>

<!--不等宽响应式列-->
<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>