之前的布局都是固定了，不管实际页面的大小
如果要改成流动布局，只需要将 container 类改成 container-fluid 即可
然后把 row 类改成 row-fluid 所谓流动布局，就是其不再是固定像素大小，而采用了百分比
一旦改成了流动布局后，神奇的一幕就出现了，当我们去改变浏览器大小的时候，内容随着浏览器大小的变化而变化！！真棒！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BootStrap</title>
<link type="text/css" rel="stylesheet" href="../../resources/bootstrap-2/css/bootstrap.css">
<script type="text/javascript" src="../../resources/bootstrap-2/js/bootstrap.js"></script>
<script type="text/javascript" src="../../resources/jQuery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../resources/js/html5.js"></script>
<!--解决手机上的显示问题-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--解决IE低版本问题-->
<!--[if lt IE9]>
<script type="text/javascript" src="../../resources/js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<h1 class="page-header">布局
<small>使用BootStrap网格布局</small>
</h1>
<p>段落文字</p>
<div class="row-fluid">
<div class="span4">
<h2 class="page-header">区块1</h2>
<p>段落文字</p>
</div>
<div class="span4">
<h2 class="page-header">区块2</h2>
<p>段落文字</p>
</div>
<div class="span4">
<h2 class="page-header">区块3</h2>
<p>段落文字</p>
<div class="row-fluid">
<div class="span6">布局的嵌套</div>
<div class="span6">布局的嵌套</div>
</div>
</div>
</div>
</div>
</body>
</html>
注意：有一点区别，在嵌套布局中，嵌套元素的大小都是相对于其父容器而言的，所以区块3中的嵌套应该是span6，表示占用第二层布局的50%，而不再是原先的span2
时间： 2024-11-02 23:21:22