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

我最近一直在浏览一些HTML和CSS的东西，以获得更多的网站开发，我一直在设计网站开启和关闭一段时间，我很想开始实际开发一些。如何将PSD的自定义UI添加到Bootstrap？

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

我在PSD文件中有我自己的UI设计，我将如何让他们在Bootstrap内工作？这是一个切片我的图像和自定义CSS添加到Bootstrap的问题？

我知道我是一个很长的路要走，从这个，但是这是我想要做的东西类型： http://heyflat.com/themes/todo/index.html

如果你能指出我朝的东西，我应该是学习型为了达到那里，我将非常感激它，到目前为止，我会继续我的HTML/CSS的东西，但我很想开始使用Bootstrap和自定义它似乎对我想要实现的目标是至关重要的...

谢谢您的阅读:)

来源

2013-09-23 DarkLink

更新

总体而言，除了将PSD转换为HTML和CSS的方式外，我的过程没有太大变化。我期待着有一天我发现一个像Photoshop一样灵活和舒适的工具，可以直接输出到良好的HTML和CSS。那一天还没有到我这里来。这是我遵循的过程，利用Photoshop和Bootstrap。

我发现，Photoshop是想象，共享和因为它解放了我遍历一个可视化设计在目前不可能或太费时，实现只是HTML和CSS的方法进行试验的好方法。一旦设计达成一致，我就开始计划如何用HTML，CSS和JavaScript实现目标设计。
- 我认为我的目标受众的浏览器。例如，IE8-不支持圆角边框。如果IE8用户占我的观众的很大一部分，并且这些圆角边框对于设计至关重要，我可能会花时间分割图像并添加额外的HTML和CSS。
- 我决定是否要使用像bootstrap这样的框架。在决定框架时，还必须考虑浏览器支持。如果框架有像bootstrap这样的示例，那么我可以在各种浏览器中检出这些示例。如果使用框架，那么我承诺按照他们的方式做。也就是说，我使用他们的网格系统，HTML和类名称的一切。当框架无法满足特定需求时，我只能添加自己的内容。我会根据需要使用单独的样式表来扩充他们的类，但始终采用适当的低风险方式，bootstrap鼓励这一点。除了可能通过定制器，我可能永远不会增加网格系统，但我从来没有需要这样做。
下一页我执行设计。我可能会发现某些元素需要从PSD中切出，但大多数元素（如阴影，圆形边框和渐变）都可以使用CSS呈现。 PSD的某些方面可能需要进行调整以适应响应行为或简化实现。与往常一样，我首先针对符合标准的浏览器，并在稍后调整其他浏览器。关于一个好的框架的好处之一是通常很少需要调整。
我在目标受众使用的浏览器中以各种分辨率查看文档，并根据需要考虑并实施额外的折衷。例如，如果IE8中出现圆角并不重要，那么我会保持简单，使用CSS呈现它们，并让IE8单独使用。我仍然验证它在IE8和IE7中看起来可以接受。

步骤4和步骤5通常不是连续的，而是步骤I来回反射。此外，请确保您的客户端已上线，或者您可以让他们了解您如何支持各种（不太现代的）浏览器以及您这样做的原因（缩短加载时间，缩短开发时间，更轻松维护等等）。上）。

引导2个例子：http://getbootstrap.com/2.3.2/getting-started.html#examples
引导3个例子：http://getbootstrap.com/getting-started/#examples

来源

2013-09-23 21:01:37

嗯，好，我知道如何剪接我的PSD与工具。我在问这是否是将自定义外观添加到Bootstrap的正确流程？我会喜欢你说的必须对设计做一些改变，谢谢你对这套信息的使用，我会用Bootstrap来玩一下，然后尝试做一些修改让它看起来很自定义，再次感谢！ – DarkLink

我明白你的问题，你将如何去做这件事。我不会声称有一个“正确”的过程，但许多好的过程和情况可以确定在特定时间什么是最好的。例如，一旦在HTML和CSS中实现了设计，在HTML和CSS中直接尝试不同想法然后返回到PSD可能会更快/更容易/更有用。这一切都取决于，但如果我刚刚开始，我倾向于使用Photoshop并从那里开始。 –

此外，通过使用Photoshop或类似的东西，你减少了你的设计看起来像一个调整bootstrap例子的机会:) –

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

回答

相关问题