37 lines
1.9 KiB
Markdown
37 lines
1.9 KiB
Markdown
|
# BootStrap
|
|||
|
|
## 介紹
|
|||
|
|
### Bootstrap是一個由HTML、CSS和JavaScript寫成的前端框架，核心的設計目標是達成RWD響應式與行動優先，也就是讓你的網站排版可以自動適應螢幕大小。 它預先做好一套網站的基礎建設，讓你能在框架的基礎上進行開發，不需要再去煩惱瑣碎的設定。
|
|||
|
|
### *懶人包:當個快樂的套模仔
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 去BootStrap找一個自己喜歡的 [Bootstrap](https://startbootstrap.com/)
|
|||
|
|
#### 下載後將資料夾的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>
|
|||
|
|
```
|
|||
|
|
### 啟動後即可獲取美化過後的網頁
|
|||
|
|
|
|||
|
|
|
|||
|
|
|