我如何使用Bootstrap将我的设计从Sketch 3转换为CSS

Question

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

工具/框架:Sketch 3, bootstrap
目标:完全响应式网页设计

我目前的理解:

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

   • Dekstop高清
   • 桌面
   平板手机

2. Bootstrap + CSS + HTML

   • 分析所有部分(Header, Body, Footer, Sidebars，…)并确定xs, s, md, lg列所需的列数
   • 使用所有4种不同的网格大小(xs,s,md和lg)构建网站的基本结构
     

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

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

Answer 1

这取决于设计的外观。大多数情况下，你可以完全用CSS重新创建整个页面(除了徽标、背景和其他过于程式化而无法重建的东西)。在没有看到实际设计的情况下，很难给出任何关于如何处理它的真正建议。

对于Bootstrap，您需要将页面划分为行和列。每行有12列。Bootstrap的好处是，如果你做对了，它会为你做大部分的响应。

一旦你完成了搭建你的页面，你需要设置你的页面样式，然后使用媒体查询找出任何响应的扭结。

网上有大量的资源，但我建议从官方Bootstrap文档和W3 Schools的教程开始。我把链接都贴在了下面。 http://getbootstrap.com/css/

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

希望你觉得这至少有点帮助。好运！