Bootstrap - 響應式佈局vs流體佈局

我想用相同的佈局構建單個網頁：http://instatrip.it
使用引導程序。
在引導教程頁面http://twitter.github.io/bootstrap/scaffolding.html#layouts
有一個響應式佈局和流體佈局演示。
這兩種方法有什麼區別？
要獲得與instatrip相同的佈局，我應該使用哪種佈局？
謝謝！Bootstrap - 響應式佈局vs流體佈局

來源

2013-07-03 user648026

流體佈局適應不同的瀏覽器窗口大小：所使用的所有值都按照視口大小成比例地計算，所以在調整大小時，所有列都調整大小，但總體佈局保持不變。

響應式佈局也能夠適應不同的大小，但是在調整大小時，列數會根據可用空間而變化。例如，您可以考慮僅在智能手機上將您的網站調整到一列。

要獲得與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/

編輯：這裏是固定的+流體佈局的一個簡單的例子。找到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; 
}

的Javascript：

$(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); 

    }); 

});

來源

2013-07-03 03:56:38

哦，順便說一句，smashingmagazine是一個固定，響應和彈性佈局的優秀實現。嘗試在他們的網站上調整瀏覽器窗口的大小:) –

是的，您可以通過快速的Google搜索找到許多示例。我在編輯中發佈了一個。 –

流動佈局是電網建設與百分比，沒有被當作固定網格佈局流體。

響應式佈局是Fluid佈局+媒體查詢的組合，其中媒體特定的css是爲某些瀏覽器分辨率定義的。

所以，如果你要使用流體佈局，你可以使用響應式佈局來更好地控制佈局。

來源

2013-07-03 03:57:41 LegendaryAks

Bootstrap - 響應式佈局vs流體佈局

回答

相關問題