一、Bootstrap 栅格系统简介

Bootstrap 提供了一个响应式的栅格系统，用于创建布局和页面结构。该系统基于行（row）和列（column）的概念，可以轻松实现不同屏幕大小的布局调整。

二、如何开始使用 Bootstrap 栅格系统

1. 创建一个容器（container），这是布局的起始点。
2. 在容器内创建行（row），包含一组列。
3. 使用列（column）来安排内容。

三、案例讲解：创建一个简单的响应式布局

HTML 代码：

                
                    <div class="container">
                        <div class="row">
                            <div class="col-sm">列 1（在小屏幕上占用全部宽度）</div>
                        </div>
                        <div class="row">
                            <div class="col-sm">列 2（在小屏幕上占用一半宽度）</div>
                            <div class="col-sm">列 3（在小屏幕上占用一半宽度）</div>
                        </div>
                    </div>
                
            

在上述代码中，使用了 Bootstrap 的栅格系统创建了一个简单的响应式布局。在小屏幕上，第一列占用全部宽度；而在较大的屏幕上，第一列被分割成两个等宽的列。

四、进阶使用技巧