Bootstrap框架
先送上Bootstrap官網網址。
Bootstrap是非常受歡迎的前端框架，只要安裝好相關的css及js檔，之後在寫html時，只需要輕輕鬆鬆的修改class，就能得到許多前端效果。
Wagtail CRX已經很好心的都幫我們安裝好Bootstrap了，直接用就對了，以我目前使用的v2.1.2版本是支援到Bootstrap v5.2的。
不過無論Bootstrap哪個版本，下面的基本功能都差不多，我們就儘快進入正題吧。
以下內容需要對html有基礎認識，至少要知道class怎麼用。
顏色
要把網頁弄得花花綠綠的，顏色絕對是最重要的環節，就從這裡開始吧。
基本顏色class標籤：
大致上就是primary, secondary, success, danger, warning, info這幾個標籤分別代表著不同的顏色。若前面加上”bg-“，就表示背景要變成這個顏色。請看以下把div變色的例子：
<div class="bg-primary">背景顏色</div>
<div class="bg-secondary">背景顏色</div>
<div class="bg-success">背景顏色</div>
<div class="bg-danger">背景顏色</div>
<div class="bg-warning">背景顏色</div>
<div class="bg-info">背景顏色</div>
<div class="bg-light">背景顏色</div>
<div class="bg-dark">背景顏色</div>Code language: HTML, XML (xml)以上div所實際輸出的結果如下：
同理，字體顏色也可以使用這樣的組合標籤”text-” 舉例如下：
<p class="text-primary">普通人日誌</p>
<p class="text-secondary">普通人日誌</p>
<p class="text-success">普通人日誌</p>
<p class="text-danger">普通人日誌</p>
<p class="text-warning">普通人日誌</p>
<p class="text-info">普通人日誌</p>
<p class="text-light bg-secondary">普通人日誌</p>
<p class="text-dark">普通人日誌</p>Code language: HTML, XML (xml)以上不同的class，所呈現出來的字體依序如下：
特別注意第7行的class，標籤是可以混搭把text-light 及 bg-secondary 一起使用的。
普通人日誌
普通人日誌
普通人日誌
普通人日誌
普通人日誌
普通人日誌
普通人日誌
網格系統（Grid system）
我想這應該是Bootstrap最受歡迎的功能了。除了方便排版，另外也會讓手機、平板、螢幕等不同尺寸的畫面都能兼顧閱讀性。
但因為這樣篇幅會有點多，而且Wagtail CRX大多幫我們規劃好了，所以這邊我僅簡短介紹。
列 ( Row ) 與欄 ( Column )
這很重要，但也很簡單，Bootstrap是把畫面分割成列與欄
- 先有列，再有欄。
- 1列裡面最多可分成12欄。
嗯，有以上的概念應該就足夠了。
自動式網格系統 ( Responsive Grid System ) 的分段點 ( breakpoint )
這裡也是先學點概念就足夠了。
Bootstrap預設了以下幾個分段點，分段點的用意就是讓網頁內容可以配合不同尺寸的螢幕來做換行，免得每次閱讀都要放大然後移動捲軸。
- Extra small (xs), <576px
- Small (sm), 576px ~ 768px
- Medium (md), 768px ~ 992px
- Large (lg), 992px ~ 1200px
- Extra large (xl), 1200px ~ 1400px
- Extra extra large (xxl), >1400px
以上要如何使用，就等未來實戰再來說明，會比較容易理解。