流动布局

之前的布局都是固定了，不管实际页面的大小

如果要改成流动布局，只需要将 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

posted @ 2016-08-06 15:08  csnmd  阅读(1192)  评论(0)  编辑  收藏  举报