---
tags: 21 天帶您做出 Bootstrap 5 募資網站
---

# 切版紀錄-蛤蛤募資
<!--ok待整-->
<!-- 第四堂: Bootstrap 5 + Sass 高度客製化搭配 -->
## 簡介
Huhhuh募資以Bootstrap5框架撰寫 HTML、CSS、RWD，客製化SCSS，內容為個人切版練習。

原設計稿為" Bootstrap 5 募資網站 " 所提供的版型-“拼拼募資”，主要為切版練習，切版完我再更換主題內容圖片等。

## 講義、影片、設計稿
[原設計稿-拼拼募資](https://hexschool.github.io/boootstrap5WebLayout/)
[Bootstrap 5 新手教學實戰營 - SCSS 客製化(上)](https://www.youtube.com/watch?v=lZgMbStOy0I&list=PLYrA-SsMvTPOX9oF6ld9RGwWlo7PceI_P&index=7)
[Bootstrap 5 新手教學實戰營 - SCSS 客製化(下)](https://www.youtube.com/watch?v=aJVCCcXrjPw&list=PLYrA-SsMvTPOX9oF6ld9RGwWlo7PceI_P&index=8)
[助教筆記](https://hackmd.io/@WangShuan/SkPbXsXqu)

## 作品
[拚拚demo](https://carefree0906.github.io/pinpinpin/)、[蛤蛤募資demo](https://carefree0906.github.io/huhhuh/)

## 客製化流程步驟
scss 檔需透過編譯成 css 檔才能在網頁上使用

1.下載bootstrap[原始檔](https://bootstrap5.hexschool.com/docs/5.0/getting-started/download/#source-files)

2.將Bootstrap的SCSS資料夾，複製到自己的SCSS資料夾裡，
重新命名為Bootstrap，這裡主要是抓取bootstrap.scss

3.在vscode安裝套件: Live Sass Compiler

4.新增scss檔，將架構用成如下結構
(1)新增all.scss、_index.scss、_faq.scss 空白檔案放到scss資料夾

(2)all.scss 輸入下面內容 → 按下watch scss(畫面左下角，這是live sass compiler的套件功能) →
也就是把bootstrap/bootstrap.scss+_index.scss+_faq.scss 合併在all.scss檔 =>> 透過編譯all.scss自動產生all.css檔。

*檔名加下底線即不需要被編譯，為合併用的檔案 → 最終只會有一支scss檔案。
合併成一支的優點，分類scss方便專案給不同人改，也可以讓網路請求數變少，若版型不同就可以拆成一支scss，再合併到all.scss

    @import "bootstrap/bootstrap";
    @import "index";
    @import "faq"; 
    .header{
     width: 30px;
         a{
         color:#000;
         }
     }

    /*透過編譯自動產生all.css檔*/
    .header {
      width: 30px;
    }

    .header a {
      color: #000;
    }

5.將 index.html 上的 CSS 換成本地端 all.css
新增index.html，建立BS5開發環境<!--老師是輸入bs5就跑出來了不知道怎麼弄的-->將bootstrap cdn link改成link scss/all.css

## 找出設計稿的主色、輔色

### (1)例如募資網站拼拼色系
#FFDF65 主色黃 → "warning"
#858377 贊助區塊文字 → "secondary"
#494846 大標 P文字 → "body-color"
#636057 nav → "light"
#FF785E hover紅色 → "danger"

$theme-colors: (
  "primary":    $primary,
  "secondary":  #858377,
  "success":    $success,
  "info":       $info,
  "warning":    #FFDF65,
  "danger":     #FF785E,
  "light":      #636057,
  "dark":       $dark
) !default;

### (2)[googlefont](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/ryar-vGOd/%2FbvLKze7nRU6kOa2jZxXDIg)
大標NotoSansCJKtc-Bold
大部分NotoSansCJKtc-Regular
NotoSansCJKtc-Medium
數字BalooTamma2-Bold
12px 14px 16px 18px 20px 24px 32px

### (3)hover完全不同顏色，所以可以拉出來做

.bg-hover-primary:hover{
.....
}

/*只有i標籤可寫這樣*/
.bg-hover-primary:hover > i{
.....
}

## 更改預設值- 開啟_variable.scss
從上到下的順序為 色系 > Options(預設樣式)> Spacing(間隔)> Body > link (連結) > breakpoints(斷點)

### (1)色系: theme-colors
* 修改primary為#FFDF65。若預設選項都已修改完，可新增色系名稱，會自動產生一系列class名稱，例 "darkred": #ff0000,

* 變數命名: 建議用深淺例如darkGray lightGary ，或同色多 種深淺gray-100~gray-700(目前趨勢是100-900，如果是1- 100趕 快離開那間公司，先處理人公司，再處理自己問題 哈哈)

* ps. sublime無法編譯scss 建議用prepros 軟體
scss編譯完的map檔"不需"留在專案資料夾，方便debug用可刪除

### (2)預設樣式: Options
預設不要圓角，修改Options裡面的enable-rounded:false;

// Options
$enable-rounded: false !default;

### (3)間隔: Spacing
1rem=16px，例如新增6: spacer *5

0: 0,
1: =4px
2: =8px
3: =16px
4: =24px
5: =48px
6: =80px

// Spacing
  0: 0,
  1: $spacer / 4, 
  2: $spacer / 2,  
  3: $spacer,       
  4: $spacer * 1.5,  
  5: $spacer * 3,    
  6: $spacer * 5,

### (4)Body
例如最終設計稿拼拼， #494846 大標 P文字 → 當body-color

// Body
$body-bg: $white !default;
$body-color: #494846 !default;
$body-text-align: null !default;

### (5)連結link-color

// Links
$link-color: $primary !default;
$link-decoration: none !default;

註:bs因無障礙的設計，淺色的背景文字是黑色，深色背景則搭配白字。若想改自己的色系bs設定較麻煩，可另外設定class蓋過相同權重。
注意@import的先後順序
註:若不想改變數檔或是不需要bs幫你設定一套class，可用css寫就好，以色系去寫讓通用性更高，不過色系還是改bs較適合方便;
另外也可把通用的東西另寫一支scss

.darkGray{
color: #373a3c;
}

## _button.scss(19:36)
$theme-colors用迴圈依序產生class名稱

// scss-docs-start btn-variant-loops
@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

## min/_button.scss
hover用同色系去做深淺gradient-bg

&:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

## 調整 CSS 編譯位置
<!--這段需要再回來看-->
live scss預設位置在scss資料夾

## 網頁切版等級表
上完課在LV3-LV4之間，找網頁版型有4-10頁，練習5-6個版才能學會，有知識點後要練速度。
募資網站拼拼LV3要在20h完成才有到就業水準，新手能在5天完成已經很厲害。
募資網站拼拼 CCO授權。