Bootstrap4+MySQL前后端综合实训-Day02-AM【Bootstrap4(入门、环境搭建、文字排版、颜色、表格、图片、进度条、折叠、输入框组、模态框)、Font Awesome字体图标】
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap4+MySQL前后端综合实训-Day02-AM【Bootstrap4(入门、环境搭建、文字排版、颜色、表格、图片、进度条、折叠、输入框组、模态框)、Font Awesome字体图标】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
【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;”使用。
容器中有幾個屬性：
項目屬性：
2、Bootstrap4入門
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前后端综