960.gs 웹 사이트를 부트 스트랩 3을 사용하여 HTML로 변환하는 방법

Question

960.gs (960 Grid System)를 사용하여 포토샵 모형을 만들었습니다. 웹 사이트 컨테이너 너비는 960 픽셀이며 중앙 정렬됩니다. 사이트는 반응 적이어야합니다.

부트 스트랩 3을 사용하여 웹 사이트를 HTMl로 변환하려면 어떻게해야합니까? 부트 스트랩을 다운로드하기 전에 사용자 정의해야합니까?

Answer 1

@dougajmcdonald가 귀하의 질문에 충분히 구체적이지 않다고 말한 것과 같이 여기에서 성취하고자하는 것이 무엇인지 확실하지 않습니다.

아아, 나는 일에 지루해하므로 여기에서 몇 가지 대답을 쏠 것입니다.

나는 960gs와 그 기본적으로 그리드 시스템을 봤어. 따라서 포토샵 모형을 부트 스트랩 3을 사용하여 만들 수 있는지 묻는다면 가능합니다.

부트 스트랩 자체는 Grid 시스템입니다. 960 픽셀에 가장 가까운 것은 부트 스트랩의 col-md-* 그리드 클래스입니다. 최대 990 픽셀 너비를 처리하며 12 열로도 나뉩니다.

맞춤 설정은 디자인에서 무엇이 필요한지에 따라 다릅니다.

Answer 2

1) 현재 960 구성 (열 번호, 거터 및 오프셋 및 열 너비)을 가져옵니다.

2) 빌드 custom 부트 스트랩 세트. 미디어 쿼리 중단 점, 그리드 시스템 및 컨테이너 크기 섹션 960 개 (@ grid-columns, @ grid-gutter-width 및 @ screen- * 필드) 섹션을 업데이트해야합니다.

3) 업데이트 응답 규칙 (@ 화면 - * 필드), 사용자에 따라

4) 페이지

5) grid guide에 따라 페이지를 모의로 다운로드 빌드에서 모든 CSS 파일을 포함해야합니다

Answer 3

예. 다운로드하기 전에 부트 스트랩을 사용자 정의해야합니다. 특히 격자 열과 눈금 간격을 grid-system (사양에 맞게) 및 컨테이너 바탕 화면의 너비를 container-sizes으로 사용자 정의 할 수 있습니다.

Answer 4

제 앞에있는 답변은 꽤 잘 작동하지만 다른 것을 던지십시오. 당신이 조롱 한 것을 완벽하게 픽셀로 만들기 위해 무엇을 만들고 싶습니다.

960.gs에서 12 열 레이아웃을 사용한다고 가정하면 부트 스트랩 3은 12 열 레이아웃을 사용하기 때문에 황금색입니다. 기둥과 거터는 960과 같은 너비입니까? 아마도 그렇지 않습니다. 그러나 사용자가 웹 사이트를 볼 때 사용할 화면이 Photoshop에서 설정 한 내용과 일치하지 않을 수도 있습니다.

사용자 (또는 사용자)가 컨텐트를 생성하기 시작하자마자 완벽한 수의 문자로 구성된 완벽하게 만들어진 컨텐트 상자가 생각보다 많은 방법으로 늘어나고 줄어들 것입니다.

960.gs가 부트 스트랩과 같은지 걱정하지 않아도됩니다. 현실 세계가 포토샵과 일치하지 않기 때문에 걱정하지 않아도됩니다. 부트 스트랩 다운로드, 웹 사이트 코딩을 시작하고, 처음 비전을 달성하지 못했기 때문에 현재 비전에 완벽하지 않은 픽셀에 대해 유연하게 작업하십시오.

Answer 5

PSD 모형을 가져 와서 코드를 작성하기 때문에 아무 것도 할 필요가 없습니다. Sean이 말했듯이 포토샵에서 12 열 그리드를 사용한다고 가정 할 때 Bootstrap 3을 사용하면 문제가되지 않습니다. psd에 3 개의 열을 차지하는 섹션이있는 경우 다음과 같이 번역됩니다.

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

md (데스크톱 화면 크기) 당신은 또한 모바일 모형을 설계하는 경우 사용합니다 :

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

을 ...이 부분은 모바일의 전체 폭을 걸릴 것입니다 가정 ...

Answer 6

방법은 단지 외부를 추가하는 방법에 대한 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%; 
}