1200字范文 > Bootstrap4+MySQL前后端综合实训-Day04-AM【新闻管理手机端页面+数据库操作(PowerDesi

Bootstrap4+MySQL前后端综合实训-Day04-AM【新闻管理手机端页面+数据库操作(PowerDesi

时间：2024-07-22 22:43:36

【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盒子模型的区别

/sayoko06/article/details/86743083

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

新闻列表页面
max-width: 100%; /*最大宽度100%*/height: auto; /*高度自适应*/

菜鸟教程——Bootstrap4 网格系统

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

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

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

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

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

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

<!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>网格系统</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"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button><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="/images/mix/img_fjords_wide.jpg" class="img-fluid"></div><div class="carousel-item"><img src="/images/mix/img_nature_wide.jpg" class="img-fluid"></div><div class="carousel-item"><img src="/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:/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_timedatetime comment '创建时间',update_timedatetime comment '更改时间',primary key (user_id));alter table user_info comment '用户信息表';