如何使用 Bootstrap 3 将 960.gs 网站转换为 HTML答案

【问题标题】：How to convert 960.gs website into HTML using Bootstrap 3如何使用 Bootstrap 3 将 960.gs 网站转换为 HTML
【发布时间】：2014-06-18 07:13:52
【问题描述】：

我使用 960.gs（960 Grid 系统）创建了 Photoshop 模型。网站容器宽度为 960 像素 - 居中对齐。该网站需要响应。

我应该怎么做，使用 Bootstrap 3 将网站转换为 HTMl？我需要在下载之前自定义引导程序吗？

【问题讨论】：

这个问题不够具体，恐怕你想在这里实现的具体方面还不清楚。

标签： html twitter-bootstrap-3 960.gs

【解决方案1】：

1) 获取您当前的 960 配置（列号、间距和偏移量以及列宽）。

2) 构建custom 引导集。您需要使用 960 个配置（@grid-columns、@grid-gutter-width , 和 @screen-* 字段）。

3) 根据您的要求更新响应规则（@screen-* 字段）

4) 将下载的构建中的所有 css 文件包含到您的页面中

5) 根据grid guide模拟你的页面

【讨论】：

【解决方案2】：

摆在我面前的答案很有效，但我会抛出另一个答案：不要希望你正在构建的任何东西都与你模拟的东西完美匹配。

假设您在 960.gs 中使用 12 列布局，那么您就是黄金，因为 Bootstrap 3 使用 12 列布局。列和排水沟的宽度是否与 960 相同？可能不是。但我可以保证，您的用户用于查看网站的屏幕也不会与您在 Photoshop 中进行的任何设置相匹配。

更不用说，一旦您（或您的用户）开始生成内容，您精心制作的包含完美字符数的内容框将开始以超出您想象的方式拉伸和收缩。

因此，如果 960.gs 可以与 Bootstrap 相等，您不必担心，因为现实世界无法与 Photoshop 匹配。下载 Bootstrap，开始为您的网站编写代码，并灵活处理它不符合您当前愿景的像素完美，因为它从一开始就不会完美。

【讨论】：

哦，伙计，如果所有设计师都能阅读并接受这个世界会变得更好））但在实践中......
如果所有设计师都阅读并接受这一点，世界上一半的网站将看起来像股票引导程序。不，谢谢。很高兴得到一些东西，但调整边距/填充/颜色/阴影/悬停状态/活动状态/href/按钮/**一切！**是设计师所做的。有充分的理由。坚持你的枪 OP，只在必要时妥协！
现在等待合作伙伴。我从来没有说过不要定制。您绝对应该对其进行自定义以匹配您正在构建的网站的品牌。如果你想调整断点和列，那就去吧。但我的观点是不要试图做到像素完美，这是我从 OP 中推断出来的。除了是一个不切实际的目标外，像素完美还可能是设计师和工程师之间产生巨大分歧的原因。所以我原来的观点仍然成立：网络不是 Photoshop，所以要灵活。
@SeanRyan 很公平。在一定程度上，灵活是好的。 1-2px 的屏幕宽度太小了，不用担心。但如果是 1 或 2 像素边框之间的差异，那么单个像素就会产生很大的不同。
@ShawnTaylor 这就是为什么你真的不应该首先为像素完美而设计/编码。即使有人将它完美地编码为设计组合，它也只会在特定屏幕上以特定宽度使用特定浏览器达到像素完美。如果一个像素会产生很大的不同，那么当有人在不同的浏览器中查看它时，你就会遇到麻烦。或者不同的宽度。或者手动放大或缩小文本。最好把时间花在确保它在所有情况下都能正常工作，而不是在一种情况下看起来很好。

【解决方案3】：

添加一个具有 id 框架的外部 div 怎么样？

<div id="frame">
<!-- Your Other Structure -->
</div>

然后在 CSS 中这样做，

body, html {
    height: 100%;
    width: 100%;
    min-width: 960px;
}

#frame {
    width: 960px;
    min-width: 960px;
    max-width: 960px;
    margin: 0 auto;
    height: 100%;
}

【讨论】：

【解决方案4】：

不太确定你想在这里实现什么，比如@dougajmcdonald 说你的问题不够具体。

唉，我工作很无聊，所以我要在这里拍摄一些答案。

我搜索了 960.gs，它基本上是一个网格系统。所以如果你问你的 photoshop 模型是否也可以使用 Bootstrap 3 完成，那么可以。

Bootstrap 也有它自己的Grid 系统。最接近 960px 的是 bootstrap 的 col-md-* 网格类。它可以处理宽度最大为 990 像素的内容，并且也分为 12 列。

至于定制，这取决于您对设计的需求。

【讨论】：

【解决方案5】：

是的，您需要在下载前自定义引导程序。具体来说，您需要自定义 grid-system 中的 grid-columns 和 grid-gutter-width（根据您的规格）以及 container-sizes 中容器桌面的总宽度。

【讨论】：

【解决方案6】：

您无需执行任何操作，因为您正在获取 psd 模型并开始编写代码。就像 Sean 说的，假设你在 photoshop 中使用了 12 列网格，使用 Bootstrap 3 应该没有问题。如果您的 psd 中有部分占用 3 列，则这只是转换为：

<div class="col-md-3"> ... </div>

md 用于桌面屏幕尺寸。如果您还设计了您的移动模型，您将使用：

<div class="col-xs-12 col-md-3">...</div>

...假设这部分将占据移动设备的整个宽度...

【讨论】：