js,jq Bootstrap组件样式(二)

wuchangjian2021-11-02 23:35:27编程学习

图片样式

<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Bootstrap图片样式</title>
	<!-- 让页面样式根据设备大小进行调整显示 -->
	<meta name=viewport content="width=device-width,initial-scale=1">
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/jQuery.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-4">
				<a href="#" class="thumbnail">
					<img src="imges/1.jpg">
				</a>
			</div>
			<div class="col-md-4">
				<a href="#" class="thumbnail">
					<img src="imges/2.jpg">
				</a>
			</div>
			<div class="col-md-4">
				<a href="#" class="thumbnail">
					<img src="imges/3.jpg">
				</a>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4">
				<a href="#" class="thumbnail">
					<img src="imges/1.jpg">
				</a>
			</div>
			<div class="col-md-4">
				<a href="#" class="thumbnail">
					<img src="imges/2.jpg">
				</a>
			</div>
			<div class="col-md-4">
				<a href="#" class="thumbnail">
					<img src="imges/3.jpg">
				</a>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4">
				<a href="#" class="thumbnail">
					<img src="imges/1.jpg">
				</a>
			</div>
			<div class="col-md-4">
				<a href="#" class="thumbnail">
					<img src="imges/2.jpg">
				</a>
			</div>
			<div class="col-md-4">
				<a href="#" class="thumbnail">
					<img src="imges/3.jpg">
				</a>
			</div>
		</div>

	</div>
</body>
</html>

在这里插入图片描述

表格样式

<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Bootstrap图片样式</title>
	<!-- 让页面样式根据设备大小进行调整显示 -->
	<meta name=viewport content="width=device-width,initial-scale=1">
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/jQuery.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				   <!-- 表格的基础样式 表格的边框       表格条纹        表格紧凑显示   
				   	鼠标经过高亮显示-->
				<table class="table table-bordered table-striped table-condensed table-hover">
					<tr>
						<td>雇员编号</td><td>雇员编号</td><td>雇员编号</td><td>雇员编号</td>
					</tr>
					<tr>
						<td>雇员编号</td><td>雇员编号</td><td>雇员编号</td><td>雇员编号</td>
					</tr>
					<tr>
						<td>雇员编号</td><td>雇员编号</td><td>雇员编号</td><td>雇员编号</td>
					</tr>
					<tr>
						<td>雇员编号</td><td>雇员编号</td><td>雇员编号</td><td>雇员编号</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。