整合 BS4 到自己的專案

有兩種方式 : ❶ 導入 BS 所有 Sass 原始檔案 ❷ 拉出 BS 所需的 Sass 檔案 ❸使用 npm + gulp + EJS 編譯

初步解說 :

未用 EJS 編譯

  • 專案內新增資料夾 : scss 資料夾 、bootstrap 資料夾
    • scss 資料夾 : all.scss 與 _index.scss
    • bootstrap 資料夾 : bootstrap.scss
      • BS 的 Github 提供的檔案內有一個 scss 資料夾內會有一個 bootstrap.scss 檔案 ( 目前最新版為 v4.5.3 ),bootstrap.scss 就等同於我們專案內的 all.scss 皆為拿來合併用的檔案。
//all.scss 
@import "index";

切版班格線系統_01

  • 把 bootstrap.scss ( BS 官方的 ) 與 _index.scss ( 自行客製的 ) 合併到 all.scss 中,讓專案可使用。

❶ 導入 BS 所有 Sass 原始檔案

步驟一 : 下載 GitHub 原始檔,抓取最新版

  • 目前最新為 v4.5.3 ,點選旁邊的 Downloads,進入頁面後拉至最下方下載 Source code ( zip) ,下載後只需要裡面的 scss 資料夾。

    切版班格線系統_02

// alpha 為測試版 ▲

切版班格線系統_03

  • 解壓縮後,進入 scss 資料夾把名稱改為 bootstrap,整個資料夾複製到自己的專案中,貼到專案 / scss 資料夾內 。把 bootsrap 的核心 code 載入到專案中的 all.scss 。index.html 載入的 css 為 all.scss。

切版班格線系統_04

//all.scss
@import 'bootstrap/bootstrap'; // BS 官方的 scss 檔案
@import 'index'; //自己專案的 scss

步驟二:拉出 SCSS 使用

變數可在 _variables.scss 檔案內做新增或修改。

更改顏色實做

  • 路徑 : 專案資料夾 / scss / bootstrap : _variables.scss
  • 找到 $theme-colors: map-merge( ) 內可更改或新增主題色。
    • 更改 : 於後方加入色碼,或是在上方加入客製色的變數再寫入 $theme-colors: map-merge( ) 內。
    • 新增 : $theme-colors: map-merge( ) 內 $dark 後方以逗號 , 隔開照上方格式繼續新增主題色即可。

切版班格線系統_05

更改內外距實做

  • 路徑 : 專案資料夾 / scss / bootstrap : _variables.scss
  • 搜尋 spacing ,在 $spacers: map-merge( ) 做修改或新增。

❷ 拉出 BS 所需的 Sass

可參考 BS Theming ,Option B : Include parts of Bootstrap

  • BS 也有提到客製也有一些必須要載入的 scss 檔案,如下方的 //Required 部分。 ( 官方為使用 npm install )
// 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";

// 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";

❸ 使用 npm + gulp + EJS 編譯

下載六角提供的 web-layout-training-gulp 資料夾,自行修改資料夾名稱後,開啟終端機執行下方指令進行開發。做法可參考 多頁式網頁設計課堂筆記 -4 中的 " gulp 自動化整合操作步驟 "。

Others

漸漸移除掉 layout、page ,盡可能把東西變元件與類別 ( components + utilities ),複用性高減少重工。

甚麼是元件 ?

  • 將網頁中相同的元素或介面獨立出來並反覆使用來減少開發維護的時間與重工,稱為元件化
  • 在不同的頁面只要引入此元件就可以使用

命名規劃

  • 先找出共同元素 → 圖片、標題、內容、按鈕
  • 較推薦 STEP 3 寫法。

STEP1 沒有規律命名,也不通用 ( x )

<ul class="row justify-content-center list-unstyled">
  <li class="col-12 col-md-4">
    <img class="img-fluid mb-2 mt-6" src="image/photo4-1.png">
    <div>
      <h4 class="mb-0">Poppy & Barley</h4>
      <p>Jo Malone</p>
      <p>NT$1,380 <del class="text-dark ml-2">NT$1,580</del></p>
    </div>
   </li>
   <li class="col-12 col-md-4">...</li>
   <li class="col-12 col-md-4">...</li>
