在bootstrap栅格系统中使用警告框和缩略图的样式详解

作者(出处):百宝箱工作室发布时间:2018年4月6日 15:02:01查阅量:302

<!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-06
        	描述:警告框和缩略图
        	样式alert和alert-success、alert-danger、lert-warning、alert-info用于实现警告框。
        	样式close放在button标签内用于实现关闭按钮,注意需要data-dismiss="alert"与js交互。
        	样式thumbnail用于实现缩略图,这个样式可以给父级元素。
        -->
		<div class="container">
			<!--警告框的样式-->
			<div class="row">
				<p class="alert alert-success">警告框演示<button class="close" data-dismiss="alert">&times;</button></p>
				<p class="alert alert-danger">警告框演示</p>
				<p class="alert alert-warning">警告框演示</p>
				<p class="alert alert-info">警告框演示</p>
			</div>
			<!--缩略图的样式-->
			<div class="row">
				<div class="col-lg-3">
					<a class="thumbnail" href="http://www.baibaox.com/">
						<img src="http://www.baibaox.com/images/logo3.jpg" />
					</a>
				</div>
				<div class="col-lg-3">
					<a class="thumbnail" href="http://www.baibaox.com/">
						<img src="http://www.baibaox.com/images/logo3.jpg" />
					</a>
				</div>
				<div class="col-lg-3">
					<a class="thumbnail" href="http://www.baibaox.com/">
						<img src="http://www.baibaox.com/images/logo3.jpg" />
					</a>
				</div>
				<!--带标题、带文字、带按钮的缩略图样式-->
				<div class="col-lg-3">
					<div class="thumbnail">
						<a href="http://www.baibaox.com/">
							<img src="http://www.baibaox.com/images/logo3.jpg" />
						</a>
						<div class="caption">
							<h3>IT微课堂项目教学</h3>
							<p>目前主要的教学项目有Dreamweaver网页设计与网站开发、Photoshop平面设计与制作、Flash动画设计与制作、数据库设计与应用、C#.NET程序设计、ASP.NET程序设计、Office办公软件应用。</p>
							<p><a href="#" class="btn btn-danger">QQ 425680248</a>  <a href="#" class="btn btn-primary">立即报名</a></p>
						</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
点击这里给我发消息