美思 [網頁設計] 教學:客製化及幫 Bootstrap 4 瘦身

Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

前言

在 Bootstrap 3 時代,Twitter 提供官方的客製化頁面。藉由客製版本的 Bootstrap,我們不僅可幫 Bootstrap 瘦身,還可以客製化顏色 (color)、字體 (font)、元素間距 (margin) 等項目。但 Bootstrap 4 之後,官方沒有放出這樣的客製化頁面,我們得自己下載 Bootstrap 的原始碼後自行編譯 Bootstrap。

筆者原本的目的是想移除不必要的 Bootstrap 設定,也就是幫 Bootstrap 瘦身,但也會簡單說明如何客製化 Bootstrap。

下載 Bootstrap 4 原始碼

Bootstrap 4 官方原始碼站台即可下載 Bootstrap 的原始碼。Twitter 提供多種 Bootstrap 檔案或套件格式。筆者是下載穩定版本的 ZIP 壓縮檔。

如果想用開發中版本,可使用 Git 下載。參考以下指令:

$ git clone https://github.com/twbs/bootstrap.git

但筆者以為客製化 Bootstrap 的目的是取得相容於自已網站的 Bootstrap,且滿足客製化的需求。追新其實不是很必要,有需要的讀者可自行嘗試。

初始化專案

編譯 Bootstrap 時,工作目錄 (working directory) 需在 Bootstrap 原始碼的根目錄。使用 cd 移動到 Bootstrap 原始碼的根目錄:

$ cd bootstrap

在編譯 Bootstrap 前,要先安裝相依的 Node.js 套件。使用以下指令安裝相關套件:

$ npm install

(選擇性) 修改 Bootstrap 4 的參數

如果想要客製化 Bootstrap 的風格,可以修改 Bootstrap 專案內的 scss/_variable.scss 。這個專案由許多 SCSS 變數所組成,只要修改該檔案內的變數,就可以影響整個 Bootstrap 樣式表的風格,這就是使用 Sass 等 CSS 前置處理器的好處。

我們的目標不是要重製 Bootstrap 主題,故不深入探討這個部分。

去除不需要的模組

藉由修改 scss/bootstrap.scss ,我們可以決定要引入或移除那些 CSS 設置。我們將 scss/bootstrap.scss 的內容節錄如下:

/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
(省略一些內容)

基本上,這個樣式表就是一連串的 @import 敘述。我們只要將用不到的模組所在的 @import 敘述註解掉,編譯 Bootstrap 時就不會引入該模組。假定我們用不到 carousel 元件 (component),將其去除的 SCSS 代碼如下:

// @import "carousel";

由於每個程式人手上的網站各有不同,要移除那些元件得自行決定。筆者本身採取比較保守的策略,只移除明確用不到的元件,其他的元件皆保留。

(選擇性) 編譯及測試 Bootstrap

在客製化完 Bootstrap 後,可以編譯及測試客製化的 Bootstrap 樣式表。這個步驟並不是必要的,如果不想做可以直接略過。

輸入以下指令以編譯及測試 Bootstrap 樣式表:

$ npm run test

筆者在試跑這個指令時,出現一些相依性問題,將其列出如下文。

要安裝 node-sass 套件,這是 LibSass 的 Node.js binding。輸入以下指令來安裝:

$ npm install --save-dev node-sass

另外,測試時會用到 Jekyll,這是一套以 Ruby 寫成的靜態部落格產生器。使用 Ruby 社群知名的 Bundler 即可自動處理相依性的問題。輸入以下指令來安裝:

$ bundle install

由於 Jekyll 在 Windows 水土不服,筆者對這些測試能否在 Windows 上完成持保留態度,有興趣的讀者可自行嘗試。

編譯 Bootstrap

輸入以下指令即可編譯 Bootstrap 樣式表:

$ npm run dist

編譯好的樣式表會放在 dist 子目錄。編譯好後自行取用需要的 CSS 樣式表或 JavaScript 命令稿即可。

結語

雖然 Twitter 不再幫 Bootstrap 提供官方的客製化頁面,藉由自行編譯 Bootstrap 原始碼,要幫 Bootstrap 樣式表瘦身或是客製化 Bootstrap 樣式表都不會太難。

關於作者

身為資訊領域碩士,美思認為開發應用程式的目的是為社會帶來價值。如果在這個過程中該軟體能成為永續經營的項目,那就是開發者和使用者雙贏的局面。

美思喜歡用開源技術來解決各式各樣的問題,但必要時對專有技術也不排斥。閒暇之餘,美思將所學寫成文章,放在這個網站上和大家分享。