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

目录

W3C标准盒子模型和IE盒子模型的区别

Bootstrap4——新闻管理手机端页面

菜鸟教程——Bootstrap4 网格系统

Bootstrap4——导航、导航栏、轮播

Bootstrap4响应式页面——根据设备的不同，显示不同的结果

电脑端展示（一行展示4个商品信息div）

手机端展示（一行展示1个商品信息div）

平板电脑端展示（一行展示2个商品信息div）

PowerDesigner 图形化数据库设计软件的使用

新建工程：File -> Project

File->New Model

创建数据表

编辑数据表的属性

PowerDesigner软件自动生成SQL语句

使用记事本打开sql文件，查看代码

SQLyog软件的使用

新建连接

新建数据库

执行SQL语句——创建数据表

查看生成好的数据表

直接编辑数据表数据

W3C标准盒子模型和IE盒子模型的区别

https://blog.csdn.net/sayoko06/article/details/86743083

Bootstrap4——新闻管理手机端页面

新闻列表页面

max-width: 100%; /*最大宽度100%*/

height: auto; /*高度自适应*/

<!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 {margin: 0px;}header {height: 54px;background-color: #F8F8F8;display: flex;justify-content: space-between;padding: 0px 10px;align-items: center; /*垂直居中*/}#back, #close-page {color: #FFC74F;}nav {height: 45px;border-bottom: 1px solid #FFC74F;display: flex;}nav>a {text-decoration: none;flex-grow: 1; /*flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。*/border-right: 1px #FFC74F solid;background-color: antiquewhite;display: flex;justify-content: center;align-items: center;color: brown;}.col-7 {display: flex;flex-direction: column;justify-content: space-between;}.row {margin-bottom: 20px;}</style></head><body><header><span id="back"><i class="fa fa-chevron-left"></i> 返回</span><span>校内新闻</span><span id="close-page">关闭</span></header><nav><a href="#">教务处</a><a href="#">教务处</a><a href="#">教务处</a></nav><div class="container-fluid"><div class="row"><div class="col-5"><img src="img/timg.jpg" class="img-fluid" /></div><div class="col-7"><h5>研究显示：新冠病毒最早2019年9月或已在意大利出现</h5><span>2020-11-19 09:15</span></div></div><div class="row"><div class="col-5"><img src="img/timg.jpg" class="img-fluid" /></div><div class="col-7"><h5>研究显示：新冠病毒最早2019年9月或已在意大利出现</h5><span>2020-11-19 09:15</span></div></div><div class="row"><div class="col-5"><img src="img/timg.jpg" class="img-fluid" /></div><div class="col-7"><h5>研究显示：新冠病毒最早2019年9月或已在意大利出现</h5><span>2020-11-19 09:15</span></div></div><div class="row"><div class="col-5"><img src="img/timg.jpg" class="img-fluid" /></div><div class="col-7"><h5>研究显示：新冠病毒最早2019年9月或已在意大利出现</h5><span>2020-11-19 09:15</span></div></div><div class="row"><div class="col-5"><img src="img/timg.jpg" class="img-fluid" /></div><div class="col-7"><h5>研究显示：新冠病毒最早2019年9月或已在意大利出现</h5><span>2020-11-19 09:15</span></div></div></div></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></head><body><div class="container-fluid bg-danger"><div class="row"><div class="col-5 bg-success">2</div><div class="col-7 bg-warning">2</div></div></div></body>
</html>

Bootstrap4——导航、导航栏、轮播

菜鸟教程——Bootstrap4——导航

菜鸟教程——Bootstrap4——导航栏

菜鸟教程——Bootstrap4——轮播

Bootstrap4响应式页面——根据设备的不同，显示不同的结果

电脑端展示（一行展示4个商品信息div）

手机端展示（一行展示1个商品信息div）

平板电脑端展示（一行展示2个商品信息div）

<!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">.carousel-item>img {width: 100%;}</style></head><body><nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top"><!-- Brand --><a class="navbar-brand" href="#">Navbar</a><!-- Toggler/collapsibe Button --><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button><!-- Navbar links --><div class="collapse navbar-collapse" id="collapsibleNavbar"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li></ul></div></nav><div style="margin-top: 56px;" id="demo" class="carousel slide" data-ride="carousel"><!-- 指示符 --><ul class="carousel-indicators"><li data-target="#demo" data-slide-to="0" class="active"></li><li data-target="#demo" data-slide-to="1"></li><li data-target="#demo" data-slide-to="2"></li></ul><!-- 轮播图片 --><div class="carousel-inner"><div class="carousel-item active"><img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" class="img-fluid"></div><div class="carousel-item"><img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" class="img-fluid"></div><div class="carousel-item"><img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" class="img-fluid"></div></div><!-- 左右切换按钮 --><a class="carousel-control-prev" href="#demo" data-slide="prev"><span class="carousel-control-prev-icon"></span></a><a class="carousel-control-next" href="#demo" data-slide="next"><span class="carousel-control-next-icon"></span></a></div><div class="container-fluid"><div class="row"><div class="shop-item col-lg-3 col-md-6 col-12"><img src="img/shop1.jpg" class="img-fluid" /><p>商品********* 价格<span style="color: red;">￥999</span></p></div><div class="shop-item col-lg-3 col-md-6 col-12"><img src="img/shop2.jpg" class="img-fluid" /><p>商品********* 价格<span style="color: red;">￥999</span></p></div><div class="shop-item col-lg-3 col-md-6 col-12"><img src="img/shop1.jpg" class="img-fluid" /><p>商品********* 价格<span style="color: red;">￥999</span></p></div><div class="shop-item col-lg-3 col-md-6 col-12"><img src="img/shop2.jpg" class="img-fluid" /><p>商品********* 价格<span style="color: red;">￥999</span></p></div><div class="shop-item col-lg-3 col-md-6 col-12"><img src="img/shop1.jpg" class="img-fluid" /><p>商品********* 价格<span style="color: red;">￥999</span></p></div><div class="shop-item col-lg-3 col-md-6 col-12"><img src="img/shop2.jpg" class="img-fluid" /><p>商品********* 价格<span style="color: red;">￥999</span></p></div><div class="shop-item col-lg-3 col-md-6 col-12"><img src="img/shop1.jpg" class="img-fluid" /><p>商品********* 价格<span style="color: red;">￥999</span></p></div><div class="shop-item col-lg-3 col-md-6 col-12"><img src="img/shop2.jpg" class="img-fluid" /><p>商品********* 价格<span style="color: red;">￥999</span></p></div><div class="shop-item col-lg-3 col-md-6 col-12"><img src="img/shop1.jpg" class="img-fluid" /><p>商品********* 价格<span style="color: red;">￥999</span></p></div><div class="shop-item col-lg-3 col-md-6 col-12"><img src="img/shop2.jpg" class="img-fluid" /><p>商品********* 价格<span style="color: red;">￥999</span></p></div><div class="shop-item col-lg-3 col-md-6 col-12"><img src="img/shop1.jpg" class="img-fluid" /><p>商品********* 价格<span style="color: red;">￥999</span></p></div><div class="shop-item col-lg-3 col-md-6 col-12"><img src="img/shop2.jpg" class="img-fluid" /><p>商品********* 价格<span style="color: red;">￥999</span></p></div></div></div></body>
</html>

PowerDesigner 图形化数据库设计软件的使用

新建工程：File -> Project

File->New Model

创建数据表

编辑数据表的属性

P：主键。

M：非空。

varchar：长度可变。

datetime：日期+时间。

timestrap：时间戳，自动更新时间。

添加注释：用户主键ID

PowerDesigner软件自动生成SQL语句

【选中数据表，点击：DataDase -> Generate Database（建议删除多余的数据表！）】

使用记事本打开sql文件，查看代码

/*==============================================================*/
/* DBMS name:      MySQL 5.0                                    */
/* Created on:     2020/11/19 10:55:58                          */
/*==============================================================*/drop table if exists user_info;/*==============================================================*/
/* Table: user_info                                             */
/*==============================================================*/
create table user_info
(user_id              int not null comment '用户主键ID',user_name            varchar(255) not null comment '用户名',user_pwd             varchar(255) not null comment '用户密码',create_time          datetime comment '创建时间',update_time          datetime comment '更改时间',primary key (user_id)
);alter table user_info comment '用户信息表';

SQLyog软件的使用

新建连接

新建数据库

执行SQL语句——创建数据表

查看生成好的数据表

直接编辑数据表数据

Bootstrap4+MySQL前后端综合实训-Day04-AM【新闻管理手机端页面+数据库操作(PowerDesigner 图形化数据库设计软件、SQLyog软件)】相关推荐

Bootstrap4+MySQL前后端综合实训-Day02-PM【新闻管理后台（登录页面、首页）、#left＞a:nth-child(4) {}】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录主页 #left>a:nth-child(4) {} 登录页主页 #left& ...
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前后端综合实训-Day04-AM【新闻管理手机端页面+数据库操作(PowerDesigner 图形化数据库设计软件、SQLyog软件)】

W3C标准盒子模型和IE盒子模型的区别

Bootstrap4——新闻管理手机端页面

菜鸟教程——Bootstrap4 网格系统

Bootstrap4——导航、导航栏、轮播

Bootstrap4响应式页面——根据设备的不同，显示不同的结果

电脑端展示（一行展示4个商品信息div）

手机端展示（一行展示1个商品信息div）

平板电脑端展示（一行展示2个商品信息div）

PowerDesigner 图形化数据库设计软件的使用

新建工程：File -> Project

File->New Model

创建数据表

编辑数据表的属性

PowerDesigner软件自动生成SQL语句

使用记事本打开sql文件，查看代码

SQLyog软件的使用

新建连接

新建数据库

执行SQL语句——创建数据表

查看生成好的数据表

直接编辑数据表数据

Bootstrap4+MySQL前后端综合实训-Day04-AM【新闻管理手机端页面+数据库操作(PowerDesigner 图形化数据库设计软件、SQLyog软件)】相关推荐

最新文章

热门文章

Bootstrap4+MySQL前后端综合实训-Day04-AM【新闻管理手机端页面+数据库操作(PowerDesigner 图形化数据库设计软件、SQLyog软件)】

W3C标准盒子模型和IE盒子模型的区别

Bootstrap4——新闻管理手机端页面

菜鸟教程——Bootstrap4 网格系统

Bootstrap4——导航、导航栏、轮播

Bootstrap4响应式页面——根据设备的不同，显示不同的结果

电脑端展示（一行展示4个商品信息div）

手机端展示（一行展示1个商品信息div）

平板电脑端展示（一行展示2个商品信息div）

PowerDesigner 图形化数据库设计软件的使用

新建工程：File -> Project

File->New Model

创建数据表

编辑数据表的属性

PowerDesigner软件 自动生成SQL语句

使用记事本打开sql文件，查看代码

SQLyog软件的使用

新建连接

新建数据库

执行SQL语句——创建数据表

查看生成好的数据表

直接编辑数据表数据

Bootstrap4+MySQL前后端综合实训-Day04-AM【新闻管理手机端页面+数据库操作(PowerDesigner 图形化数据库设计软件、SQLyog软件)】相关推荐

最新文章

热门文章

PowerDesigner软件自动生成SQL语句