Activity 7: Allow Form to Support Various Devices
目前,我们的表单专为桌面端设计。不过,用户可以使用不同类型的设备(例如智能手机)浏览表单。
Breakpoints是可自定义的宽度,它决定了响应式布局在 Bootstrap 中跨设备或视口大小的行为方式。
Core concepts
- 断点是响应式设计的基石。 使用断点可以控制布局何时适应特定视口或设备尺寸
- 使用媒体查询通过断点构建 CSS。 媒体查询是 CSS 的一项功能,它允许您根据一组浏览器和操作系统参数有条件地应用样式。我们在媒体查询中最常用的是
min-width - 我们的目标是移动优先、响应式设计。Bootstrap 的 CSS 旨在应用最少的样式,使布局在最小的断点处正常工作,然后通过叠加样式来调整设计以适应更大的设备。这可以优化您的 CSS,缩短渲染时间,并为访问者提供卓越的体验。
Available breakpoints
Bootstrap 包含六个默认断点,有时称为网格层 ,用于响应式构建。
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
每个断点都经过精心设计,能够轻松容纳宽度为 12 倍数的容器。断点也代表了常见设备尺寸和视口尺寸的子集——它们并非专门针对所有用例或设备。相反,这些范围为几乎所有设备的构建提供了强大而一致的基础。
How to test the output
使用基于 Chrome/Chromium 的浏览器轻松测试您的网站的响应能力。