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

什么是栅格系统？

栅格系统是Bootstrap框架中的一个重要组成部分，用于创建响应式的网页布局。它将页面水平划分为12个等宽的列，开发者可以根据需要将内容放置在这些列中，从而实现灵活的布局。

栅格系统的基本结构

栅格系统由行（row）和列（column）组成。行用于包含列，而列则用于放置内容。以下是栅格系统的基本结构：

<div class=\"container\">
  <div class=\"row\">
    <div class=\"col\">
      <!-- 内容 -->
    </div>
    <div class=\"col\">
      <!-- 内容 -->
    </div>
    <!-- 更多列 -->
  </div>
</div>

• .container：容器，用于包含整个栅格系统。它会根据屏幕大小自动调整宽度。
• .row：行，用于包含列。每一行都会自动清除浮动。
• .col：列，用于放置内容。可以根据需要指定不同的列宽。

栅格系统的列宽

栅格系统将页面水平划分为12个等宽的列。开发者可以根据需要将内容放置在这些列中，并指定列的宽度。以下是一些常用的列宽类：

• .col：默认的列宽，自动适应父容器的宽度。
• .col-6：占据父容器宽度的一半。
• .col-4：占据父容器宽度的1/3。
• .col-3：占据父容器宽度的1/4。

示例1：将内容分为两列，每列占据父容器宽度的一半。

<div class=\"container\">
  <div class=\"row\">
    <div class=\"col-6\">
      <!-- 左侧内容 -->
    </div>
    <div class=\"col-6\">
      <!-- 右侧内容 -->
    </div>
  </div>
</div>

示例2：将内容分为三列，每列占据父容器宽度的1/3。

<div class=\"container\">
  <div class=\"row\">
    <div class=\"col-4\">
      <!-- 左侧内容 -->
    </div>
    <div class=\"col-4\">
      <!-- 中间内容 -->
    </div>
    <div class=\"col-4\">
      <!-- 右侧内容 -->
    </div>
  </div>
</div>

栅格系统的响应式布局

栅格系统还支持响应式布局，可以根据屏幕大小自动调整列的宽度。以下是一些常用的响应式类：

• .col-sm：在小屏幕上占据父容器宽度的默认列宽。
• .col-md：在中等屏幕上占据父容器宽度的默认列宽。
• .col-lg：在大屏幕上占据父容器宽度的默认列宽。

示例3：在小屏幕上，将内容分为两列，每列占据父容器宽度的一半；在大屏幕上，将内容分为三列，每列占据父容器宽度的1/3。

<div class=\"container\">
  <div class=\"row\">
    <div class=\"col-6 col-lg-4\">
      <!-- 左侧内容 -->
    </div>
    <div class=\"col-6 col-lg-4\">
      <!-- 中间内容 -->
    </div>
    <div class=\"col-12 col-lg-4\">
      <!-- 右侧内容 -->
    </div>
  </div>
</div>

以上是关于Bootstrap布局之栅格系统的学习笔记，希望对你有所帮助！