# 【第四篇】Flask Bootstrap 基礎 ###### tags: `Flask教學` 對於後端工程師的我，根本不懂該如何設計網頁配色，哪些按鈕該多大、各個標題會不會太小、畫面好像太雜亂了等等... 在一次因緣際會下，接觸到 Bootstrap 的官方網站，以響應式的設計為基礎，提供了各種元件的擴充套件，讓不會 CSS 與 JavaScript 的人，也能有一個好看的版面。 Flask 也有提供 Bootstrap 套件，根據上一篇的教學，我們可以直接引用基底樣板，讓你的網頁搖身一變成為漂亮的版面！ 要使用 Flask Bootstrap，必須要另外安裝： ```bash= $ pip install flask-bootstrap ``` 接著在 app.py 輸入： ```python= from flask import Flask, render_template from flask_bootstrap import Bootstrap app = Flask(__name__) Bootstrap(app) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run() ``` index.html: ```htmlmixed= {% extends "bootstrap/base.html" %} ``` 打開網址 localhost:5000 ![](https://i.imgur.com/kwinHKW.png) 我們還沒輸入任何文字，只有 extands，但我們可以開啟網頁開發者工具，發現 Bootstrap 已經幫我們加入一些相關套件： ![](https://i.imgur.com/w5OTRfb.png) 搭配上一篇提到的引用區塊，Bootstrap 也可以內建了一些區塊，直接引用即可： ```htmlmixed= {% extends "bootstrap/base.html" %} {% block title %}範例網頁{% endblock %} {% block navbar %} <div class="navbar navbar-fixed-top"></div> {% endblock %} {% block content %} <h1>Hello, Bootstrap</h1> {% endblock %} ``` 更多可以參考[官方網頁](https://pythonhosted.org/Flask-Bootstrap/basic-usage.html)，在這裡整理如下： | 區塊名字 | 外部區塊 | 說明 | | ------------ | -------- | ------------------------- | | doc | | 最外面的區塊。 | | html | doc | 完整的 <html> 區塊。 | | html_attribs | doc | 設定 html 的屬性。 | | head | doc | 完整的 <head> 區塊。 | | body | doc | 完整的 <body> 區塊。 | | body_attribs | body | 設定 body 的屬性。 | | title | head | 完整的 <title> 區塊。 | | styles | head | 設定 CSS <link> 的區塊。 | | metas | head | 完整的 <meta> 區塊。 | | navbar | body | 在 content 上面的導覽列。 | | content | body | 放置內文的區塊。 | | scripts | body | 放在 body 結尾的區塊。 | --- 上一篇：[【第三篇】Flask 擴展樣板](https://hackmd.io/@Scott/r1f8942fH) 下一篇：[【第五篇】Flask Bootstrap 與 Flask-WTF 結合](https://hackmd.io/@Scott/rkXBPHaMH)