导入
断点简介
本节课将带你了解断点的入门知识。
根据统计数据，68%的互联网消费者通过手机访问网站。因此，创建响应式网站至关重要。
考虑到这一需求，Bootstrap引入了断点（breakpoints）的概念。
什么是断点？
断点是Bootstrap中可自定义的宽度值，用于决定我们的响应式布局在不同设备或视口尺寸下的表现方式。
让我们看看各种设备及其对应的断点宽度。
...
1 / 5
接下来我们来看看Bootstrap提供的断点，并学习如何使用它们。
断点对照表
| 断点 | 类名前缀 | 尺寸范围 |
|---|---|---|
| 超小屏 | 无 | <576px |
| 小屏 | sm | ≥576px |
| 中等屏 | md | ≥768px |
| 大屏 | lg | ≥992px |
| 超大屏 | xl | ≥1200px |
| 超超大屏 | xxl | ≥1400px |
断点的应用场景
在桌面或笔记本电脑屏幕上，我们可以展示大量数据；但在移动设备上，同样的内容若以相同方式呈现则可能无法正常显示。
让我们来看一个桌面端的示例场景。
...
桌面视图
这是我们的桌面屏幕，所有标题下的内容都能清晰展示。现在我们来看看在小屏幕上的效果，并对比使用与不使用断点的情况。
...
小屏幕无断点效果
...
小屏幕有断点效果
借助断点，我们将原本并排显示的布局调整为纵向堆叠排列，从而更好地适应小屏幕设备。