bootstrap栅格系统布局网页代码

Bootstrap栅格系统是一种用于响应式网页设计的网格布局工具，它基于HTML、CSS和JavaScript框架，让开发者可以轻松地创建适应不同设备屏幕大小的布局。Bootstrap提供了一套预定义的列（column）尺寸，通过`<div>`元素配合`.col-*-*`类来创建。

基本的语法如下：

<div class="container">
  <div class="row">
    <div class="col-sm-4"> <!-- small screens (≥768px) -->
      <!-- Your content here -->
    </div>
    <div class="col-sm-4"> <!-- another column on small screens -->
      <!-- Content for this column -->
    </div>
    <div class="col-sm-4"> <!-- and so on... for the remaining columns -->
      <!-- ... -->
    </div>
  </div>
</div>

这里的`sm-4`表示该列在小屏幕设备（如平板电脑）上占据12个等宽的单元格中的4个。你可以根据需要调整列数和屏幕尺寸（例如，`lg-6`代表大屏幕设备上的6列）。通过这样的结构，内容可以在不同分辨率下自动调整其宽度和排列。