1 Bootstrap
leo edited this page 2024-04-23 20:39:01 +08:00
This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

BootStrap

介紹

Bootstrap是一個由HTML、CSS和JavaScript寫成的前端框架核心的設計目標是達成RWD響應式與行動優先也就是讓你的網站排版可以自動適應螢幕大小。 它預先做好一套網站的基礎建設,讓你能在框架的基礎上進行開發,不需要再去煩惱瑣碎的設定。

*懶人包:當個快樂的套模仔

去BootStrap找一個自己喜歡的 Bootstrap

下載後將資料夾的assets、css、js等資料夾去放在static

主要注意到Flask是用templates架構所以內部匯入css及js的方式要改

原 css匯入 :

<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<link href="css/styles.css" rel="stylesheet" />

改 css匯入:

<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='assets/favicon.ico') }}">
<link rel="stylesheet"  href="{{ url_for('static', filename='css/styles.css') }}">

原 js匯入:

<script src="js/scripts.js"></script>
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>

改 js匯入:

<script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>

啟動後即可獲取美化過後的網頁