Bootstrap4+MySQL前后端综合实训-Day02-AM【Bootstrap4(入门、环境搭建、文字排版、颜色、表格、图片、进度条、折叠、输入框组、模态框)、Font Awesome字体图标】

迷南。 2022-12-22 00:45 69阅读 0赞

> [【Bootstrap4前端框架+MySQL数据库】前后端综合实训【10天课程 博客汇总表 详细笔记】][Bootstrap4_MySQL_10_ _]

***目   录***

Typora语法

Day01—知识回顾

1、前端部分 flex布局

2、Bootstrap4入门

Bootstrap4——环境搭建

Bootstrap5——GitHub下载

Bootstrap4——Bootstrap4中文网

Font Awesome 中文网 – | 字体图标

Bootstrap4——文字排版、颜色、表格

奇偶选择器、更改.table-striped属性

Bootstrap4——图片、进度条

Bootstrap4——手风琴特效（折叠）

Bootstrap4——手风琴特效（折叠）——双飞翼布局

Bootstrap4——输入框组+模态框

Bootstrap4——输入框组

Bootstrap4——输入框组+模态框

等宽图标class="fa fa-user fa-fw"

--------------------

# Typora语法 #

> [TYPORA语法大全][TYPORA]

# Day01—知识回顾 #

> [【Bootstrap4前端框架+MySQL数据库】前后端综合实训【10天课程 博客汇总表 详细笔记】][Bootstrap4_MySQL_10_ _]

## 1、前端部分 flex布局 ##

> **容器与项目**
> 
> 容器需要配合“display: flex;”使用。
> 
> 容器中有几个属性：
> 
> 1.  flex-direction属性（设置主轴方向）
> 2.  flex-wrap属性（设置换行方式）
> 3.  flex-flow属性（组合属性）
> 4.  justify-content属性（设置主轴方向上的对齐方式）
> 5.  align-items属性（设置交叉轴方向上的对齐方式）
> 6.  align-content属性（当有多个主轴情况下，设置交叉轴上的对齐方式）
> 
> 项目属性：
> 
> 1.  order属性（排列顺序）
> 2.  flex-grow属性（放大比例）
> 3.  flex-shrink属性（缩小比例）
> 4.  flex-basis属性（主轴上的空间，可以使用width/height替代）
> 5.  flex属性（组合属性）
> 6.  align-self属性（设置项目在交叉轴上的对齐方式）

## 2、Bootstrap4入门 ##

> 1.  基本环境搭建
> 2.  基本元素使用（table）

# Bootstrap4——环境搭建 #

> 官网地址：[https://www.bootcss.com/][https_www.bootcss.com]
> 
> ![20201117093513700.png][]

## Bootstrap5——GitHub下载 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]
> 
> ![20201117094009942.png][]   ![20201117101222854.png][]

## Bootstrap4——Bootstrap4中文网 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]

# [Font Awesome 中文网 – | 字体图标][Font_Awesome _ _ _] #

> ![2020111710340473.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7][]
> 
> ![20201117103800459.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8][]

# Bootstrap4——文字排版、颜色、表格 #

## 奇偶选择器、更改.table-striped属性 ##

>  *  Bootstrap4：默认设置body的margin值为0。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10][]

> [菜鸟教程——Bootstrap4 文字排版、颜色、表格][Bootstrap4]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11][]   ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12][]

# Bootstrap4——图片、进度条 #

>  *  [菜鸟教程——Bootstrap4——图片][Bootstrap4 1]
>  *  [菜鸟教程——Bootstrap4——进度条][Bootstrap4 2]
> 
> 进度条自动加载（在10s内，加载到100%）。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 13][]   ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14][]

# Bootstrap4——手风琴特效（折叠） #

> [菜鸟教程——Bootstrap4——折叠][Bootstrap4 3]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 15][]

## Bootstrap4——手风琴特效（折叠）——双飞翼布局 ##

> 点击按钮，会显示或折叠内容！
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 16][]   ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 17][]

# Bootstrap4——输入框组+模态框 #

## Bootstrap4——输入框组 ##

