1

我想了解使用 Boostrap 作为框架的响应式网页设计的工作流程是如何工作的。我特别不确定如何将我的设计从 Sketch 3 转换为 CSS (Bootstrap)。

工具/框架：Sketch 3，Bootsrap
目标：完全响应式网页设计

我目前的理解：

  1. 使用 4 种不同的布局在 Sketch 3 中创建 4 个不同版本的网站

    • 桌面高清
    • 桌面
    • 药片
    • 电话

  2. 引导 + CSS + HTML

    • 分析所有部分（页眉、正文、页脚、侧边栏...）并确定 xs、s、md、lg 列所需的列数
    • 使用所有 4 种不同的网格大小（xs、s、md 和 lg）构建网站的基本结构

我究竟从 Sketch3 导出了什么？
我是否只导出按钮并使用 CSS 构建其余按钮...？
我是否从所有 4 种不同的布局中导出所有按钮？

我想确保它完全响应并且易于维护。

4

1 回答 1

0

这实际上取决于设计的外观。大多数情况下，您可以完全使用 CSS 重新创建整个页面（除了徽标、背景和其他任何过于风格化而无法重建的内容）。在没有看到实际设计的情况下，很难就如何处理它给出任何真正的建议。

对于 Bootstrap，您需要将页面划分为行和列。每行有 12 列。Bootstrap 的好处在于，如果您正确执行此操作，它会为您完成大部分响应式工作。

完成页面脚手架后，您需要设置页面样式，然后使用媒体查询解决任何响应式扭结。

网上有大量资源，但我建议从官方 Bootstrap 文档和 W3 Schools 的教程开始。我已经在下面发布了两个链接。

http://getbootstrap.com/css/

http://www.w3schools.com/bootstrap/default.asp

希望您发现这至少有些帮助。祝你好运！

于 2015-10-26T23:35:57.913 回答