Bootstrap布局之栅格系统学习笔记

针对“Bootstrap布局之栅格系统学习笔记”的完整攻略，我将从以下几个方面进行讲解：

1. 栅格系统的概念

栅格系统（Grid System）是Bootstrap中的核心组件之一。它是一种基于行（row）和列（col）的布局系统，用于构建响应式网页布局，可以方便地实现各种设备上的页面排版。 栅格系统的基础是12列的网格，每个网格默认宽度为1/12，可以通过栅格系统类名来定义实际宽度，如col-md-4表示占据4个网格（即4/12）。

2. 栅格系统的使用

2.1 栅格系统类名

Bootstrap的栅格系统是通过一系列类名来实现的，主要包括以下类名：

• .container和 .container-fluid：用于包含并管理网页的布局；
• .row：定义一行元素；
• .col-{size}-{num}：定义一个基本单元格，size表示屏幕大小，num表示占据多少个网格。

其中，size表示屏幕大小，通常包括以下四种：

• xs：超小屏幕（<576px）
• sm：小屏幕（≥576px）
• md：中等屏幕（≥768px）
• lg：大屏幕（≥992px）

2.2 栅格系统示例

下面是一个简单的栅格系统示例，用于在小屏幕和中等屏幕上显示一个行和两个等宽列：

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-6">Column 1</div>
    <div class="col-sm-6 col-md-6">Column 2</div>
  </div>
</div>

在这个例子中，通过.container容器将.row行进行包含，再通过.col-sm-6和.col-md-6定义两个等宽列。在小屏幕下，两个列会分别占据100%的宽度，而在中等屏幕及以上的情况下，两个列会分别占据50%的宽度。

下面是另一个栅格系统示例，用于在小屏幕上显示3列，中等屏幕上显示4列：

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-md-3">Column 1</div>
    <div class="col-sm-4 col-md-3">Column 2</div>
    <div class="col-sm-4 col-md-3">Column 3</div>
    <div class="col-md-3 d-none d-md-block">Column 4</div>
  </div>
</div>

在这个例子中，通过.col-sm-4和.col-md-3定义每个列占据4个网格和3个网格的宽度。在小屏幕下，三个列依次排列，每个列占据1/3的宽度。而在中等屏幕及以上的情况下，第四列会出现，占据1/4的宽度，而另外三列也会相应缩小。

希望这份攻略可以帮到你，更深入细致的学习还需要自己继续实践和探索。