如何使用Bootstrap快速开发Web前端
发布网友
发布时间：2022-04-23 09:42
共1个回答
热心网友
时间：2022-04-11 21:31
针对 Bootstrap 的 HTML
清单 • 是一个有用的框架 HTML 文件，用于结合使用 Bootstrap 与一个固定布局和响应特性：
清单 • 用于 Bootstrap 项目的基本框架 HTML 文件 (listing1.html)
缩小版本
在 Bootstrap 下载中，请注意，每个 CSS 和 JavaScript 文件有两个版本可用(例如 bootstrap.js 和 bootstrap.min.js)。第一种形式是一个常规文件，第二种形式是压缩文件或 “缩小文件”。就像在本文中一样，使用缩小版本即可实现最有效的页面加载。
listing1.html 的开始之处的 DOCTYPE 声明将其标记为一个 HTML5 文件。head 元素内的 meta标记控制移动的小屏幕布局。(为方便起见，我将它们称作 meta/viewport 标记。)默认情况下，大多数移动设备按比例缩小 Web 页面，使之适应屏幕大小，就像在桌面浏览器窗口中一样。这就是为什么许多网站上的文本和图像在手机浏览器中看起来很小的原因。meta/viewport 声明中的 initial-scale=1.0 部分禁用了这一行为，告诉设备要保持页面的原有尺寸。该声明表示 Web 设计人员(在本例中为 Bootstrap)已经完成了实现较小屏幕的响应式设计这一任务，所以在默认情况下，没必要采用蛮力方法。
稍后，清单 1 的 head 标记是 Bootstrap CSS 的链接。在文件的末尾，加载 jQuery 和 Bootstrap 实用程序 JavaScript。这些脚本在末尾运行可实现最佳性能。
设置代码
当使用 Bootstrap(或任何 Web 支持文件集)时，您可以从多种方法中选择用来设置 HTML 和其他代码的方法。我建议您创建一个文件夹来存储自己的项目，然后将 Bootstrap 文件及其完整的文件夹结构复制到项目文件夹中。将您自己的 HTML 文件放在最顶层，并将您自己的 CSS、JavaScript 和图像文件放在相应的 Bootstrap 子文件夹中(这些文件夹的名称分别为 css、js 和 img)。
