<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nested layout</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"><!-- Content is displayed in the middle of the page -->
<h1 class="page-header">Layout<small> Layout pages using the Bootstrap grid system</small></h1>
<p>The Bootstrap grid system layout is to divide the web page into a certain number of columns. The Bootstrap grid system is to divide the web page into 12 columns. If you want an element to occupy a certain number of columns, you can apply a specific Class, Bootstrap uses the number of spans and columns</p>
<div class="row">
<div class="span4"><!-- grid layout span -->
<h2 class="page-header">区块一</h2>
<p>He's the main customer, he's a lot of pain. There is no label, the arrows sit in the main film, a range of asset networks Curabitur at neque eget quam accumsan vestibulum. </p>
</div>
<div class="span4"><!-- grid layout span -->
<h2 class="page-header">区块二</h2>
<p>The pain itself is a lot of pain, rather than the layer of the court There is no label, the arrows sit in the main film, a range of asset networks Curabitur at neque eget. </p>
</div>
<div class="span4"><!-- grid layout span -->
<h2 class="page-header">区块三</h2>
<p>The pain itself is a lot of fun, it's enhanced by the customer. There is no label, the arrows sit in the main film, a range of asset networks Curabitur at neque eget quam accumsan vestibulum. </p>
<div class="row">
<div class="span2">nested layout test, nested layout test, nested layout test</div>
<div class="span2">nested layout test, nested layout test, nested layout test</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>
Flow layout layout-ld.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid layout</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"><!-- The content is displayed in the middle of the page, and the fluid layout uses a percentage width -->
<h1 class="page-header">Layout<small> Layout pages using the Bootstrap grid system</small></h1>
<p>The Bootstrap grid system layout is to divide the web page into a certain number of columns. The Bootstrap grid system is to divide the web page into 12 columns. If you want an element to occupy a certain number of columns, you can apply a specific Class, Bootstrap uses the number of spans and columns</p>
<div class="row-fluid">
<div class="span4"><!-- grid layout span -->
<h2 class="page-header">区块一</h2>
<p>He's the main customer, he's a lot of pain. There is no label, the arrows sit in the main film, a range of asset networks Curabitur at neque eget quam accumsan vestibulum. </p>
</div>
<div class="span4"><!-- grid layout span -->
<h2 class="page-header">区块二</h2>
<p>The pain itself is a lot of pain, rather than the layer of the court There is no label, the arrows sit in the main film, a range of asset networks Curabitur at neque eget. </p>
</div>
<div class="span4"><!-- grid layout span -->
<h2 class="page-header">区块三</h2>
<p>The pain itself is a lot of fun, it's enhanced by the customer. There is no label, the arrows sit in the main film, a range of asset networks Curabitur at neque eget quam accumsan vestibulum. </p>
<div class="row-fluid">
<div class="span6">Use fluid layout to automatically scale according to the size of the browser window</div>
<div class="span6">Use fluid layout to automatically scale according to the size of the browser window</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>