Bootstrap4+MySQL前后端综合实训-Day02-AM【Bootstrap4(入门、环境搭建、文字排版、颜色、表格、图片、进度条、折叠、输入框组、模态框)、Font Awesome字体图标】
2024-06-01 07:27:51
【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语法大全
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——环境搭建
官网地址：https://www.bootcss.com/
Bootstrap5——GitHub下载
Bootstrap4——Bootstrap4中文网
Font Awesome 中文网 – | 字体图标
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(入门、环境搭建、文字排版、颜色、表格、图片、进度条、折叠、输入框组、模态框)、Font Awesome字体图标】相关推荐
- Bootstrap4+MySQL前后端综合实训-Day06-AM【eclipse详细配置Tomcat、开发web项目、servlet、连接MySQL8.0数据库、用户登录界面的编写与验证、分页查询】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记][附:实训所有代码] 目 录 eclipse重置视图 MySQL数据库--建数据库.建数据库 s ...
- Bootstrap4+MySQL前后端综合实训-Day10-AM【实训汇报-下午返校、项目代码（7个包+7个Html页面）】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记][附:实训所有代码] 目录 实训汇报 数据库--所有SQL语句 工程文件展示 代码 ①package ...
- Bootstrap4+MySQL前后端综合实训-Day09-PM【实训汇报、在同一校园网下，查看别人的项目——ipconfig】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记][附:实训所有代码] 在同一校园网下,查看别人的项目--ipconfig
- Bootstrap4+MySQL前后端综合实训-Day09-AM【项目功能展示视频、小组汇报PPT、项目介绍】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记][附:实训所有代码] 目 录 项目功能展示视频(视频地址:https://live.csdn.n ...
- Bootstrap4+MySQL前后端综合实训-Day08-PM【ajax获取表单标签内容、根据“栏目信息”添加“新闻信息”、新闻管理系统-项目展示】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记][附:实训所有代码] 目 录 ajax获取表单标签内容 ajax根据数据库加载select下来列 ...
- Bootstrap4+MySQL前后端综合实训-Day08-AM【多表查询sql语句、关联数据的假删除、自动增长主键的获取、栏目管理“数据编辑”按钮的实现】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记][附:实训所有代码] 目 录 多表查询sql语句 关联数据的假删除(status状态码/数据可恢 ...
- Bootstrap4+MySQL前后端综合实训-Day07-PM【用户信息管理页面——功能展示(分页显示数据、添加用户、批量删除用户、编辑用户信息)、servlet项目代码整理汇总】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记][附:实训所有代码] 目 录 页面展示 分页显示数据 添加用户信息 (单个/批量)删除用户 编辑 ...
- Bootstrap4+MySQL前后端综合实训-Day07-AM【ajax局部刷新——(单个/批量)删除用户按钮的实现、更新用户信息按钮的实现】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记][附:实训所有代码] 目 录 (单个/批量)删除用户按钮的实现.更新用户信息按钮的实现--展示 ...
- Bootstrap4+MySQL前后端综合实训-Day06-PM【MD5加码-生成32位md5码、ResultData.java、分页查询用户数据、添加用户按钮的实现】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记][附:实训所有代码] 目录 MD5加码 生成32位md5码 ResultData.java 分页查询 ...
最新文章
- python退出程序-【转】python 退出程序的方式
- [vue] prop是怎么做验证的？可以设置默认值吗？
- 又一主播逃税被罚！快手主播“驴嫂平荣”被追缴并罚款6200.3万元
- 《精通Unix下C语言编程与项目实践》读书笔记（2）
- P2P中DHT网络介绍
- ［雨松MOMO程序研究院］Unity3D研究院之构建游戏框架与导出IOS项目（一）
- 数据分析师岗位要求案例分析
- 马云：未来制造业要的不是石油 最大的能源是数据
- 程序员的未来之路[转]
- 如何实现一个地图库封装，可以快速切换地图
- 特殊古典加密方法解密实践
- mysql中sum函数使用_MySQL中的SUM函数使用教程_MySQL
- python3中的 eval函数
- git-rebasegit-squash
- 协议--SCCB与IIC的区别
- 域名还能绑定动态IP？看完又涨知识了！！
- html 文字段落编辑,美化html段落文本 Ⅰ
- 苹果电脑黑屏后重装系统的方法，可以保护所有数据，不使用u盘和移动硬盘
- 【复盘7】距离考研还有88天【补充作息时间表】
- （三）千隆问屈术 让你成为别人的神 让人觉得你是权威专家的沟通模式