在bootstrap栅格系统中实现图文混排

作者(出处):百宝箱工作室发布时间:2018年4月8日 16:29:10查阅量:404

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<title></title>
	</head>
	<body>
	<!--
        	作者:百宝箱工作室      微课堂教学QQ:425680248
        	时间:2018-04-08
        	描述:图文混排
        	
        	media		图文混排区域
        	media-left	图片区域,在左侧显示图片
        	media-right	图片区域,在右侧显示图片
        	media-body	文字内容区域
        	media-heading	文字内容区域里面的标题
        	media-middle	图片垂直居中对齐
        	media-bottom	图片垂直底部对齐
        -->
		<div class="container">
			<!--1.图片在左侧,文字在右侧-->
			<div class="row" style="border-bottom: 1px solid #CCCCCC;">
				<div class="media">
					<a href="#" class="media-left media-middle">
						<img src="http://www.baibaox.com/images/logo3.jpg" />
					</a>
					<div class="media-body">
						<h4 class="media-heading">IT微课堂项目教学</h4>
						<p>目前主要的教学项目有Dreamweaver网页设计与网站开发、Photoshop平面设计与制作、Flash动画设计与制作、数据库设计与应用、C#.NET程序设计、ASP.NET程序设计、Office办公软件应用。</p>
						<p>目前主要的教学项目有Dreamweaver网页设计与网站开发、Photoshop平面设计与制作、Flash动画设计与制作、数据库设计与应用、C#.NET程序设计、ASP.NET程序设计、Office办公软件应用。</p>
					</div>
				</div>
			</div>
			<!--2.图片在右侧,文字在左侧-->
			<div class="row" style="border-bottom: 1px solid #CCCCCC;">
				<div class="media">
					<div class="media-body">
						<h4>IT微课堂项目教学</h4>
						<p>目前主要的教学项目有Dreamweaver网页设计与网站开发、Photoshop平面设计与制作、Flash动画设计与制作、数据库设计与应用、C#.NET程序设计、ASP.NET程序设计、Office办公软件应用。</p>
						<p>目前主要的教学项目有Dreamweaver网页设计与网站开发、Photoshop平面设计与制作、Flash动画设计与制作、数据库设计与应用、C#.NET程序设计、ASP.NET程序设计、Office办公软件应用。</p>
					</div>
					<a href="#" class="media-right media-bottom">
						<img src="http://www.baibaox.com/images/logo3.jpg" />
					</a>
				</div>
			</div>
			<!--图片在左、右两侧,文字在中间-->
			<div class="row" style="border-bottom: 1px solid #CCCCCC;">
				<div class="media">
					<a href="#" class="media-left">
						<img src="http://www.baibaox.com/images/logo3.jpg" />
					</a>
					<div class="media-body">
						<h4>IT微课堂项目教学</h4>
						<p>目前主要的教学项目有Dreamweaver网页设计与网站开发、Photoshop平面设计与制作、Flash动画设计与制作、数据库设计与应用、C#.NET程序设计、ASP.NET程序设计、Office办公软件应用。</p>
						<p>目前主要的教学项目有Dreamweaver网页设计与网站开发、Photoshop平面设计与制作、Flash动画设计与制作、数据库设计与应用、C#.NET程序设计、ASP.NET程序设计、Office办公软件应用。</p>
					</div>
					<a href="#" class="media-right">
						<img src="http://www.baibaox.com/images/logo3.jpg" />
					</a>
				</div>
			</div>
			<!--在media-body里面嵌套media,用于实现留言板或者回复-->
			<div class="row" style="border-bottom: 1px solid #CCCCCC;">
				<div class="media">
					<a href="#" class="media-left">
						<img src="http://www.baibaox.com/images/logo3.jpg" />
					</a>
					<div class="media-body">
						<h4>IT微课堂项目教学</h4>
						<p>目前主要的教学项目有Dreamweaver网页设计与网站开发、Photoshop平面设计与制作、Flash动画设计与制作、数据库设计与应用、C#.NET程序设计、ASP.NET程序设计、Office办公软件应用。</p>
						<p>目前主要的教学项目有Dreamweaver网页设计与网站开发、Photoshop平面设计与制作、Flash动画设计与制作、数据库设计与应用、C#.NET程序设计、ASP.NET程序设计、Office办公软件应用。</p>
						<!--这里是嵌套的media-->
						<div class="media">
							<a href="#" class="media-left">
								<img src="http://www.baibaox.com/images/logo3.jpg" />
							</a>
							<div class="media-body">
								<h4>IT微课堂项目教学</h4>
								<p>目前主要的教学项目有Dreamweaver网页设计与网站开发、Photoshop平面设计与制作、Flash动画设计与制作、数据库设计与应用、C#.NET程序设计、ASP.NET程序设计、Office办公软件应用。</p>
								<p>目前主要的教学项目有Dreamweaver网页设计与网站开发、Photoshop平面设计与制作、Flash动画设计与制作、数据库设计与应用、C#.NET程序设计、ASP.NET程序设计、Office办公软件应用。</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
	</body>
</html>
百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2099
点击这里给我发消息