(1) Bootstrap 起手式、載入方法

Ivy Ho

Published in

IvyCodeFive

8 min readMay 19, 2020

這次在「網頁切版直播班」深入學習 Sass/SCSS 的應用之後，對 Bootstrap 的使用也有了更深入的一層了解，決定來重新複習 BS4 課程，並寫寫此主題的技術筆記，加深自己學習印象之外，也分享給有需要的讀者~

Bootstrap 是什麼 ?

Bootstrap是使用 HTML、CSS、 JavaScript 撰寫而成的框架，與其說它是一個前端框架，不如稱它為前端元件庫更為適合，因為它最棒的地方，便是可依專案需求取用需要的元件，且這些元件皆符合響應式設計。熟悉其變數設定的原理後，更可針對顏色、樣式進行修改，相當方便。

Bootstrap 的原理是，將一個個常用的 CSS 設定或元件樣式寫在對應的 class 名稱內，讓使用者只要載入 bootstrap 後，在 html 中依需求加上 class 名稱便可產生對應樣式，大大省去自己需撰寫的 CSS 篇幅，也縮短開發時間。

如何開始使用Bootstrap呢?

使用 Bootstrap 的秘訣便是—「詳閱公開說明書」，想成為Bootstrap之神，Bootstrap官方文件不離手是第一步~(給)

📄英文官方文件 :

Bootstrap

Quickly design and customize responsive mobile-first sites with Bootstrap, the world's most popular front-end open…

getbootstrap.com

📄六角翻譯中文文件 :

導覽列 (Navbar)

Bootstrap 導覽列的文件與範例，包含產品標記、導覽以及包含折疊插件。在開始使用導覽列需要知道的事。導覽列需要在外方使用 .navbar，並透過 .navbar-expand{-sm|-md|-lg|-xl}…

bootstrap.hexschool.com

💡建議可先看看中文文件大致分類、內容，熟悉之後以英文文件為主，中文文件為輔。若常使用文件左上角的搜尋功能，也要盡量在英文文件上搜尋，才能獲得較新、較精準的文件資訊唷。

Bootstrap載入方法

以下介紹兩種方法:

1️⃣ 初階: CDN連結載入

2️⃣ 進階: 終端機載入 (待配Sass/SCSS使用)

1️⃣ CDN連結載入

步驟如一下:

點擊 Bootstrap 文件上的「Get Started」按鈕

2. 卷軸滾至下方，找到 CSS 與 JS 的連結，依序按下右上角的 Copy 複製到專案 (若確定不會使用到JS，也可以只複製CSS連結哦~)

都貼到專案中以後，我們就可以開始使用 Bootstrap 囉!

2️⃣終端機載入

步驟如下:

1. 打開終端機

windows系統 :

windows 鍵+R，再按下 Enter
按開始 > 執行 > 輸入「cmd」打開命令提示字元

Mac 系統:

按 command+空白鍵，輸入「terminal」打開終端機

2. 利用 cd 指令移入我們的專案資料夾

新增一個資料夾(這邊命名為 bs4-test )，在終端機輸入cd+空一格，將資料夾拖曳進去放開，產生檔案路徑，再按下 Enter。
⚠️檔案若是放置在 D 槽，需在終端機輸入cd+空一格+/d+空一格+路徑(可將檔案拖曳進去產生)，如下圖。可看到按下 Enter 後，產生的最後一行路徑已成功指向我們要的資料夾。

3.在終端機輸入 npm+空一格+init 再按下 Enter 來產生出 package.json

按 Enter 後會產生一些對應的資訊，就一直按 Enter 即可~

4. 在終端機輸入 npm+空一格+install+空一格+bootstrap 載入 Bootstrap

載入成功後回到資料夾看看，此時我們的資料夾已多出以下這些檔案，node_modules 資料夾裡裝的便是我們剛剛載入的 Bootstrap 檔案。

5. 在 bs4-test 資料夾裡，與 node_modules 資料夾同層的地方新增一個scss 資料夾，並在裡面新增一個 all.scss 檔案。

6. 回到 bootstrap 官方文件，找到 Theming 主題化的 Importing，可以看到官方提供兩個選項:

選項A : 如果想載入所有的 Bootstrap 檔案，直接在 all.scss 貼上以下這行即可

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

選項B : 只希望匯入自己需要用到的檔案，達到客製化，官方建議以下三個檔案必須載入

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

此三個檔案是用來建立環境，編譯後並不會產生CSS檔案。

當然，我們也可以自訂 variables 變數檔案來達到客製化主題，之後會再寫一篇文章跟大家介紹。

載入以上三支檔案建立環境後，便可參考 Bootstrap 自己的 scss 檔案裡共匯入了哪些檔案，再挑選此專案會用到、需要載入的檔案，如格線系統、元件、文字設定等。

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

這邊我們就載入buttons元件來測試看看