html - 如何将我的自定义 UI 从 PSD 添加到 Bootstrap？

Question

我最近研究了一些 HTML 和 CSS 内容，以便更深入地了解 Web 开发，我断断续续地设计网站已经有一段时间了，我很想开始实际开发一些网站。

我看到 Bootstrap 在整个互联网上被提及了很多次，我想知道是否有人可以帮助我并为我指明正确的方向......我一直在学习 HTML/CSS 的基础知识，因为我明白了吧，Bootstrap是一个html/css UI框架？

我在 PSD 文件中有自己的 UI 设计，如何让它们在 Bootstrap 中工作？ 是否需要将我的图像切片并将自定义 CSS 添加到 Bootstrap 中？

我知道我离这还有很长的路要走，但这是我想做的事情: http://heyflat.com/themes/todo/index.html

如果你能指出我应该学习的东西类型，我将非常感激，到目前为止，我将继续我的 html/css 东西，但我很想开始使用 Bootstrap 并对其进行自定义对于我想要实现的目标，这对我来说似乎是必不可少的......

感谢您的阅读:)

Answer 1

已更新

总的来说，除了我对将 PSD 转换为 HTML 和 CSS 的想法外，我的过程没有太大变化。我期待着有一天我会发现一个像 Photoshop 一样灵活和舒适的工具，可以直接输出良好的 HTML 和 CSS。那一天还没有来到我身边。这是我使用 Photoshop 和 Bootstrap 遵循的过程。

1. 我发现 Photoshop 是一种想象、分享和迭代视觉设计的好方法，因为它让我可以自由地尝试目前仅用 HTML 和 CSS 无法实现或太耗时的方式。
2. 一旦就设计达成一致，我便开始计划如何使用 HTML、CSS 和 JavaScript 实现目标设计。
   • 我会考虑目标受众的浏览器。比如IE8-，不支持圆 Angular 边框。如果 IE8- 用户占我受众的很大一部分，并且那些圆形边框对设计至关重要，我可能会花时间切出图像并添加额外的 HTML 和 CSS。
   • 我决定是否要使用像 bootstrap 这样的框架。在决定框架时，​​还必须考虑浏览器支持。如果一个框架有像 bootstrap 这样的例子，那么我可以在各种浏览器中检查这些例子。如果使用框架，那么我 promise 按照他们的方式进行。也就是说，我对所有内容都使用他们的网格系统、html 和类名。我只有在框架不能满足特定需求时才添加自己的。我会根据需要使用单独的样式表来扩充他们的类，但总是以适当的、低风险的方式，bootstrap 鼓励这样做。我可能永远不会扩充网格系统，除非通过他们的定制器，但我从来不需要这样做。
3. 接下来我实现设计。我可能会发现一些元素需要从 PSD 中切出，但大多数元素，如投影、圆 Angular 边框和渐变，都可以使用 CSS 呈现。 PSD 的某些方面可能需要调整以适应响应行为或使实现更简单。与往常一样，我首先针对符合标准的浏览器，然后再针对其他浏览器进行调整。一个好的框架的优点之一是通常很少需要调整。
4. 我在目标受众使用的浏览器中以各种分辨率查看文档，并根据需要考虑并实现额外的权衡。例如，如果那些圆 Angular 在 IE8 中显示并不重要，那么我将保持简单，使用 CSS 渲染它们，让 IE8 单独处理。我仍然验证它在 IE8 和 IE7 中看起来可以接受。

第 4 步和第 5 步通常不是连续的，但我会反复执行这些步骤。此外，确保您的客户参与其中，或者您可以让他们参与您如何支持各种(不太现代的)浏览器以及您这样做的原因(更短的加载时间、更少的开发时间、更容易维护等)上)。

• Bootstrap 2 示例:http://getbootstrap.com/2.3.2/getting-started.html#examples
• Bootstrap 3 示例:http://getbootstrap.com/getting-started/#examples