bootstrpa嵌套式布局

最新推荐文章于 2021-05-26 01:36:46 发布

孟海滨

最新推荐文章于 2021-05-26 01:36:46 发布

阅读量1.2k

点赞数

分类专栏： CSS学习文章标签： html bootstrap

本文链接：https://blog.csdn.net/lovemenghaibin/article/details/43342211

版权

CSS学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近在做一个网页，正好需要用到一个嵌套事布局，也就是如果说我要一个分类，在上边填写上简介，下边列出我需要的内容，这样的一个嵌套式布局，这里就把这个例子先引用上。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Bootstrap</title>
<link href="file:///E|/视频/09项目知识/界面设置/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
</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>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../bootstrap/js/jquery-1.11.2.min.js"></script>
</body>
</html>