</ul>
<ul class="list list-unstyled">
 <li>
        <img src="images/poppy.png" class="img-fluid imgWidth">
        <h4 class="font-weight-bold">Poppy & Barley</h4>
      <p>Jo Malone</p>
      <p>NT$1,380<del class="text-dark ml-2">NT$1,580</del></p>
    </li>
    <li>...</li>
    <li>...</li>
</ul>

STEP2 有規律的命名,但不通用

<ul class="feature-list">
  <li class="feature-item">
        <img class="feature-img">
        <h3 class="feature-name">Poppy & Barley</h3>
        <h4 class="feature-brand">Jo Malone</h4>
        <h4 class="feature-price">NT1,380</h4>
    </li>
  <li class="feature-item">...</li>
  <li class="feature-item">...</li>
</ul>
<ul class="product-list">
  <li class="product-item">
        <img class="product-img">
        <h3 class="product-name">Poppy & Barley</h3>
        <h4 class="product-brand">Jo Malone</h4>
        <h4 class="product-price">NT1,380</h4>
        <a class="product-like">...</a>
        <a class="product-cart">...</a>
    </li>
  <li class="product-item">...</li>
  <li class="product-item">...</li>
</ul>

STEP3 有規律命名、可通用 ( 較建議方式 )

<ul class="card">
  <li class="card-item">
        <img class="card-img">
        <h3 class="card-title">Poppy & Barley</h3>
        <h4 class="card-subtitle">Jo Malone</h4>
        <h4 class="card-subtitle">NT1,380</h4>
        <a class="card-link">...</a>
        <a class="card-link">...</a>
    </li>
  <li class="card-item">...</li>
  <li class="card-item">...</li>
</ul>

假如想套用在門市據點, step 2 的命名較不通用,step 3 會比較理想,可通用。

scss 寫法

  • 巢狀 : 不建議超過四層。
    • 下方的 .card-body、.card-img、.card-title、.card-text 都只有兩層。每層裡面通常都放偽類 ( :hover:active 等 )
.card {
  &-body {...}
  &-img {...}
  &-title {...}
  &-text {...}
}

專案步驟-簡述版

  • 第六週 – 設計稿 找出字型、字體大小、主題色、間距、桌機平板手機斷點。

npm BS 到自己的專案中

  • 下載老師提供的 web layout training gulp master 資料夾 ( 使用 EJS 編譯 layout ),修改資料夾名稱。
  • 使用 npm 下載 bootstrap → $ npm install bootstrap ( node_modules 裡面就會有 bootstrap 官方資料 ) → $ gulp
  • node_modules / scss / bootstrap.scss 等同於專案內的 all.scss 功能。
  • 此作業使用 npm 下載 BS ,要客製 BS 的話官方建議有三個 scss 檔案是必須 @import 不可被刪除的 ( functions 、variables、mixins 是不能刪除的 ),其他 scss 皆可自行做增減。此部分可 參考 BS 官網說明
  • 複製 node_modules 裡的 _variables.scss 程式碼到自己的專案內,再進行修改客製。
    • 路徑 : app / assets /style ,可自行規劃要放 style 內的哪個資料夾。
// 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";

// 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";

//custom 專案內客製的部分

切版班格線系統_06

EJS 編譯部分

  • 新增 hmlt 頁面 → product.html、singleproduct.html、member.html、 login.html ,再分別加入下方資訊。
---
title: 首頁
layout: ./app/layout.ejs
engine: ejs
current: index
---
  • 設計稿 中遇到 nav 的版型相同,但進入到 log in 頁面點選登入後,上方的 nav 文字會由 logo in 變 Mypage。使用 <%- login %> ,詳細說明可看上方解說 🔗 [EJS 編譯-版型相同只想替換其中某小部分作法]() 。
---
title: 首頁
login: login
layout: ./app/layout.ejs
engine: ejs
current: index
---

---
title: 會員中心
login: member
layout: ./app/layout.ejs
engine: ejs
current: index
---

作業疑問統整

  1. 絕對定位與相對定位實做範例
  2. BS 中 _variables 修改顏色、間距、字體大小、斷點
  3. EJS 編譯-版型相同只想替換其中某小部分作法
  4. HTML img 也能有 bg-image 的 cover 效果
  5. filterobject-fit 運用

資料來源

六角學院

文章

最後修改日期: 30 12 月, 2020

作者