---
tags: Bootstrap5網頁切版整合術
---
# 11. 個人簡歷 - 練習使用 Sass 變數開發網頁
[我的練習檔](https://carefree0906.github.io/bs5-resume-v2/)

## 結構
* 首頁背景圖: 固定在原位，下層壓兩個色塊
* 自我介紹區塊: 圖片縮放時會將多的地方裁切，行動版圖上文下
* 三欄式卡片:
* 桌機版-背景底色有留四周圍margin，卡片文字靠齊下方刷上漸層。
* 行動版-單欄、背景底色滿版。

### point
* 首頁圖背景圖: 往下滾動時固定在原位用`background-attachment: fixed;`
* 首頁上的文字用`.translate-middle`讓文字置中，打開變數的負值設定後用`.mx-n3`這個class，讓橫線超出左右更多
* 自我介紹區塊: 圖片用`object-fit:cover`
* 三欄式卡片:
* 將文字區塊靠齊下方，到變數檔新增`$position-values: auto: auto,`
* 漸層background-image:linear-gradient(方向角度,色彩,色彩)
* 增加按鈕點擊範圍`.stretched-link`
* 表單驗證、驗證顏色修改變數
* 工具拆分把`.bg-attachment-fixed`、`.object-fit-cover`加到通用類別

## 環境
匯入 Sass 作法看[Bootstrap 與神奇的 Sass 的筆記](https://hackmd.io/LFpQYffaTY6HxFVmky3Plw?view)
* 複製_utilities、_variables到專案，修改primary、secondary顏色

// scss-docs-start theme-color-variables
  "primary":    #aa00b6,//$primary, custom
  "secondary":  #71ddff,//$secondary, custom
  .....

## Header 首圖製作


### 底圖:

1. 外層header.min-vh-100.position-relative:
設定內容少的時候，高度至少有100vh裝置高，內容多時可以超過裝置高，再設定position-relative，給方塊定位用

2. 內層新增背景色塊.deco-box.position-absolute:
一個靠左上.top-0.start-0 一個靠右下.bottom-0.end-0"，顏色使用變數代入

    .deco-box{
         width: 240px;
         height: 240px;
         background-color: var(--bs-secondary);
     }

3. 內層背景圖.position-absolute.bg-cover.bg-attachment:
* .position-absolute定位和圖片連結都寫在行內style
[圖片1](https://images.unsplash.com/photo-1612282131240-6e878907d0f6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1642&q=80)、[圖片2](https://images.unsplash.com/photo-1612282130134-49784d98ac61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1818&q=800)

* 新增.bg-cover設定css，套用到圖片上

    .bg-cover{
         background-size: cover;
         background-position: center center;
         background-repeat: no-repeat;
    }

* 新增.bg-attachment-fixed設定css，套用到圖片上:
背景圖固定，滾動時不改變位置

    .bg-attachment-fixed{
        background-attachment: fixed;
     }

### 圖片上方文字區塊

1. 文字區塊.position-absolute.top-50 .start-50.translate-middle:
* `.position-absolute.top-50 .start-50`:
將文字區塊定位在中間

* `.translate-middle`:
因圖片上方文字區塊，使用position定位，定位是從文字左上角開始計算，所以看起來沒有靠中，可加上`.translate-middle `讓文字置中

2. 圖片上方hr .mx-n3
* 大標下方加入`<hr class="mb-1 mx-n3">`
mb-1讓距離在靠近些，mx-n3負值讓橫線可以往左右多出一些

* 使用負值需將開啟_variables檔，預設為false改成true
`$enable-negative-margins: true ; //false !default; custom`

## 自我介紹區塊

1. 新增格線.conatiner>.row>.col-md-5+.col-md-4
2. 右側圖片
* 新增`<img>`標籤，`.w-100 .object-fit" style="height:500px;` 只有使用一次，所以尺寸可以直接寫在行內

* 新增`.object-fit-cover`的css，套用到圖片上: 縮放時會將多的地方裁切。img要用object-fit而不是bg-cover

    .object-fit-cover{
       object-fit: cover;
    }

3. 讓整個區塊水平置中改成`.row .justify-content-center`

4. 文字垂直置中改成`.col-md-5 .d-flex .align-items-center`，文字要再用一個div包起來，才不會受到預設flex左到右排版的影響


5. bs5以行動版優先:
* 把`.col-md-4`跟`.col-md-5`對調，先排圖再排字。
* 在row後面加上`.flex-md-row-reverse`，反轉讓桌機版文排左 圖排右

## 三欄式卡片運用

桌機版: 三欄式排版，文字靠齊下方，底色刷上漸層
行動版: 單欄背景滿版
1. .bg-light.py-5.m-5>.container>.row.row-cols-1.row-cols-lg-3>col*3
* 底色: 在行動版滿版 桌機版留邊距`.m-md-5`
* 使用行列式排列 `.row-cols-1 .row-cols-lg-3`

2. 元件>卡片>圖片 overlay，語法貼到`col`裡

## 三欄式卡片樣式調整
1. 在card加上`.h-100`讓圖片等高，img也要加上`.h-100`
* `.h-100`，圖片可能出現變形再加上`.object-fit-cover` 將多餘的部分裁切掉，避免變形

2. 將文字區塊靠齊下方:
* `.card-img-overlay` 是使用絕對定位，上下左右都是0，改成`.top-auto`就可把文字靠下對齊

* 預設沒有`.top-auto`到變數檔`_variables`新增，找到`$position-values:` 新增`auto: auto`


3. 底色刷上漸層，讓文字明顯一點:
新增`.bg-dark-gradient`的css設定，這裡是使用黑色半透明，background-image:linear-gradient(方向角度,色彩,色彩)

4. 增加按鈕點擊範圍: [連結延伸 (Stretched link)](https://bootstrap5.hexschool.com/docs/5.1/helpers/stretched-link/)
* 在a連結加上`.w-100.stretched-link`，滿寬並且滑到上方文字時，按鈕會變成被選取的狀態

* 這裡因外層使用`.card-img-overlay` 使用絕對定位，會影響到`.stretched-link`的運作，並不是滑到卡片上方就會運作，必需在overlay的空間裡才能運作

## Footer 製作及表單驗證樣式調整


左右有再內縮進來，文字與表單都是col-md-5留padding
`footer.bg-primary.p-5.text-white>.container`

### 左方文字
1. `.list-unstyled`要加在`<ul>`上，加在`<li>`的話每個前面會變成縮排一格
2. 小圖示要先加上bs5 icon的cdn
### 右方表單:
1. 結構: 表單使用`<form>`標籤 ，可以直接把`.col-5`改用`<form class="col-md-5"></form>`

2. 驗證:
* 要在form加上`class='needs-validation"` 並加上屬性`novalidate`
* 新增按鈕`type="submit"`
* 最後加上javascript語法才能運作，表單>驗證>自定義樣式有一段js，在body結尾加上`<script>`標籤，貼上內容

3. 驗證顏色:
* 修改紅跟綠的，到變數檔`theme-color`上方的`success`改變全部`$success: #00ff89;//$green !default;custom`

* 或是單獨修改feedback顏色
`$form-feedback-invalid-color: #ff9a00;//$danger !default;custom`


## 整理 Sass 專案檔案
把原本寫在html上方的`<style>` 拆分成如下，能共用的放在通用類別，或是另外新增scss檔

1. 將`.deco-box`拆分成元件:
新增資料夾components>`_deco_box.scss`，再匯入`all.scss`

    .deco-box {
      width: 240px;
      height: 240px;
      background-color: var(--bs-secondary);

      //替換成
      background-color: $secondary;
    }

2. 開啟`_utilities`檔，到檔案最下方，`$utilities`之前，先替上一個補上`","`
3. 把`.bg-attachment-fixed`、`.object-fit-cover`加到通用類別，修改如下

3. 將`.bg-cover、.bg-dark-gradient` 新增到components>`_otherutilities.scss`，再匯入`all.scss`
不好歸類的通用類別都可以放這

## QA

### Q1

### A1
這裡只要再加上.border就可以解決.border-5顯示不出來的問題