부트 스트랩 - 반응 레이아웃과 유체 레이아웃

Question

같은 레이아웃으로 단일 웹 페이지를 만들고 싶습니다 : http://instatrip.it
부트 스트랩 사용.
부트 스트랩 튜토리얼 페이지에서 http://twitter.github.io/bootstrap/scaffolding.html#layouts
반응 형 레이아웃 및 유체 레이아웃에 대한 데모가 있습니다.
두 가지 방법의 차이점은 무엇입니까?
instatrip과 동일한 레이아웃을 얻으려면 어떤 레이아웃을 사용해야합니까?
감사합니다.

Answer 1

유체 레이아웃은 다른 브라우저 창 크기에 따라 달라집니다. 사용 된 모든 값은 뷰포트 크기에 비례하여 계산되므로 크기를 조정할 때 모든 열의 크기가 조정되지만 일반 레이아웃은 동일하게 유지됩니다.

반응 형 레이아웃은 다른 크기에도 적응할 수 있지만 크기를 조정할 때 사용 가능한 공간에 따라 열의 수가 변경됩니다. 예를 들어 웹 사이트가 스마트 폰에서만 하나의 열로 크기가 조절되는 경우를 생각해 볼 수 있습니다.

instatrip과 동일한 레이아웃을 얻으려면 최소한 고정 레이아웃과 유체 레이아웃을 결합해야합니다. 그러나 여러 가지 방법이 있습니다. 각 레이아웃 유형의 목적이 정확히 무엇인지 파악하고 필요에 맞는 특정 솔루션을 찾아야한다고 생각합니다. 몇 가지 판독은 다음

http://radiatingstar.com/make-a-layout-with-fluid-and-fixed-size-columns http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

EDIT : 여기에 고정 + 유연한 레이아웃의 간단한 예이다. 발견 된 here. 링크가 죽은 경우를 대비하여 아래 코드를 게시합니다.

HTML :

<div id="page"> 
    <header id="sidebar"> 
     //SIDEBAR CONTENT HERE 
    </header> 

    <article id="contentWrapper"> 
     <section id="content"> 
      //CONTENT HERE 
     </section> 
    </article> 
</div> 

CSS :

html { 
    overflow: hidden; 
} 

#sidebar { 
    background: #eee; 
    float: left; 
    left: 300px; 
    margin-left: -300px; 
    position: relative; 
    width: 300px; 
    overflow-y: auto; 
} 

#contentWrapper { 
    float: left; 
    width: 100%; 
} 

#content { 
    background: #ccc; 
    margin-left: 300px; 
    overflow-y: auto; 
} 

자바 스크립트 :

$(document).ready(function() { 

    //GET BROWSER WINDOW HEIGHT 
    var currHeight = $(window).height(); 
    //SET HEIGHT OF SIDEBAR AND CONTENT ELEMENTS 
    $('#sidebar, #content').css('height', currHeight); 

    //ON RESIZE OF WINDOW 
    $(window).resize(function() { 

     //GET NEW HEIGHT 
     var currHeight = $(window).height();  
     //RESIZE BOTH ELEMENTS TO NEW HEIGHT 
     $('#sidebar, #content').css('height', currHeight); 

    }); 

}); 

Answer 2

유체 레이아웃은 그리드 비율로 내장되어 아무것도 레이아웃은 유동적입니다 수정 그리드로 수행되지 않습니다.

반응 형 레이아웃은 특정 브라우저 해상도에 대해 미디어 특정 CSS가 정의 된 유체 레이아웃 + 미디어 쿼리의 조합입니다.

유동적 인 레이아웃을 사용한다면 반응 형 레이아웃을 사용하여 레이아웃을보다 잘 제어 할 수 있습니다.