此篇会介绍 Bootstrap 客制化所需的环境设置。

想先谈谈关於 Bootstrap 5 客制化，需要具备的几个观念。（大致有个概念就好，後续会比较好消化）

• 函式库

  • Bootstrap 5 开始不在只是 框架，而是像 函式库，让开发者可以自由的载入需要的功能，大幅降低 Bootstrap 肥大 的问题。

• css

  • Bootstrap 5 的 .css 档案是由编译而产生的档案。（全部的样式都是由 scss 堆叠而来）

• sass

  • 所有 scss 档案路径通一汇整到一只档案，最後在透过编译这只汇总了全部 scss 路径的档案生成 css。

• utilities

  • 透过类似 API 的概念，透过 sass maps 方式以及函式，来自动生成 css 样式。

原始码环境下载

事前准备环境

• VSCode：IDE 编辑器

• Sass 编译环境

• 专案结构

  • src：用来存放前端资源（ex：image、style），关於资料夹结构的部分後续会介绍几种常见的结构，这边大家可以命名为自己习惯的即可。
    • scss：存放我们撰写的样式。
    • css：编译後的样式。
    • js：存放 js 档案。
      

四步骤载入环境

以下载入环境会针对於 sass、js 两者的环境做示范。

Step1：scss、js 原始码下载两种方法

第一种：官网下载

中英官网原始码选择，新手 或平时看中文官网，可以选择中文官网下载，有经验想 下载最新的 Bootstrap 版本，则可以选择英文官网。

• 中文官网原始码
  • SCSS 下载连结
  • JS 下载连结
• 英文官网原始码
  • SCSS 下载连结
  • JS 下载连结

第二种：github 原始码 下载

步骤：点击 main → 点击 Tags → 选择版本 → 点击 Code → 下载

如果觉得下载太慢，可以使用下载指定资料夹的方式，请参考下方两篇教学文章：

• 指令下载：下载Github上特定Repository内的资料夹
• 线上网站 DownGit 下载：下载 GitHub repository 下的资料夹

step2：将 scss、js 原始码复制到专案中

scss：将 scss 资料夹名称重新命名为 bootstrap（避免命名冲突），复制到自己专案内的 scss 资料夹内。

js：将 js 资料夹内所有档案复制到自己专案内的 js 资料夹内。

Step3：引入 css、js 路径

• bootstrap.scss 是一只汇总所有 scss 路径的档案，编译後并产生 bootstrap.css。（上一集有介绍 scss 编译环境）

• js 路径选择 bootstrap.bundle，是因为它包含了 popper.js 这个框架。

HTML 引入路径：

Step4：测试环境是否载入成功

选择 Bootstrap Modal 元件范例，来检查按钮样式、JS 事件是否正确呈现。

• 使用步骤：点下 copy → 到程序码 body 区块贴上 → 检查样式是否和 Bootstrap 相同

npm 环境下载

事前准备环境

• Node.js

四步骤载入环境

Step1：建立 package.json 档案

npm init

Step2：下载 bootstrap

npm install bootstrap

会将原始码放在根目录 node_modules/bootstrap 的资料夹。

Step3：引入 css、js 路径

• 这边直接拿 dist 内的 bootstrap.css 是不对的（为了测试 Bootstrap 环境），正常会设置为自己指定编译後的路径。

Step4：测试环境是否载入成功

选择 Bootstrap Modal 元件范例，来检查按钮样式、JS 事件是否正确呈现。

• 使用步骤：点下 copy → 到程序码 body 区块贴上 → 检查样式是否和 Bootstrap 相同

下一篇会介绍如何撰写自己的 all.scss。