如何使用引导程序将960.gs网站转换为HTML 3

我已经使用960.gs（960网格系统）创建了photoshop模型。网站容器宽度为960px - 居中对齐。该网站需要有响应。如何使用引导程序将960.gs网站转换为HTML 3

我该怎么办，使用Bootstrap 3将网站转换成HTMl？我是否需要在下载之前自定义引导程序？

来源

2014-06-18 Yuvaraj P

任何一个请回复 –

这个问题不够具体，也不清楚你想在这里我怕达到什么样的具体方面。 – dougajmcdonald

不太清楚你想在这里实现什么，就像@dougajmcdonald说你的问题不够具体。

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

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

Bootstrap也有它自己的Grid系统。距离您的960像素最近的是引导程序的col-md-*网格类。它可以处理高达990像素的宽度，并分解成12列。

至于定制，它取决于你需要从你的设计。

来源

2014-06-24 08:48:59 Dominic

1）获取当前的960配置（列号，排水沟和偏移量和列宽）。

2）build custom bootstrap set。您需要更新媒体查询断点,网格系统和容器大小与960配置（@ grid-columns，@ grid-gutter-width和@ screen- *字段）的部分。

3）更新响应规则（@丝网*字段），根据您的需要

4）包括从下载构建所有的CSS文件到您的网页

5）小样根据grid guide您的网页

来源

2014-06-24 09:08:37 Evgeniy

是的，您需要在下载之前自定义引导程序。具体而言，您需要在grid-system（根据您的规格）自定义网格列和网格槽宽度，并在container-sizes中定制容器桌面的总宽度。

来源

2014-06-24 20:19:24

我之前的回答工作得很好，但我会再投入一次：不管你正在构建什么样的图标，都可以完美地嘲笑你所嘲笑的东西。

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

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

所以你不应该担心，如果960.gs可以等于Bootstrap，因为现实世界不会匹配Photoshop。下载Bootstrap，开始编写你的网站，并且灵活一点，不要因为你的当前愿景像素完美，因为它永远不会摆在首位。

来源

2014-06-25 19:08:09

哦，如果所有的设计师都能读懂这个，接受世界可能会变得更好））但是在实践中...... – Evgeniy

如果所有的设计师都阅读并接受了这个，世界上一半的网站看起来就像股票引导。不用了，谢谢。很好的做法，但是调整边距/填充/颜色/阴影/悬停状态/活动状态/ href /按钮/ **所有内容！**是设计师所做的事情。有充分的理由。坚持你的枪OP，只有当你必须妥协！ –

现在坚持在那里的合作伙伴。我从来没说过不定制。您应该绝对定制它以匹配您正在构建的网站的品牌。如果你想调整断点和列，就去做吧。但我的观点是不尝试像素完美，这是我从OP中推断出来的。除了不切实际的目标之外，像素完美性可能成为设计师和工程师之间巨大裂缝的原因。所以我的原始观点仍然是：网络不是Photoshop，所以是灵活的。 –

你不需要做任何事情，因为你正在采取你的psd模型并开始编码。像肖恩说的那样，假设你在Photoshop中使用了12列网格，使用Bootstrap 3应该不成问题。如果您的psd中的部分占用了3列，则这只意味着：

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

md用于桌面屏幕大小。如果您设计您的移动模拟了也，你可以使用：

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

......假设这部分是要占用移动全宽...

来源

2014-06-30 01:57:06

如何只增加一个外部div有一个ID帧？

<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%; 
}

来源

2014-10-18 20:17:17

如何使用引导程序将960.gs网站转换为HTML 3

回答

相关问题