2

我最近一直在研究一些 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 并对其进行自定义似乎是必不可少的我希望能够实现的目标......

感谢您阅读：）

4

1 回答 1

0

更新

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

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

第 4 步和第 5 步通常不是连续的，但我会在这些步骤上来回切换。此外，请确保您的客户参与其中，或者您可以让他们了解您如何支持各种（不是那么现代）浏览器以及您这样做的原因（更短的加载时间、更少的开发时间、更容易的维护等）上）。

于 2013-09-23T21:01:37.333 回答