我想建立一个单页网站,与http://instatrip.it相同的布局,使用bootstrap。
在bootstrap教程页面http://twitter.github.io/bootstrap/scaffolding.html#layouts中,
有一个响应式布局和流体布局的演示。这两种方法有什么区别?
为了获得与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);
});
});
流体布局是使用百分比构建的网格,没有固定的网格,布局是流动的。
响应式布局是流体布局+媒体查询的组合,其中为某些浏览器分辨率定义了特定于媒体的css。
因此,如果您要使用流体布局,最好使用响应式布局来更好地控制您的布局。