【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陳述句——創建資料表
查看生成好的資料表
直接編輯資料表資料
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/225373.html
標籤：其他