Bootstrap-响应式设计布局与流体布局

Question

我想建立一个单页网站，与http://instatrip.it相同的布局，使用bootstrap。 在bootstrap教程页面http://twitter.github.io/bootstrap/scaffolding.html#layouts中， 有一个响应式布局和流体布局的演示。这两种方法有什么区别? 为了获得与instatrip相同的布局，我应该选择哪种布局？ 谢谢！

- JavaSheriff

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/

编辑：这里有一个固定+流动布局的简单示例。 此处找到。如果链接失效，我在下面发布代码。

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

    });

});

- Danish Ashfaq

---

哦，顺便说一下，smashingmagazine 是一个固定、响应式和弹性布局的优秀实现。试着在他们的网站上调整浏览器窗口大小 :) - Danish Ashfaq

当然可以，在谷歌上快速搜索就能找到很多例子。我在编辑中发布了一个。 - Danish Ashfaq

Answer 2

流体布局是使用百分比构建的网格，没有固定的网格，布局是流动的。

响应式布局是流体布局+媒体查询的组合，其中为某些浏览器分辨率定义了特定于媒体的css。

因此，如果您要使用流体布局，最好使用响应式布局来更好地控制您的布局。

- LegendaryAks