Twitter bootstrap 引导-响应性布局与流体布局

我想创建一个布局与以下相同的网页：
使用引导。
在引导教程页面中
有响应式布局和流体布局的演示。
这两种方法的区别是什么？
要获得与instatrip相同的布局，我应该使用什么布局？

---

谢谢

流体布局会根据不同的浏览器窗口大小进行自我调整：使用的所有值都是根据视口大小按比例计算的，因此在调整大小时，所有列都会调整大小，但总体布局保持不变

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

要获得与instatrip相同的布局，您至少需要将固定布局与流体布局相结合。但是有很多方法可以做到这一点，我认为你应该试着理解每种布局的确切目的，并根据你的需要找出一个具体的解决方案。以下是一些阅读：

编辑：下面是一个固定+流体布局的简单示例。建立我张贴下面的代码，以防链接失效

HTML:

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

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

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

    });

});

---

流体布局是用百分比构建的网格，不作为固定网格。布局是流体

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

---

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

哦，顺便说一句，smashingmagazine是固定、响应和弹性布局的优秀实现。试着在他们的网站上调整你的浏览器窗口：）是的，当然，你可以通过快速的谷歌搜索找到很多例子。我在编辑栏上贴了一张。

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

    });

});