如何将自定义UI从PSD添加到Bootstrap？

时间：2013-09-23 19:46:17

标签： html css twitter-bootstrap

我最近一直在浏览一些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并自定义它对于我希望能够实现的目标而言，这似乎是必不可少的......

感谢您阅读：）

1 个答案:

答案 0 :(得分：0)

<强>更新

总的来说，除了我如何考虑将PSD转换为HTML和CSS之外，我的过程没有太大变化。我期待有一天，我发现一个像Photoshop一样灵活，舒适的工具，可以直接输出到优秀的HTML和CSS。那天还没来找我。这是我遵循的过程，使用Photoshop和Bootstrap。

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

    5. 步骤4和5通常不是连续的，而是我来回反弹的步骤。此外，确保您的客户在船上，或者您可以了解如何支持各种（不那么现代）的浏览器以及您这样做的原因（更短的加载时间，更少的开发时间，更容易的维护等等）上）。

相关问题
最新问题