2021.12.15 补充文档

Bootstrap 用于构建响应式，移动设备优先的网站。

重要的全局设置

HTML5文档类型(doctype)

文档类型（doctype）是 HTML5

  1. <!doctype html>
  2. <html lang="zh-CN">
  3.   ...
  4. </html>

响应式布局相关的标签

Bootstrap 采用的是 移动设备优先（mobile first） 的开发策略，因此，我们首先为移动设备优化代码，然后根据需要并利用 CSS 媒体查询功能来缩放组件。为了确保所有设备都能支持正确的渲染和触屏缩放，请务必在 标签中 添加让 viewport（视口）支持响应式布局的 标签。

  1. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

说明：参考回答 这是safari 9.0 中的规范。 使用 “width=device-width” 的meta标签 会导致页面缩小以适应超出视口边界的内容，您可以通过向meta标签中添加 “shrink-to-fit=no” 来覆盖此行为。也就是 阻止页面缩放以适应窗口，即让网页的宽度适应手机屏幕的宽度

CSS 盒模型

为了让 CSS 中的尺寸设置更加直观，我们将全局的 box-sizing 从 content-box 调整为 border-box。这样可以确保 padding 的设置不会影响计算元素的最终宽度，但是会导致某些第三方软件（例如 Google Maps 和 Google Custom Search Engine）出现问题。
在为数不多的情况下，你需要专门覆盖这一些设置，可以使用如下示例代码：

  1. .selector-for-some-widget {
  2.   box-sizing: content-box;
  3. }

媒体查询

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值

  1. /* 超小屏幕（手机，小于 768px） */
  2. /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
  4. /* 小屏幕（平板，大于等于 768px） */
  5. @media (min-width: @screen-sm-min) { ... }
  7. /* 中等屏幕（桌面显示器，大于等于 992px） */
  8. @media (min-width: @screen-md-min) { ... }
  10. /* 大屏幕（大桌面显示器，大于等于 1200px） */
  11. @media (min-width: @screen-lg-min) { ... }