twitter-bootstrap Bootstrap - 响应式布局与流体布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17439352/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - Responsive layout vs Fluid layout
提问by JavaSheriff
I would like to build single web page with the same layout as: http://instatrip.it
Using bootstrap.
In the bootstrap tutorial page http://twitter.github.io/bootstrap/scaffolding.html#layouts
There is a demo of Responsive layout and Fluid layout.
What is the differences between the two approaches?
To get the same layout as instatrip, what layout should I use?
Thank you!
我想构建与以下布局相同的单个网页：http: //instatrip.it
使用引导程序。
在引导教程页面http://twitter.github.io/bootstrap/scaffolding.html#layouts
有一个响应式布局和流体布局的演示。
这两种方法有什么区别？
要获得与 instatrip 相同的布局，我应该使用什么布局？
谢谢！
回答by Danish Ashfaq
Fluid layout adapts itself to different browser window sizes : all the values used are calculated proportionally to the viewport size, so when resizing, all the columns are resized, but the general layout stays the same.
流体布局适应不同的浏览器窗口大小：所有使用的值都与视口大小成比例计算，因此在调整大小时，所有列都会调整大小，但总体布局保持不变。
Responsive layout is able to adapt itself to different sizes as well, but when resizing, the number of columns changes according to the available space. You could think of, for example, you website being resized to one column only on a smartphone.
响应式布局也能够适应不同的大小，但是在调整大小时，列数会根据可用空间而变化。例如，您可以考虑将您的网站调整为仅在智能手机上的一栏。
To get the same layout as instatrip, you'll need to combine fixed layout with fluid layout at least. But there are many ways to do it, I think you should try to understand what is exactly the purpose of each type of layout, and figure out a specific solution for your needs. Here is some reading :
要获得与 instatrip 相同的布局，您至少需要将固定布局与流体布局结合起来。但是有很多方法可以做到，我认为您应该尝试了解每种布局的确切目的是什么，并找出适合您需求的特定解决方案。这是一些阅读：
http://radiatingstar.com/make-a-layout-with-fluid-and-fixed-size-columnshttp://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
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 is a simple example of a fixed + fluid layout. Found here. I post the code below in case the link goes dead.
编辑：这是一个固定 + 流体布局的简单示例。在这里找到。我在下面发布代码，以防链接失效。
HTML :
HTML :
<div id="page">
<header id="sidebar">
//SIDEBAR CONTENT HERE
</header>
<article id="contentWrapper">
<section id="content">
//CONTENT HERE
</section>
</article>
</div>
CSS :
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 :
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);
});
});
回答by LegendaryAks
Fluid Layout is grid built with percentage, nothing is taken as fix grid the layout is fluid.
流体布局是用百分比构建的网格，没有任何东西被视为固定网格，布局是流体。
Responsive layout is the combination of Fluid layout + Media Queries where media specific css are defined for certain browser resolutions.
响应式布局是流体布局 + 媒体查询的组合，其中为某些浏览器分辨率定义了特定于媒体的 css。
So if you are gonna use fluid layout, u might as well as use Responsive layout to have a better control over your layout.
因此，如果您要使用流体布局，您不妨使用响应式布局来更好地控制您的布局。
