bootstrap响应式页面布局

### 使用 Bootstrap 创建响应式页面布局

#### 选择合适的容器类型
为了创建响应式的网页，首先要决定使用的容器类型。有两种主要的选择：

- `container` 类提供了一个固定的宽度，并且在不同设备上有不同的默认宽度，在两侧保留一定的空白区域。
- `container-fluid` 则让容器占据整个视口的宽度，适合那些希望内容铺满屏幕的设计。

对于大多数情况下的标准布局，推荐使用带有边距的 `container`[^1]；而对于全宽展示的内容，比如图片轮播或背景图，则更适合采用 `container-fluid`[^2]。

<div class="container">
    <!-- 内容 -->
</div>

<div class="container-fluid">
    <!-- 内容 -->
</div>

#### 构建网格结构
接着利用Bootstrap内置的栅格系统来安排页面中的各个区块位置。每一行（`.row`）内可以放置多个列（`.col-*`），其中星号代表特定断点下占用的空间比例。例如 `.col-md-6` 表示当窗口达到中型及以上尺寸时此栏位将占有半个父级元素宽度。

以下是针对四种常见屏幕尺寸定义的不同行为：
- 超小屏 (`xs`)：手机 (<768px)，无需特别指定，默认情况下所有列为单列排列；
- 小屏 (`sm`)：平板 (≥768px)；
- 中屏 (`md`)：桌面显示器 (≥992px)；
- 大屏 (`lg`)：大型桌面 (>1200px)。

下面的例子展示了两列表格样式的布局方式，在小型屏幕上它们会垂直堆叠显示，而在更大尺寸上则并排呈现两个独立的部分。

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-lg-4">左侧内容</div>
        <div class="col-sm-6 col-lg-8">右侧更宽阔的内容区</div>
    </div>
</div>

#### 应用媒体查询优化体验
除了上述基础配置外，还可以借助CSS Media Queries进一步调整样式以更好地适配各种终端特性。虽然这部分工作通常已经由Bootstrap内部处理好了，但在某些特殊需求场景下自定义也是可行的。

例如，可以通过覆盖原有规则的方式改变某个组件的颜色、字体大小或者其他视觉属性，从而确保即使是在非常规分辨率条件下也能保持良好的用户体验。

@media only screen and (max-width: 767px){
    .custom-class {
        background-color:red;
    }
}