Bootstrap的栅格系统是一种响应式的网格布局系统，用于在不同屏幕尺寸下实现页面布局的自适应。栅格系统基于12列的布局，可以让开发者轻松地创建响应式的网页布局。
工作原理如下：
容器（Container）：Bootstrap的栅格系统是建立在一个容器之上的。容器是网页布局的基本结构，用于包裹网页内容并设置最大宽度。Bootstrap提供了两种类型的容器：固定宽度容器（.container）和全宽度容器（.container-fluid）。
行（Row）：在容器内部，页面被分割成行。每一行（.row）包含了12个列（Column），用于组织页面内容。
列（Column）：每个列（.col）可以占据1到12个列的宽度，通过设置不同的列宽度，可以实现不同屏幕尺寸下的布局。例如，一个列设置为col-6表示占据6个列的宽度，占据一半的屏幕宽度。
响应式布局：Bootstrap的栅格系统可以根据不同的屏幕尺寸自动调整列的宽度。通过设置不同的响应式类（如col-sm、col-md、col-lg等），可以控制列在不同屏幕尺寸下的表现。
偏移（Offset）和间隔（Margin）：除了设置列的宽度外，Bootstrap还提供了偏移和间隔的类，用于调整列之间的间距和位置。
总的来说，Bootstrap的栅格系统通过将页面划分为12列的网格布局，并提供响应式的类来控制布局在不同屏幕尺寸下的表现，从而实现了灵活的网页布局。
