在这篇文章中，我们将看到一个 Bootstrap 站点的布局 展示这个开源框架的惊人功能。 在 以前的文章 我们已经安装了一个开发环境和必要的插件来促进我们的工作。
请记住，由于 Linux Adictos 内容管理器不允许我插入示例代码，因此我将它们上传到 GitHub。 要下载它们，您必须在您的发行版上安装 Git 包，然后键入以下命令：
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
您需要定期运行这两个命令来下载新文件。
分析代码
现在在文件资源管理器中使用 VSCodium 打开 example2.html。 （用右键打开）我们看到以下内容：
- 在第 1 行中，我们告诉浏览器文档的类型，以便它知道如何呈现它。
- 第 2 行指示网站的语言，它向浏览器指示如何表示某些字符，并向搜索引擎指示有助于定位的内容的语言。 在我们的代码中，它被定义为 es，但也有区域变体，例如来自西班牙的西班牙语 es_ES 或来自阿根廷的西班牙语 es_AR。
- 从第 3 行开始，我们有一个位于标签之间的元数据容器是. 元数据提供有关文档的信息。 在我们的示例中：
- 第 4 行表示用于字符编码的标准。 也许您有时会看到菱形内显示的不是重音字符或特殊符号，而是一个问号。 这是因为浏览器使用了不正确的编码。 第 8 行的语句通过显式声明来避免这种情况。
- 在第 5 行，我们告诉浏览器它应该如何适应不同的屏幕格式。
- 我们在第 6 行设置的标题将显示在浏览器的顶部栏和搜索引擎中。
- 在第 7 行，我们告诉浏览器在哪里可以找到与样式相关的 Bootstrap 框架元素。
- 容器从第 10 行开始。 正文包括网页内容和引导脚本的链接，这些脚本将为我们的网站提供交互性。
- 第 13 行表示文档的结尾。
Bootstrap 站点的布局
Bootstrap 站点布局的关键概念
正如我们在之前的文章中所说， Bootstrap 采用移动优先的方法。 当应用这种方法时，设计是在考虑最小屏幕尺寸的设备上完成的，然后添加层以使其适应随后的尺寸。
在这里，我们必须考虑两个关键概念：
- 断点。
- 媒体咨询。
断点指示从哪个屏幕宽度修改布局。, 媒体查询应用基于某些浏览器和操作系统特征的样式参数。 换句话说，每个断点都会有一个对应的样式。
Bootstrap 带有六个预定义的断点，可以由更高级的程序员修改。 默认点是：
- 超小：没有预设标识符，适用于宽度小于 576 像素的屏幕。
- 小：用 sm 标识，用于 576 像素以上的屏幕。
- 中：用 md 标识，用于 768 像素以上的屏幕。
- 长度：标识为 lg 用于 992 像素以上的屏幕。
- 超长：它具有标识符 lg，并将样式应用于 1200 像素的屏幕。
- Extra extra long：标有 xxl 标识符，用于将设计应用于 1400 像素以上的屏幕。
这些尺寸不是随便选择的 每个断点都可以包含宽度为 12 的倍数的容器。 它们也不针对特定设备，而是适应不同类别的设备和屏幕尺寸。
在不同的屏幕尺寸中，我们找到了容器。 这些负责在特定设备或图形窗口中托管、填充和对齐站点的内容。
;