一、Bootstrap网格系统简介

Bootstrap是一种流行的前端框架，它提供了一套响应式的CSS和JS组件，帮助开发者快速构建现代Web应用程序。其中，网格系统是Bootstrap布局的核心，允许开发者通过简单的类来创建复杂的布局。

二、基本使用

Bootstrap的网格系统基于行（row）和列（column）的概念。一行可以包含多个列，列可以通过类来定义其宽度。

                <div class="row">
                    <div class="col">列1</div>
                    <div class="col">列2</div>
                </div> 
            

三、响应式布局

Bootstrap的网格系统支持响应式布局，可以根据设备的屏幕大小自动调整布局。通过使用不同前缀的类，可以定义在不同屏幕尺寸下的列宽。

                <div class="row">
                    <div class="col-6 col-sm-4">在小屏幕设备上占用四分之三的宽度</div>
                    <div class="col-6 col-sm-8">在小屏幕设备上占用四分之一的宽度</div>
                </div> 
            

四、案例讲解

案例1：创建一个简单的两栏布局

在此案例中，我们将创建一个简单的两栏布局，左边是导航栏，右边是主要内容。

案例2：创建一个响应式的三栏布局

在此案例中，我们将创建一个可以在不同屏幕尺寸下自适应的三栏布局。