Bootstrap 网格系统基于一个响应式的12列布局，它允许开发者快速地创建复杂的布局。这个系统使用一系列容器（containers）、行（rows）和列（columns）来布局和对齐内容。以下是它的工作原理的具体步骤：
1. 容器（Containers）
Bootstrap 网格系统首先需要一个容器（.container 或者 .container-fluid）来包裹网站内容。
.container类提供一个固定宽度且居中的容器，宽度取决于浏览器窗口的大小。.container-fluid类提供一个全宽的容器，占据100%的视口（viewport）宽度。
2. 行（Rows）
在容器内，你需要使用行（.row）来创建一组横向的列。
- 行作为列的直接父元素，用于创建列之间的水平组。
- 行通过负边距来抵消列的内边距（padding），这样就可以保证内容贴近容器的边缘。
3. 列（Columns）
行内部，你可以添加多个列（.col-大小）来创建你的布局。
- 列通过内边距（padding）来创建列内容之间的间隔。
- 列的大小可以通过添加不同的类来指定，例如
.col-1到.col-12，表示占据1/12到全部（12/12）的容器宽度。 - Bootstrap 也支持响应式布局，可以通过添加如
.col-md-大小 的类来指定在不同尺寸的屏幕下列的表现。 - 例如
.col-md-6会在中等尺寸的屏幕（如平板电脑）上占据半个容器的宽度。
4. 响应式断点（Responsive Breakpoints）
Bootstrap 网格系统使用一系列的响应式断点，来适配不同尺寸的屏幕，这些断点包括以下几种：
- Extra small (
xs) - <576px - Small (
sm) - ≥576px - Medium (
md) - ≥768px - Large (
lg) - ≥992px - Extra large (
xl) - ≥1200px - XXL (
xxl) - ≥1400px
开发者可以根据需要添加特定的类来定义元素在不同断点下的表现。
例子：
假设你想创建一个三列的布局，在中等尺寸屏幕以上都是三列并排显示，在手机屏幕上则堆叠显示，你可以这样做：
<div class="container"> <div class="row"> <div class="col-md-4">Column 1</div> <div class="col-md-4">Column 2</div> <div class="col-md-4">Column 3</div> </div> </div>
在这个例子中，每个 .col-md-4 类的列占据4个网格单位，因此在中等尺寸的屏幕或更大尺寸上，三列将平分容器宽度。在小于768px宽的屏幕上，由于没有指定sm或xs类，列会自动堆叠，每列占据整行宽度。
通过合理使用 Bootstrap 网格系统，你可以创建出既灵活又响应式的布局，以适应不同设备和屏幕尺寸。