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

我使用960.gs（960网格系统）创建了photoshop模型。网站容器宽度为960px-中心对齐。网站需要有响应能力

我应该怎么做，使用Bootstrap3将网站转换成HTMl？

---

下载引导程序之前，我需要自定义引导程序吗？

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

唉，我厌倦了工作，所以我要在这里拍摄一些答案

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

Bootstrap也有自己的系统。最接近960px的是bootstrap的

colmd-*

grid类。它处理宽度高达990px的数据，并将其分解为12列

至于定制，这取决于您的设计需要什么

1）获取当前960个配置（列编号、水槽和偏移以及列宽度）

2） 构建引导集。您需要使用960个配置（@网格列、@网格槽宽度和@screen-*字段）更新媒体查询断点、网格系统和容器大小部分

3） 根据需要更新响应规则（@screen-*字段）

4） 将下载版本中的所有css文件包含到页面中

---

5） 根据

模拟您的页面是的，您需要在下载之前自定义引导。具体来说，您需要自定义中的网格列和网格槽宽度（根据您的规格）以及中的容器桌面总宽度。

我面前的答案很好，但我要补充一点：不要再希望您正在构建的任何东西都与您的模型完美匹配

假设您在960.gs中使用的是12列布局，那么您就是golden，因为Bootstrap3使用的是12列布局。立柱和排水沟的宽度是否与960相同？可能不会。但我可以保证，你的用户用来浏览网站的屏幕也不会与你在Photoshop中的任何设置相匹配

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

---

所以你不必担心960.gs是否可以等同于Bootstrap，因为现实世界不会与Photoshop相提并论。下载Bootstrap，开始对网站进行编码，并灵活处理它与您当前的视觉效果不符的问题，因为它从一开始就不可能完美无瑕。

您不需要做任何事情，因为您正在制作psd模型并开始对其进行编码。正如肖恩所说，假设您在photoshop中使用了12列网格，那么使用Bootstrap3应该不会有问题。如果psd中有占据3列的部分，这将转换为：

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

。。。

md适用于桌面屏幕大小。如果您还设计了移动模型，您将使用：

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

。。。

---

。。。假设这一部分将占据移动设备的全部宽度

添加一个具有id帧的外部div怎么样

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

---

这个问题不够具体，恐怕也不清楚你想在这里实现什么样的目标。哦，伙计，如果所有的设计师都能读到这篇文章并接受这个世界会变得更好），但在实践中……如果所有的设计师都读到并接受了这篇文章，那么世界上一半的网站看起来都像是股票引导。不用了，谢谢。很高兴能有所进展，但是调整了边距/填充/颜色/阴影/悬停状态/活动状态/href/按钮/**一切！**这就是设计师的工作。有充分的理由。坚持己见，只有在必要时才妥协！现在坚持住，搭档。我从没说过不要定制。你应该完全定制它来匹配你正在建设的网站的品牌。如果你想调整断点和列，那就去做吧。但我的观点是不要试图做到像素完美，这正是我从OP中推断出来的。除了是一个不切实际的目标外，像素完美可能是设计师和工程师之间巨大分歧的原因。所以我的原意仍然是：网络不是Photoshop，所以要灵活。@SeanRyan fair。在某种程度上，灵活是好的。1-2倍的屏幕宽度太小，不值得担心。但是，如果它与1或2像素边界之间存在差异，那么单个像素会产生很大的差异。@ShawnTaylor，这就是为什么你不应该首先为像素完美而设计/编码的原因。即使有人将它完美地编码为设计组合，它也只会在特定的屏幕上，在特定的宽度上，使用特定的浏览器，达到像素级的完美。如果一个像素将产生巨大的差异，那么当有人在不同的浏览器中查看它时，您将遇到麻烦。或者不同的宽度。或手动上下调整文本大小。最好把时间花在确保它在所有情况下都能正常工作上，而不是只在一种情况下看起来很好。

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

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