Dreamweaver CC教程：使用 Bootstrap 设计响应式网站

Dreamweaver CC教程：使用 Bootstrap 设计响应式网站

对于移动优先、响应快速的网站，在 Dreamweaver 中使用 Bootstrap 初学者模板和拖放 Bootstrap 组件。
Bootstrap 是用于开发响应迅速、移动优先网站的受欢迎的免费 HTML、CSS 和 JavaScript 框架。该框架包括响应迅速的 CSS 和 HTML 模板，这些模板适用于按钮、表格、导航、图像旋转视图以及您可能会在网页上使用的其他元素。它提供了几个可选的 JavaScript 插件，这使只具备基本编码知识的开发人员也能够开发出快速响应的出色网站。
利用 Dreamweaver，您可以创建 Bootstrap 文档，还可编辑使用 Bootstrap 创建的现有网页。无论是设计完善的 Bootstrap 文件还是仍在设计中的文件，您都可以在 Dreamweaver 中编辑它们，并且不仅可以编辑代码，还可使用实时视图编辑、可视 CSS Designer、可视媒体查询和 Extract 等可视编辑功能进行设计方面的更改。
注意:
当前支持的 Bootstrap 版本为 v3.3.7。
常见问题

我一直在 Dreamweaver 中使用流体网格。我如何开始使用 Bootstrap？

当您创建流体网格文档时，Dw 通过自动应用适当的类让您的网页快速响应。您只需专注于您的内容并决定如何在不同的外形规格中重新排列。
同样，在 Bootstrap 文档中，您仅需专注于内容和设计，网页的响应能力由与 Bootstrap 框架紧密集成的 Dreamweaver 来负责。
“Bootstrap 包含响应快速、移动优先的流体网格系统，该系统可随着设备或视区大小的增加而相应地扩展到最多 12 列。它包括用于简单布局选项的预定义类，以及用于生成更多语义布局的强大的 mixin（混合类）。”- Bootstrap 文档。
若要开始在 Dreamweaver 中使用 Bootstrap 文档，请考虑使用 Bootstrap 初学者模板。Dreamweaver 包括大量的模板，适用于您可能要创建的不同类型的网站，例如电子商务或作品集。
如果想要从头开始创建 Bootstrap 文档，您始终可以按照此处所述来进行操作。

是否可以在 Dreamweaver 中将现有的流体网格文档迁移到 Bootstrap 文档？

不，没有将现有的流体网格文档转换为 Bootstrap 文档的直接方法。但是，在创建和设计 Bootstrap 文档时 Dreamweaver 中的用户体验类似于流体网格文档。例如，您可以从“新建文件”对话框中通过创建 Bootstrap 文档开始。您针对三个基本外形规格（手机、平板电脑和台式机）创建流体网格文档，而对于 Bootstrap，首先针对三个基本屏幕大小（小型、中型和大型）创建文档。当您单击 Bootstrap 文档中的元素时显示的布局编辑选项也类似于流体网格文档。