Bootstrap网格系统教程

Bootstrap 的网格系统是一种强大的响应式布局工具，它允许你创建复杂且响应迅速的页面布局。

网格系统简介

Bootstrap 的网格系统基于行（row）和列（column）的概念。行将水平空间划分为 12 个等宽的单位（也称为栅格单元），你可以根据需要将这些单位分配给列。

基本用法

要使用网格系统，首先需要创建一个容器（container），然后在容器内创建行（row），最后在行内创建列（column）。

示例代码

<div class="container">
    <div class="row">
        <div class="col-md-4">列 1</div>
        <div class="col-md-4">列 2</div>
        <div class="col-md-4">列 3</div>
    </div>
</div>

            

案例讲解

上面的示例代码创建了一个包含三个列的简单布局。每个列使用了 col-md-4 类，这意味着在中等及更大屏幕上，每个列将占据 4 个栅格单元（总共 12 个栅格单元），因此每行会有三个等宽的列。

响应式设计

Bootstrap 的网格系统支持响应式设计，这意味着你可以根据屏幕大小定义不同的列宽。以下是一些常用的响应式类：

• col-sm-*：适用于小型设备（≥576px）
• col-md-*：适用于中型设备（≥768px）
• col-lg-*：适用于大型设备（≥992px）
• col-xl-*：适用于超大型设备（≥1200px）

示例代码

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-6 col-md-4">响应式列</div>
        <div class="col-12 col-sm-6 col-md-4">响应式列</div>
        <div class="col-12 col-md-4">响应式列（仅在中等及以上设备显示）</div>
    </div>
</div>

            

案例讲解

在这个示例中，第一个和第二个列在小型设备上会占据整行（12 个栅格单元），在中等及以上设备上会各占据 6 个栅格单元（即一半）。第三个列在小型设备上不会显示，但在中等及以上设备上会占据剩余的 4 个栅格单元。

总结

Bootstrap 的网格系统是一个非常强大的工具，它允许你轻松地创建复杂且响应迅速的页面布局。通过合理使用响应式类，你可以确保你的网站在各种设备上都能提供良好的用户体验。