twitter-bootstrap - Bootstrap - 响应式布局与流体布局

Question

我想建立一个与以下布局相同的网页:http://instatrip.it
使用 Bootstrap 。
在 Bootstrap 教程页面http://twitter.github.io/bootstrap/scaffolding.html#layouts
有响应式布局和流体布局的演示。
这两种方法有什么区别？
要获得与 instatrip 相同的布局，我应该使用什么布局？
谢谢!

Answer 1

流体布局适应不同的浏览器窗口大小:所有使用的值都与视口(viewport)大小成比例计算，因此在调整大小时，所有列都会调整大小，但总体布局保持不变。

响应式布局也能够适应不同的大小，但是在调整大小时，列数会根据可用空间而变化。例如，您可以考虑将您的网站大小调整为仅在智能手机上的一列。

要获得与 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);

    });

});