如何使用引導程序將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

回答

相關問題