【Bootstrap4前端框架+MySQL数据库】前后端综合实训【10天课程 博客汇总表 详细笔记】
目 录
Typora语法
Day01—知识回顾
1、前端部分 flex布局
2、Bootstrap4入门
Bootstrap4——环境搭建
Bootstrap5——GitHub下载
Bootstrap4——Bootstrap4中文网
FontAwesome 中文网 – | 字体图标
Bootstrap4——文字排版、颜色、表格
奇偶选择器、更改.table-striped属性
Bootstrap4——图片、进度条
Bootstrap4——手风琴特效（折叠）
Bootstrap4——手风琴特效（折叠）——双飞翼布局
Bootstrap4——输入框组+模态框
Bootstrap4——输入框组
Bootstrap4——输入框组+模态框
等宽图标class="fa fa-user fa-fw"
Typora语法
TYPORA语法大全
Day01—知识回顾
【Bootstrap4前端框架+MySQL数据库】前后端综合实训【10天课程 博客汇总表 详细笔记】
1、前端部分 flex布局
容器与项目
容器需要配合“display: flex;”使用。
容器中有几个属性：
flex-direction属性（设置主轴方向）flex-wrap属性（设置换行方式）flex-flow属性（组合属性）justify-content属性（设置主轴方向上的对齐方式）align-items属性（设置交叉轴方向上的对齐方式）align-content属性（当有多个主轴情况下，设置交叉轴上的对齐方式）
项目属性：
order属性（排列顺序）flex-grow属性（放大比例）flex-shrink属性（缩小比例）flex-basis属性（主轴上的空间，可以使用width/height替代）flex属性（组合属性）align-self属性（设置项目在交叉轴上的对齐方式）
2、Bootstrap4入门
基本环境搭建基本元素使用（table）
Bootstrap4——环境搭建
官网地址：/
Bootstrap5——GitHub下载
Bootstrap4——Bootstrap4中文网
FontAwesome 中文网 – | 字体图标
Bootstrap4——文字排版、颜色、表格
奇偶选择器、更改.table-striped属性
Bootstrap4：默认设置body的margin值为0。
菜鸟教程——Bootstrap4文字排版、颜色、表格
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><!-- 新 Bootstrap4 核心 CSS 文件 --><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" /><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="jquery/jquery.min.js"></script><!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --><script src="js/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><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"><i class="fa fa-edit"></i> 编辑学生</button><button class="btn btn-info"><i class="fa fa-search"></i> 搜索学生</button></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——图片、进度条
菜鸟教程——Bootstrap4——图片菜鸟教程——Bootstrap4——进度条进度条自动加载（在10s内，加载到100%）。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><!-- 新 Bootstrap4 核心 CSS 文件 --><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" /><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="jquery/jquery.min.js"></script><!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --><script src="js/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><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">img {height: 200px;border-radius: 30px;}div {height: 100px;width: 300px;}</style><script type="text/javascript">window.onload = function() {timer = setInterval(addProcress, 1000);}function addProcress() {document.querySelector("progress").value += 10;if (document.querySelector("progress").value == 100) {clearInterval(timer);}}</script></head><body><!-- <img src="img/timg.jpg"/> --><img src="img/cat.jpg" /><div class="bg-info"><img src="img/timg.jpg" class="img-fluid" /><!--.img-fluid 类来设置响应式图片。--></div><progress max="100" value="0"></progress></body></html>
Bootstrap4——手风琴特效（折叠）
菜鸟教程——Bootstrap4——折叠
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><!-- 新 Bootstrap4 核心 CSS 文件 --><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" /><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="jquery/jquery.min.js"></script><!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --><script src="js/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><script src="bootstrap4/js/bootstrap.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>手风琴特效</title><style type="text/css">.second-nav>li {padding-left: 50px;}</style></head><body><!-- <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">简单的折叠</button><div id="demo" class="collapse">Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>--><ul class="list-group first-nav"><li class="list-group-item bg-danger" data-toggle="collapse" data-target="#demo1">First item</li><ul class="list-group second-nav collapse" id="demo1"><li class="list-group-item bg-info">First item</li><li class="list-group-item bg-info">Second item</li><li class="list-group-item bg-info">Third item</li></ul><li class="list-group-item bg-danger">Second item</li><li class="list-group-item bg-danger" data-toggle="collapse" data-target="#demo2">Third item</li><ul class="list-group second-nav collapse" id="demo2"><li class="list-group-item bg-info">First item</li><li class="list-group-item bg-info">Second item</li><li class="list-group-item bg-info">Third item</li></ul></ul></body></html>
Bootstrap4——手风琴特效（折叠）——双飞翼布局
点击按钮，会显示或折叠内容！
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><!-- 新 Bootstrap4 核心 CSS 文件 --><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" /><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="jquery/jquery.min.js"></script><!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --><script src="js/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><script src="bootstrap4/js/bootstrap.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title></title><style type="text/css">body {background-color: antiquewhite;margin: 0px;border: 1px red solid;min-height: 100vh;/*W3C盒子与IE盒子*/box-sizing: border-box;display: flex;flex-direction: column;}header,footer {height: 100px;background-color: #5F9EA0;}#main {flex-grow: 1;display: flex;align-items: stretch;}#left {width: 250px;background-color: burlywood;flex-shrink: 0;}#content {flex-grow: 1;}</style></head><body><!--body默认的高度为内容高度，body的高度为视窗(浏览器窗口)的高度--><header>头部</header><div id="main"><div id="left"><ul class="list-group first-nav"><li class="list-group-item bg-danger" data-toggle="collapse" data-target="#demo1">First item</li><ul class="list-group second-nav collapse" id="demo1"><li class="list-group-item bg-info">First item</li><li class="list-group-item bg-info">Second item</li><li class="list-group-item bg-info">Third item</li></ul><li class="list-group-item bg-danger">Second item</li><li class="list-group-item bg-danger" data-toggle="collapse" data-target="#demo2">Third item</li><ul class="list-group second-nav collapse" id="demo2"><li class="list-group-item bg-info">First item</li><li class="list-group-item bg-info">Second item</li><li class="list-group-item bg-info">Third item</li></ul></ul></div><div id="content">《茅屋为秋风所破歌》是唐代伟大诗人杜甫旅居四川成都草堂期间创作的一首歌行体古诗。此诗叙述作者的茅屋被秋风所破以致全家遭雨淋的痛苦经历，抒发了自己内心的感慨，体现了诗人忧国忧民的崇高思想境界，是杜诗中的典范之作。全篇可分为四段，第一段写面对狂风破屋的焦虑；第二段写面对群童抱茅的无奈；第三段写遭受夜雨的痛苦；第四段写期盼广厦，将苦难加以升华。前三段是写实式的叙事，诉述自家之苦，情绪含蓄压抑；后一段是理想的升华，直抒忧民之情，情绪激越轩昂。前三段的层层铺叙，为后一段的抒情奠定了坚实的基础，如此抑扬曲折的情绪变换，完美地体现了杜诗”沉郁顿挫“的风格。</div></div><footer>底部</footer></body></html>
Bootstrap4——输入框组+模态框
Bootstrap4——输入框组
菜鸟教程——Bootstrap4——输入框组
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><!-- 新 Bootstrap4 核心 CSS 文件 --><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" /><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="jquery/jquery.min.js"></script><!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --><script src="js/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><script src="bootstrap4/js/bootstrap.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>输入框组+模态框</title></head><body><div class="btn-group"><button type="button" class="btn btn-info">注册</button></div><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>班级2</option><option>班级3</option><option>班级4</option><option>班级5</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></body></html>
Bootstrap4——输入框组+模态框
等宽图标class="fa fa-user fa-fw"
菜鸟教程——Bootstrap4——Bootstrap模态框（Modal）插件
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><!-- 新 Bootstrap4 核心 CSS 文件 --><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" /><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="jquery/jquery.min.js"></script><!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --><script src="js/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><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前后端综合实训-Day02-AM【Bootstrap4(入门 环境搭建 文字排版 颜色 表格 图片 进度条 折叠 输入框组 模态框) FontAwesome字体图标】
