建站教程：利用Bootstrap进行快速Web开发

在 清单 2 中，Bootstrap 删除了我需要在较旧的响应式设计代码中手动完成的任务。因为页面使用了 Bootstrap 的网格系统，所以我不再需要使用专门的 CSS 来操作或调整盒子大小。仔细安排可视空间的 CSS 也不需要专门的 CSS，因为 Bootstrap 网格在各个块之间设置了很好的默认值。此外，我不需要任何 CSS 来进行媒体查询（media query）并在设计参数中设置响应，因为 Bootstrap 的响应特性会负责完成这些任务。

您可以在清单 2 中看到 div 标记的嵌套。嵌套的 div 使用了 Bootstrap 网格类。具有 container 类的 div 是整个固定网格布局的包装程序。具有 row 类的每个 div 在网格中定义了盒子的一行。具有 span4 类的 div 定义了一个横跨 4 个盒子的块。具有 span12 类的 div 定义横跨 12 个盒子的块 — 页面的整个宽度。Bootstrap 有一个 spanN 类，可横跨从 1 到 12 的任意数量 N 的盒子。

图 2 显示了所生成的页面在移动浏览器中的外观（运行 Android 4.1.1 的 Samsung Galaxy S3 上的 Google Chrome）：

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!