From 12c9f332897cb2caca081869c436f93251759123 Mon Sep 17 00:00:00 2001 From: leo Date: Tue, 23 Apr 2024 20:39:01 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20Bootstrap?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Bootstrap.md | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 Bootstrap.md diff --git a/Bootstrap.md b/Bootstrap.md new file mode 100644 index 0000000..6862bf2 --- /dev/null +++ b/Bootstrap.md @@ -0,0 +1,37 @@ +# BootStrap +## 介紹 +### Bootstrap是一個由HTML、CSS和JavaScript寫成的前端框架，核心的設計目標是達成RWD響應式與行動優先，也就是讓你的網站排版可以自動適應螢幕大小。 它預先做好一套網站的基礎建設，讓你能在框架的基礎上進行開發，不需要再去煩惱瑣碎的設定。 +### *懶人包:當個快樂的套模仔 + + +### 去BootStrap找一個自己喜歡的 [Bootstrap](https://startbootstrap.com/) +#### 下載後將資料夾的assets、css、js等資料夾去放在static +![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E5%89%8D%E7%AB%AF_%E5%9F%BA%E7%A4%8EHTML/static/Img/%E5%9C%96%E7%89%875.png) + +![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E5%89%8D%E7%AB%AF_%E5%9F%BA%E7%A4%8EHTML/static/Img/%E5%9C%96%E7%89%876.png) + +### 主要注意到Flask是用templates架構，所以內部匯入css及js的方式要改 +原 css匯入 : +``` + + +``` +改 css匯入: +``` + + +``` +原 js匯入: +``` + + +``` +改 js匯入: +``` + + +``` +### 啟動後即可獲取美化過後的網頁 +![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E5%89%8D%E7%AB%AF_%E5%9F%BA%E7%A4%8EHTML/static/Img/%E5%9C%96%E7%89%877.png) + +![](http://140.125.21.65:8418/Education/Frontend/raw/branch/master/%E5%89%8D%E7%AB%AF_%E5%9F%BA%E7%A4%8EHTML/static/Img/%E5%9C%96%E7%89%878.png) \ No newline at end of file