網頁程式設計:客製化及幫 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 前置處理器的好處。

    去除不需要的模組

    藉由修改 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 樣式表都不會太難。

    【分享本文】
    Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email
    【追蹤新文章】
    Facebook Twitter Plurk