--- tags: Bootstrap5網頁切版整合術 --- # 13. landing page設計稿練習 ## 1. 設計稿、字體、色系 設計稿連結：https://hexschool.github.io/bootstrap5-homework/index.html 拿到設計稿時先查看字體、色系、間距等，是否為bs預設或需另外設定， 同一個區塊桌機版、手機版，要同時兼顧 ### ● 字體： 可選擇下載字型或網路字型(網頁用時需選擇此) (1) 載入字型: google fonts，到[官網](https://fonts.google.com/)選擇需要的字體， 設計稿為字體NotoSans、字重(粗細)Regular 400、Bold 700 (2) 先點選Regular 400→select this style， 再點選Bold 700→select this style，按右上按鈕view your selected families (3) 複製<link> 到自己的專案<head>裡 ，再將css加到body body{ font-family: 'Noto Sans TC', sans-serif; } (4) 預設粗細為regular，使用粗體要加上.fw-bold ![](https://i.imgur.com/3OvMfJ9.png) ### ● 色系、間距: 設計稿使用bs預設顏色info #0DCAF0 secondary #6C757D 間距使用bs預設 ## 2. navbar導覽列: ![](https://i.imgur.com/5idHQTu.png) ### ● navbar: 到bs文件複製navbar程式碼，修改為同設計稿的需求，刪除dropdown、disabled、from 背景為bg-white 設計稿有限制最大範圍，將container-fluid修改為container ### ● 標題: 左側的圓點到bs icon搜尋圓點複製程式碼 ` <i class="bi bi-circle-fill"></i>` 標題文字顏色為text-info ### ● 選單: (1) 靠右對齊me-auto修改為ms-auto (2) 選單間距調大: nav-item加上mx-3 (3) 選單文字active修改為text-info 或vscode ctrl+p開啟變數檔_variable，搜尋navbar，修改navbar-light-active-color顏色為info，設計稿為白色背景修改lightcolor即可，編譯後會調整 (4) 方案費用按鈕: nav-link修改為btn btn-info ![](https://i.imgur.com/SdjsP1k.jpg) ## 3. herder圖片 ![](https://i.imgur.com/WYgbbe9.png) ### ● header: 避免定義css在`<header>`上，一個檔案可以使用多個header標籤 設計稿 header文字在桌機版是垂直置中、手機版是靠上方， 在align-items-lg-center加入斷點，手機版就只會吃到py-5的設定 `<header class="header px-4 py-5 d-flex align-items-lg-center justify-content-center"> ` ### ● 背景圖: ##### (1) 背景css可以寫在style.css ```` .header{ height: 627px; background-image: url(img/home_bg.jpg); background-size: cover; background-position: bottom center; background-repeat: no-repeat; } ```` ##### (2) 或寫在scss，bg-img寫在html行內 `<header class="header" sytle="background-image: url(../images/home_bg.jpg);"></header> ` 新增資料夾componets→_header.scss →在到all.scss `@import"./componets/header";` ![](https://i.imgur.com/4hP4UNn.png) ## 4. 多欄式卡片 ![](https://i.imgur.com/YyIz4X7.png) 這區塊使用section標籤製作，設計稿桌機版圖左文右，手機版文上圖下，剛好倒過來，在撰寫時先以手機版方式來寫，桌機版再加上.flex-row-reverse即可 ### ● 行高: bs行高為24，搜尋bs文件line-hight，在p段落加上.lh-lg，可增加行高 ### ● 移動區塊: 框選要移動的範圍，alt+上下鍵 ![](https://i.imgur.com/lT89lG5.png) **提醒:** 圖片要加上.w-100、插入圖片"./img/info.jpg" ## 5. 特殊卡片排版 (這裡的scss先略過) ![](https://i.imgur.com/d7yNVNw.png) 使用section標籤製作 ### ● 底圖: 為四方連續，檔案只需要提供一小塊，重複底圖 ### ● 卡片: 使用行列式來排版，row>col>card，整個範圍限制在.container ![](https://i.imgur.com/1fpt6fn.png) ### ● icon尺寸: 設計稿使用的是font-awesome，這裡用bs icon沒有到48這尺寸，所以需要在設定尺寸 ### ● 自訂icon尺寸:(這裡因為課程跳著看，先用css寫，scss寫法先略過) (1) 將_utilities.scss複製到自己的專案資料夾helpers裡，修改路徑all.scss `@import"../helpers/utilities";` ![](https://i.imgur.com/A2VSnwn.png) (2) 開啟_utilities.scss，複製font-size這區塊的設定，自定義名稱大小，values可設定一組以上，48是class名稱，值為48px (3) 編譯完後，套用class名稱.fs-s-48到icon ``` "font-size-static": ( rfs:true, property: font-size, class: fs-s, values: ( 48: 48px) ), ``` ![](https://i.imgur.com/xAQrw9I.png) ## 6. 表單響應式卡片排版 ![](https://i.imgur.com/SzL3I3F.png) 使用section標籤製作 list-group 8:30 最右邊卡片 每一個卡片加上.h-100 讓高度一致 card是flex排版，在card-body這層可以看到 flex-grow:1 伸展值 把剩餘空間分配 flex-shrink:1 縮縮值 flex-basis:auto 基準值 flex-grow-0