當前位置：
首頁 >
Bootstrap4+MySQL前后端综合实训-Day04-AM【新闻管理手机端页面+数据库操作(PowerDesigner 图形化数据库设计软件、SQLyog软件)】
發布時間：2024/9/30
42
豆豆
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap4+MySQL前后端综合实训-Day04-AM【新闻管理手机端页面+数据库操作(PowerDesigner 图形化数据库设计软件、SQLyog软件)】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
【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; /*高度自適應*/
菜鳥教程——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響應式頁面——根據設備的不同，顯示不同的結果
電腦端展示（一行展示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前后端综
- 下一篇： Bootstrap4+MySQL前后端综