1.Bootstrap
- 特点：
- Bootstrap 是最流行的前端框架之一，它提供了一套完整的响应式布局系统。它基于 CSS 的媒体查询构建，具有一系列预先定义好的 CSS 类，可以轻松地创建响应式的网页布局。例如，它的网格系统允许将页面划分为 12 列，通过不同的类组合可以在不同屏幕尺寸下灵活地分配列宽。
- 示例代码（HTML 部分）：
<div class="container">
<div class="row">
<div class="col - sm - 6 col - md - 4 col - lg - 3">
<p>这是一个响应式列。在小屏幕（sm）上占6列宽，中屏幕（md）上占4列宽，大屏幕（lg）上占3列宽。</p>
</div>
</div>
</div>- 在上述代码中，
container类用于创建一个容器，它会在不同屏幕尺寸下有适当的宽度。row类用于定义一行，col - sm - 6 col - md - 4 col - lg - 3这个类组合表示在小屏幕（sm）设备上该列占 12 列中的 6 列宽，中屏幕（md）设备上占 4 列宽，大屏幕（lg）设备上占 3 列宽。这样就可以根据屏幕大小自动调整列的宽度，实现响应式布局。
- 功能拓展：
- Bootstrap 还提供了大量的 JavaScript 插件，如模态框（Modal）、轮播图（Carousel）等，这些插件也都具有响应式的特性。例如，模态框在小屏幕设备上会自动调整大小和样式，以适应手机等设备的屏幕显示。
2.Foundation
- 特点：
- Foundation 同样是一个功能强大的响应式前端框架。它具有灵活的网格系统，被称为 “网格混合（Grid Hybrid）”，可以更精细地控制页面布局。它还提供了一些独特的响应式组件，如响应式菜单、滑块等。
- 示例代码（HTML 部分）：
<div class="grid - container">
<div class="grid - x grid - margin - x">
<div class="cell small - 6 medium - 4 large - 3">
<p>这是一个响应式单元格。在小屏幕（small）上占6列宽，中屏幕（medium）上占4列宽，大屏幕（large）上占3列宽。</p>
</div>
</div>
</div>- 这里的
grid - container是容器，grid - x和grid - margin - x用于定义行和行间距。cell small - 6 medium - 4 large - 3类组合类似于 Bootstrap 的列类，用于在不同屏幕尺寸下分配单元格的宽度，实现响应式布局。
- 功能拓展：
- Foundation 支持 Sass（一种 CSS 预处理器），通过 Sass 可以更方便地定制框架的样式。例如，可以使用 Sass 变量来修改框架的颜色、字体等全局样式，并且这些修改可以很好地与响应式布局配合，确保整个页面在不同屏幕尺寸下的风格统一。
3.Semantic UI
- 特点：
- Semantic UI 是一个语义化的前端框架，它也提供了响应式布局支持。它的特点是使用语义化的类名，使代码更具可读性。例如，它的网格系统有
ui grid等类，在网格内的列可以使用ui column相关的类来定义响应式布局。
- 示例代码（HTML 部分）：
<div class="ui container">
<div class="ui grid">
<div class="six wide column mobile, four wide column tablet, three wide column computer">
<p>这是一个响应式列。在移动设备（mobile）上占6列宽，平板设备（tablet）上占4列宽，计算机（computer）上占3列宽。</p>
</div>
</div>
</div>- 在这个示例中，
ui container是容器，ui grid用于构建网格，six wide column mobile, four wide column tablet, three wide column computer类组合根据不同的设备类型（移动设备、平板设备、计算机）来定义列的宽度，从而实现响应式布局。
- 功能拓展：
- Semantic UI 集成了许多现成的组件，如菜单、表单、消息框等，这些组件都具有响应式的设计。并且，它还支持主题定制，可以通过修改主题文件来调整整个框架的颜色、字体等样式，以适应不同的项目需求和响应式设计要求。
