Bootstrap 布局主要具有以下特点：
一、响应式布局
-
媒体查询基础
-
Bootstrap 利用 CSS 媒体查询实现响应式布局。媒体查询可以根据设备的屏幕特性（如宽度、高度、方向等）来应用不同的 CSS 样式。例如，它能够检测到设备屏幕是手机（小屏幕）还是桌面（大屏幕），并相应地调整布局。
-
这样一来，网站在不同设备上能有合适的展示效果，像在手机上可能是单列布局，方便用户单手操作和浏览；在桌面设备上则可能是多列布局，充分利用屏幕空间展示更多内容。
-
-
容器类的作用
-
.container 类：它会在每个响应式断点处设置固定的最大宽度。在默认的桌面屏幕（通常≥992px）下，其宽度是 960px 左右。这种宽度限制有助于内容在屏幕上保持整齐和易读性，防止内容过宽而导致用户阅读困难。
-
.container - fluid 类：该类的容器会占据整个视口的宽度，即 100% 宽度。适用于需要全宽显示的部分，比如页面的背景元素或者某些需要铺满屏幕宽度的模块。
-
二、网格系统
-
12 列布局原则
-
Bootstrap 的网格系统基于 12 列布局。这意味着一行（通过
.row类定义）可以被划分成最多 12 个等宽的列（用.col - *类来表示列）。例如，可以轻松创建一个两列布局，每列各占 6 列宽度（如.col - md - 6），从而平分一行。
-
-
断点与列类命名
-
列类的命名方式为
.col - [断点]-[列数]。常见的断点有xs（超小屏幕，一般是手机无论横屏竖屏）、sm（小屏幕，通常是平板竖屏）、md（中等屏幕，像平板横屏或者小桌面显示器）、lg（大屏幕，常见于大桌面显示器）、xl（超大屏幕）。这些断点可以让开发者根据不同设备屏幕宽度范围来精确控制列的宽度和布局。
-
三、其他布局功能
-
偏移和排序
-
偏移列：可以使用偏移类（如
.col - md - offset - 3）来将列向右偏移一定数量的列宽度。这在需要创建非对称布局或者在列之间留出空白空间时很有用。 -
列排序：在 Bootstrap 4 及以上版本中，通过
order类（如.order - 1和.order - 2）能够改变列的显示顺序。这对于根据不同设备屏幕或者用户交互来调整内容的显示顺序很有帮助。
-
-
嵌套网格
-
可以在列中嵌套行和列，以构建更复杂的布局。例如，在一个大的布局列中，可以通过添加新的行和列来放置更细致的内容，从而实现更灵活的页面设计。
-