js,jq Bootstrap组件样式（二）

最新推荐文章于 2023-12-20 19:35:22 发布

Dragon.liu

最新推荐文章于 2023-12-20 19:35:22 发布

阅读量137

点赞数

分类专栏： JavaScript 文章标签： bootstrap javascript html

本文链接：https://blog.csdn.net/weixin_42223701/article/details/121111774

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

图片样式

<!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>