Bootstrap

Bootstrap 是一个广泛使用的前端开发框架，其响应式布局具有以下特点和优势：

特点：

1. 网格系统：通过定义不同的列宽来构建页面布局，在不同屏幕尺寸下会自动调整列的排列和宽度。

2. 媒体查询：根据屏幕宽度等条件应用不同的样式。

步骤：

1. 引入 Bootstrap CSS 文件。

2. 使用其预定义的类来构建布局，比如 .container（容器）、.row（行）和 .col-*-*（列）。

例如，以下代码创建了一个简单的响应式布局：

<div class="container">
  <div class="row">
    <div class="col-md-6">左半部分</div>
    <div class="col-md-6">右半部分</div>
  </div>
</div>

在这个例子中，当屏幕尺寸在中等及以上时，左右两部分各占一半宽度；在小屏幕下，会自动堆叠显示。

注意点：

1. 理解不同的屏幕尺寸断点（如 xs、sm、md、lg 等）所对应的样式变化。

2. 避免过度依赖框架，保持代码的灵活性和可维护性。

3. 注意兼容性，确保在各种浏览器和设备上都能正常工作。

通过 Bootstrap 的响应式布局，可以快速搭建出适应多种设备的页面，提高开发效率和用户体验