粤嵌打卡第51天（小白带你进入bootstrap的学习（包含常用的页面插件源码供大家ctr+v））

本文链接：https://blog.csdn.net/qq_41986840/article/details/107603941

这篇博客介绍了如何使用Bootstrap进行前端页面美化，包括导入依赖、使用栅格系统、表格样式、登录注册模板和常见插件源码，提供了一些实用的页面模板，适合后端程序员快速提升前端界面设计。

摘要由CSDN通过智能技术生成

今天我们来学习下在做项目的过程中如何使用Bootstrap来引入比较美观的样式，学完了这篇博客，大家就可以尽情的使用模板了呀！

bootstrap官网：https://v3.bootcss.com/getting-started/#download

第一步：导入bootstrap要依赖的包、引入bootstrap即可

导入有关jar包
引入bootstrap头部文件

<!-- bootstrap对IE览器器的支持 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- bootstrap对各个平台的支持 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- 引入bootstrap时要依赖的jquery -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- 引入bootstrap的主css文件 -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap的主题样式 -->
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>

第二步：在bootstrap中使用栅格系统

栅格系统: 指的是将每行分为大小均匀的12等分，在任何平台都能根据屏幕大小自动换行显示，样式效果极佳。比如一个网页在平板、手机、电脑端的分辨率不一样，所以显示就要根据屏幕分辨率进行友好展示了。

格式如下：

<!-- 表示一个副容器 -->
	<div class="container">
	<!-- 表示一行 -->
		<div class="row">
			<!-- 一行总共分为12列， md表示电脑端显示的大小  xs表示手机端显示的大小  offset表示列偏移几列 -->
			<div class="col-xs-3 col-md-3 col-md-offset-3"
				style="background-color: red">我占3列</div>
			<div class="col-xs-6 col-md-6" style="background-color: green">我占6列</div>
			<div class="col-xs-3 col-md-3" style="background-color: gray">我占3列</div>
		</div>
	</div>

表格样式模板

<table border="1" class="table table-striped table-bordered table-hover table-condensed">
			<thead>
				<tr class="success">
					<th>名字</th>
					<th>年龄</th>
					<th>性别</th>
					<th>学历</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>张三</td>
					<td>23</td>
					<td>男</td>
					<td>本科</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>23</td>
					<td>男</td>
					<td>本科</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>23</td>
					<td>男</td>
					<td>本科</td>
				</tr>
			</tbody>
		</table>

显示效果如下：

登录页面模板如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- bootstrap对IE览器器的支持 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- bootstrap对各个平台的支持 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- 引入bootstrap时要依赖的jquery -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- 引入bootstrap的主css文件 -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap的主题样式 -->
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<title>登陆界面</title>
<style type="text/css">
#huakuang {
	width: 650px;
	height: 500px;
	margin-top: 100px;
	margin-left: 280px;
	background-color: #CCFF00;
}
#mag{
	margin-top: 90px;
}

</style>
</head>
<body>
	<div class="container">
		<div id="huakuang">
			<div class="row">
				<div class="col-md-6 col-md-offset-4" id = "mag">
					<h1>用户登陆</h1>
					<br>
				</div>
			</div>
			<div class="row">
				<div class="col-md-9 col-md-offset-3">
					<form class="form-horizontal">
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-2 control-label">用户名:</label>
							<div class="col-sm-6">
								<input type="text" class="form-control" id="inputEmail3"
									placeholder="用户名">
							</div>
						</div>
						<div class="form-group">
							<label for="inputPassword3" class="col-sm-2 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
							<div class="col-sm-6">
								<input type="password" class="form-control" id="inputPassword3"
									placeholder="密码">
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<div class="checkbox">
									<label> <input type="checkbox"> 记住密码
									</label> <label> <input type="checkbox"> 自动登陆<br>
									</label><br>
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="submit" class="btn btn-default">登陆</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

显示效果如下：

注册页面模板

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- bootstrap对IE览器器的支持 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- bootstrap对各个平台的支持 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- 引入bootstrap时要依赖的jquery -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- 引入bootstrap的主css文件 -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap的主题样式 -->
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="