> [菜鸟教程——Bootstrap4——输入框组][Bootstrap4 4]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 18][]   ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 19][]

## Bootstrap4——输入框组+模态框 ##

### 等宽图标class="fa fa-user fa-fw" ###

> [菜鸟教程——Bootstrap4——Bootstrap 模态框（Modal）插件][Bootstrap4_Bootstrap_Modal] 
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 20][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<link rel="stylesheet" href="bootstrap4/css/bootstrap.min.css">
    		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" />
    		
    		<script src="jquery/jquery.min.js"></script>
    		
    		<script src="js/popper.min.js"></script>
    		
    		<script src="bootstrap4/js/bootstrap.min.js"></script>
    		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    		<title>bootstrap入门</title>
    		<style type="text/css">
    			.table-striped tbody tr:nth-of-type(odd) {
    				background-color: rgba(85, 255, 127, 0.5);
    			}
    		</style>
    	</head>
    	<body>
    		<div class="btn-group" style="margin-bottom: 10px;">
    			<button class="btn btn-success"><i class="fa fa-plus-circle"></i> 添加学生</button>
    			<button class="btn btn-danger"><i class="fa fa-minus-circle"></i> 删除学生</button>
    			<button class="btn btn-warning" data-toggle="modal" data-target="#editUser"><i class="fa fa-edit"></i> 编辑学生</button>
    			<button class="btn btn-info"><i class="fa fa-search"></i> 搜索学生</button>
    		</div>
    		
    		<div class="modal fade" id="editUser">
    			<div class="modal-dialog">
    				<div class="modal-content">
    
    					
    					<div class="modal-header bg-info">
    						<h4 class="modal-title">编辑学生</h4>
    						<button type="button" class="close" data-dismiss="modal">×</button>
    					</div>
    
    					
    					<div class="modal-body">
    						<form>
    							<div class="input-group mb-3">
    								<div class="input-group-prepend">
    									<span class="input-group-text"><i class="fa fa-user fa-fw"></i></span>
    								</div>
    								<input type="text" name="userName" class="form-control" placeholder="请输入用户名">
    							</div>
    							<div class="input-group mb-3">
    								<div class="input-group-prepend">
    									<span class="input-group-text"><i class="fa fa-lock fa-fw"></i></span>
    								</div>
    								<input type="password" name="userPwd" class="form-control" placeholder="请输入密码">
    							</div>
    							<div class="input-group mb-3">
    								<div class="input-group-prepend">
    									<span class="input-group-text"><i class="fa fa-transgender-alt fa-fw"></i></span>
    								</div>
    								<div class="form-control">
    									<input type="radio" name="userSex" value="男" />男
    									  
    									<input type="radio" name="userSex" value="女" />女
    								</div>
    							</div>
    							<div class="input-group mb-3">
    								<div class="input-group-prepend">
    									<span class="input-group-text"><i class="fa fa-transgender-alt fa-fw"></i></span>
    								</div>
    								<div class="form-control">
    									<input type="checkbox" name="hobbies" value="吃" />吃
    									  
    									<input type="checkbox" name="hobbies" value="喝" />喝
    									  
    									<input type="checkbox" name="hobbies" value="玩" />玩
    									  
    									<input type="checkbox" name="hobbies" value="乐" />乐
    								</div>
    							</div>
    							<div class="input-group mb-3">
    								<div class="input-group-prepend">
    									<span class="input-group-text"><i class="fa fa-user fa-fw"></i></span>
    								</div>
    								<select class="form-control">
    									<option>班级1</option>
    									<option>班级1</option>
    									<option>班级1</option>
    									<option>班级1</option>
    									<option>班级1</option>
    								</select>
    							</div>
    
    							<div class="input-group mb-3">
    								<div class="input-group-prepend">
    									<span class="input-group-text"><i class="fa fa-user fa-fw"></i></span>
    								</div>
    								<textarea class="form-control"></textarea>
    							</div>
    						</form>
    					</div>
    
    					
    					<div class="modal-footer">
    						<button type="button" class="btn btn-info" data-dismiss="modal">确定</button>
    						<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
    					</div>
    
    				</div>
    			</div>
    		</div>
    		<h1 class="bg-info text-danger" style="text-align: center;">学生信息</h1>
    		<table class="table table-bordered table-hover table-striped">
    			<thead class="table-danger">
    				<tr>
    					<th>学号</th>
    					<th>姓名</th>
    					<th>年龄</th>
    					<th>性别</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr>
    					<td>101</td>
    					<td>张三</td>
    					<td>20</td>
    					<td>男</td>
    				</tr>
    				<tr>
    					<td>101</td>
    					<td>张三</td>
    					<td>20</td>
    					<td>男</td>
    				</tr>
    				<tr>
    					<td>101</td>
    					<td>张三</td>
    					<td>20</td>
    					<td>男</td>
    				</tr>
    				<tr>
    					<td>101</td>
    					<td>张三</td>
    					<td>20</td>
    					<td>男</td>
    				</tr>
    				<tr>
    					<td>101</td>
    					<td>张三</td>
    					<td>20</td>
    					<td>男</td>
    				</tr>
    			</tbody>
    		</table>
    	</body>
    </html>

> 多谢观看~

[Bootstrap4_MySQL_10_ _]: https://blog.csdn.net/weixin_44949135/article/details/109722002
[TYPORA]: https://blog.csdn.net/mollen/article/details/84110708
[https_www.bootcss.com]: https://www.bootcss.com/
[20201117093513700.png]: /images/20221120/f04fdc3b452d45a088ca5ea434ff59cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221120/9eebd885f8af4213b59f7edc5709614d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/be233f89c4f64a659c36e5bf2634059d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221120/711fa15eaba0487db80a781c8e0c259f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: /images/20221120/972f47c6700b4b84866a510c523221e8.png
[20201117094009942.png]: https://img-blog.csdnimg.cn/20201117094009942.png
[20201117101222854.png]: /images/20221120/9d7d39b6febd45868a02c459a09bf806.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221120/21989bf226034d66b23ba5b0e501a01a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: /images/20221120/092eef8feeb94e6799a3c2339d526121.png
[Font_Awesome _ _ _]: https://www.baidu.com/link?url=Hfx-FhfdpjzGHgKNLj0cwRas1F8mGN4NL0--wUhToWiGUciBQuwWFlkXk7cV4F6_&wd=&eqid=be194db700006bb4000000035fb33658
[2020111710340473.png]: /images/20221120/e377d3e2678a44028a074a87b9c85f75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: /images/20221120/0fc7efbd14464da38f8f31d0d06e10eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7]: /images/20221120/776ee9a60b304fdd8b96f946549a72e8.png
[20201117103800459.png]: /images/20221120/7b1f383946f54a7a84429874ab3e732c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8]: /images/20221120/fc875bcf121f4b088493078734c48300.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9]: /images/20221120/792627e98e09451cb1c60503431354ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 10]: /images/20221120/1d0d3e868a3c4f48a8f50976798d383a.png
[Bootstrap4]: https://www.runoob.com/bootstrap4/bootstrap4-typography.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20201117093016284.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 12]: /images/20221120/1123c93b5d3a4761b11270653180942b.png
[Bootstrap4 1]: https://www.runoob.com/bootstrap/bootstrap-images.html
[Bootstrap4 2]: https://www.runoob.com/bootstrap/bootstrap-progress-bars.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20201117102930793.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 14]: /images/20221120/14b8d2c3bcca499189fd572531c1d433.png
[Bootstrap4 3]: https://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 15]: /images/20221120/c0868dd26622468eb7b97c7150a6b5ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20201117165621806.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 17]: /images/20221120/43a18e375f9e4ee98b8064218f5a9f18.png
[Bootstrap4 4]: https://www.runoob.com/bootstrap/bootstrap-input-groups.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20201117110934622.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 19]: /images/20221120/5c6382e78b9a427ab0feaeddabf26fb6.png
[Bootstrap4_Bootstrap_Modal]: https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 20]: /images/20221120/4064e79b89dc46d1af00ccd225d5175d.png