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>
啟動後即可獲取美化過後的網頁