本文共 1016 字，大约阅读时间需要 3 分钟。

一个响应式框架，支持自适应布局，PC端网站会随着屏幕尺寸下降，移动端网站则会相应上升以适应屏幕尺寸。 当前的最新版本为4.3.1，是一个主要更新版本，相比3.3.7更具功能性和性能优化。

版本选择方面，需根据项目需求灵活决定：

- 3.3.7版本下载可获得三个文件夹：`js`、`css`和`font`。其中， - 带有`.map`结尾的CSS文件用于源代码调试， - 带有`.min`结尾的CSS和JS文件是经过压缩处理，体积较小，适合生产环境使用。 - 4.3.1版本则仅包含`js`和`css`文件，安装和使用更加简便。

使用步骤总结：

1. 在``标签内引入必要的元标签，例如 Charset 和 viewport，确保响应式布局正常工作。 2. 在所有 Bootstrap JS 文件引入之前，务必先引入 jQuery，毕竟 Bootstrap 的相关功能均基于 jQuery 实现。 3. 引入 Bootstrap 的 JavaScript 和 CSS 文件，以便完成响应式布局的初始化和自定义样式应用。

=bootstrap 响应式原理======

1. 动态调整布局，页面内容会根据屏幕尺寸自动调整， якої不需要手动定义绝对宽度。 2.推荐使用rem和em作为单位，分别代表根节点字体大小的相对倍率，能够更灵活地适应不同屏幕尺寸。 3. 支持流式布局和弹性盒子模式，依据项目需求选择合适的布局方式：Bootstrap 3 使用流式布局（Flexbox），Bootstrap 4则改用弹性盒子（Flexbox）作为默认布局方式。 4. 丰富的媒体查询支持，通过媒体查询（@media），可以针对不同屏幕尺寸和设备类型定义不同的样式。 5.媒体查询规则： - 媒体类型（`@media`βachelorsScreen οnce задàn создать own样式])， - 基于屏幕尺寸和方向的媒体特性（如`min-width`、`max-width`、`orientation`等）。 - 逻辑运算符：`and`（`&&`）表示多个条件并存，`or`（`||`）表示至少满足一个条件，`not`（`!=`）表示否定结果。

媒体查询的具体应用示例：

```css ```accordingly， 该实例展示了 Bootstrap 在不同屏幕尺寸下，采用不同的样式颜色来实现视觉差异化效果。