Bootstrap嵌套布局和流动布局

zh000 2017-10-14

嵌套布局layout-qt.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>嵌套布局</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-wdith,initial-scale=1.0">
<!--[if lt IE 9]>
      <script src="../bootstrap/js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container"><!-- 内容显示在页面的中间 -->
 <h1 class="page-header">布局<small> 使用Bootstrap网格系统布局网页</small></h1>
    
    <p>Bootstrap网格系统布局就是将网页分成一定的栏数,Bootstrap网格系统就是将网页分成12栏,如果想让一个元素占用一定栏数的宽度,你可以在这个元素上应用一个特定的类,Bootstrap使用的是span加栏数</p>
    
    <div class="row">
    	<div class="span4"><!-- 网格布局span -->
	    	<h2 class="page-header">区块一</h2>
	    	<p>consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
	    </div>
	    
	    <div class="span4"><!-- 网格布局span -->
	    	<h2 class="page-header">区块二</h2>
	    	<p>Lorem ipsum dolor sit amet, quam accumsan vestibulum,consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p>
	    </div>
	    
	    <div class="span4"><!-- 网格布局span -->
	    	<h2 class="page-header">区块三</h2>
	    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
    		<div class="row">
    			<div class="span2">嵌套布局测试,嵌套布局测试,嵌套布局测试</div>
    			<div class="span2">嵌套布局测试,嵌套布局测试,嵌套布局测试</div>
    		</div>
    	</div>
    </div>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>

流动布局layout-ld.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流动布局</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-wdith,initial-scale=1.0">
<!--[if lt IE 9]>
      <script src="../bootstrap/js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid"><!-- 内容显示在页面的中间,流动布局使用百分比宽度 -->
 <h1 class="page-header">布局<small> 使用Bootstrap网格系统布局网页</small></h1>
    
    <p>Bootstrap网格系统布局就是将网页分成一定的栏数,Bootstrap网格系统就是将网页分成12栏,如果想让一个元素占用一定栏数的宽度,你可以在这个元素上应用一个特定的类,Bootstrap使用的是span加栏数</p>
    
    <div class="row-fluid">
    	<div class="span4"><!-- 网格布局span -->
	    	<h2 class="page-header">区块一</h2>
	    	<p>consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
	    </div>
	    
	    <div class="span4"><!-- 网格布局span -->
	    	<h2 class="page-header">区块二</h2>
	    	<p>Lorem ipsum dolor sit amet, quam accumsan vestibulum,consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p>
	    </div>
	    
	    <div class="span4"><!-- 网格布局span -->
	    	<h2 class="page-header">区块三</h2>
	    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
    		<div class="row-fluid">
    			<div class="span6">使用流动布局可以根据浏览器窗口的大小自动缩放</div>
    			<div class="span6">使用流动布局可以根据浏览器窗口的大小自动缩放</div>
    		</div>
    	</div>
    </div>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>

相关推荐

cloudspring / 0评论 2017-11-09