---
tags: Bootstrap5網頁切版整合術
---
# 14. 切版紀錄 P1ece / Fulloflove
## 簡介
"P1ECE" 以 Bootstrap 為基礎，結合自定義 Sass 完成此作品，內容為個人切版練習。來源為Mudpuppy經典文學貓咪Bookish cats系列。
* 自定義 Sass例如:
_variables: 自定義色系、$pagination-focus、$pagination-hover等。
原設計稿為"Bootstrap5 網頁切版整合術" 課程所提供的版型-"撿到寶"，切版完我再更換主題內容圖片等。
## 設計稿 / 作品
[撿到寶Fulloflove 設計稿](https://xd.adobe.com/view/71017bca-61c4-4ddd-81eb-b44e9f1e2f04-2452/)
[我的作品-P1ece](https://carefree0906.github.io/p1ece/index.html)、[網頁畫面影片](https://youtu.be/OFHJPiJcaP4)
<!-- [同學hlep1](https://yichienhsieh.github.io/BootstrapFinalTest/index.html)
[同學hlep2](https://windj7y.github.io/bootstrap5-stray/)、[github](https://github.com/windj7y/bootstrap5-stray)
[同學hlep3](https://tinayen-425.github.io/Bs5-AdoptLandingPage/index.html)
[同學作品-泰蝦惹](https://mingy1024.github.io/Bootstrap-final/index.html) -->
## 品牌
"P1ece"堅持品質與設計，以療癒系動物繪畫風格，將豐富的色彩融入拼圖、玩具、積木等商品， 透過色彩讓生活增添藝術美感，在緊湊的生活步調，拼湊療癒你的生活。
商品通過STEMA認證，榮獲大獎「年度最佳玩具」，「STEMA玩教具認證」累積高達200個獎項等。使用「環保再生紙製造，以無毒油墨印刷」標準符合 CPSIA 、ASTM 國家標準、CE 歐盟標準， 無年齡層限制，大人小孩親子皆適合。
<!-- 拼圖不只是拼圖。除了訓練專注力，還可以訓練觀察力，從小地方建立對於一整個形狀的完整性概念。 -->
## 參考:
* 美國Mudpuppy經典文學貓咪Bookish cats
插畫家Angie Rozelaar
* 貓咪致敬文學經典
大亨小傳The Great Gatsby
愛麗絲夢遊仙境
傲慢與偏見Puride & Prejudice
羅密歐與茱麗葉
福爾摩斯The catventures of sherlick
安娜·卡列尼娜
charlie the catnip factory
枓學怪人Furankenstein
綠野仙蹤
唐吉訶德
巧克力冒險工廠
小王子Little Prince
* [親子共讀：美感教育書單上篇｜Bookish Cats｜建築大師玩形狀，安迪沃荷的顏色世界](https://ioveyi.tw/bookish/)
* [拼圖大集合｜美國Mudpuppy Arty Cats100片拼圖收納罐｜還有Glison藝術家設計拼圖](https://ioveyi.tw/bookish-cats/)
* [雷諾瓦拼圖文化坊](https://newweb.renoirpuzzle.com.tw/)
* [STEM學習網站 - 玩具腦，玩出你的聰明腦](https://shop.toybrains.com/)
* [親子天下]( https://topic.parenting.com.tw/issue/2017/steamtoys100/playsteam.html)
## 色系
### Fulloflove
#F9C745 黃
#3A3A3A 深灰
#ECECEC
### P1ece
$primary: #326e92; 藍色
$secondary: #3A3A3A; 深灰
## 字體大小
fz16
fz20 領養專區 按鈕
fz24 英文Service、加入奴才團隊
fz32 大標 您出錢 我出力 一起助浪浪
```
40px $h1-font-size: $font-size-base * 2.5;
32px $h2-font-size: $font-size-base * 2;**
28px $h3-font-size: $font-size-base * 1.75;
24px $h4-font-size: $font-size-base * 1.5;
20px $font-size-lg: $font-size-base * 1.25;
20px $h5-font-size: $font-size-base * 1.25;
16px $h6-font-size: $font-size-base;
16px $font-size-base: 1rem;
14px $font-size-sm: $font-size-base * .875;
```
## 字體
Kalam, Bold
Kalam, Regular
Noto Sans, Regular
Noto Sans, Bold
P1ece的分類小圖是使用 [辰宇落雁體](
https://www.shoppingdesign.com.tw/post/view/8117?)、[字體下載](https://github.com/Chenyu-otf/chenyuluoyan_thin)
```css
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet">
```
```css
//CSS rules to specify families
font-family: 'Kalam', cursive;
font-family: 'Noto Sans TC', sans-serif;
```
## 開版尺寸
桌機版 1440px，.container 1320px 左右距離各60px
行動版 375px， 左右距離各12px
## 切版紀錄
<!-- 20220904~ -->
### 1. 前置作業...
* 卡卡:
前置作業卡好久scss一直吃不到顏色跟通用設定...
* npm nodejs: 原本想將bootstrap整個匯入，後面再接自行編譯的scss，但最後將scss拆分為工具後，卻一直出現編譯錯誤
* 直接下載: 也是出現錯誤
* 解決: 後來用課程上的做法，自定義>優化，一一匯入scss，
顏色編譯的問題就解決了 (what~!)
* 色系 (待處理)
修改色系後沒有全部都套用
btn nav的都沒改色
### 2. Header
* banner文字邊框用偽元素::before ，行動版隱藏文字
* 將選單推到右邊的工具是.ms-auto →低級錯誤
* 記得加上 script 選單才能運作
```javascript
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
```
* 排版>斷點
```css
//up-sm就是≥576的時候會換圖片
@include media-breakpoint-up(sm) {
height: 100vh;
background-image: url(./img/home.png);
}
```
<!-- * 一天不讀書 什麼都還給老師 哈哈哈 -->
### 3. 近期作品
1. 將整張圖片用a標籤包住
2. position-relative bg-block:
做定位用+hover用(打開漸層背景+文字)
3. bg-liner position-absolute start-0 top-0 end-0 bottom-0:
用定位方式讓背景漸層在圖片上層並填滿整個img
```
.bg-liner{
background-image: linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.8));
}
```
<small>(漸層背景也可以在hover才出現)</small>
4. kalam text-white position-absolute bottom-0 start-0 p-2:
整個文字也是用 定位的方式推到靠下
5. bg-none: 再將文字+背景整個隱藏
6. bg-block: 滑入時打開
7. d-none d-md-inline-block:
"客製毛孩似顏繪"這按鈕 行動版隱藏，桌機板呈現
<small>(原本以為這區塊很easy，結果卡在滑入背景超出圖片範圍，後來重新整理結構，把文字+背景都寫在html，滑入時同時出現就可以了)</small>
<small>(背景也可以滑入時再出現，所以是結構出錯，重整後就沒問題了)</small>
### 4. 領養專區
1. stretched-link帶有延伸連結的卡片:
在a連結加上.stretched-link讓整個卡片都可滑入選取
2. position-absolute start-0 top-0 end-0 bottom-0 bg-none:
圖片和近期作品的圖片邏輯一樣，可重複利用.bg-none.bg-block，在html結構加入兩張圖片，第二張圖片先隱藏，滑入時顯示，需定位在上方
<small>(低級錯誤再+1 stretched-link的s是小寫啦~~~~~debug找超久哈哈)</small>
### 5. Footer
1. 使用巢狀row>col>row>col來排版
2. p要在清除mb-0，文字才能垂直置中
### 6. 客製我的毛孩圖 fixed-bottom
一樣使用定位方式 hover時再換圖
* 卡卡: 原設計稿右下角固定的fixed"客製我的毛孩圖" 提示框的三角形下方箭頭一直出不來....
* 解決: 會繪圖軟體的好處就是....直接用畫的 哈哈
### 7. 分頁
到變數檔修改 pagination 相關設定
### 8. 表單驗證:(待處理)
參考[表單驗證技巧](https://hackmd.io/2Nnu9QPdTGih430zhl7y8w?view)
20220912 表單BS驗證效果出不來....
### 9. design.html
* 卡卡: 左側選單滑入時每個li多一條橫槓
* 解決: 新增一個自訂的class 滑入時在內容增加一條橫槓
```css
.link-custom:hover{
&::before{
content: '-';
}
}
```
### 10. 圖片切換(待處理)
transition效果出不來
Sign in with Wallet
Connect another wallet