---
# System prepended metadata

title: 8. 使用 Bootstrap 完成 Blog 版型
tags: [Bootstrap5網頁切版整合術]

---

---
tags: Bootstrap5網頁切版整合術
---
# 8. 使用 Bootstrap 完成 Blog 版型

[我的練習檔](https://codepen.io/tinchen/full/poLYbZV)

## 結構
![](https://i.imgur.com/CuVeMw7.jpg)

* 導覽列: 行動版選單可左右滾動
* 首頁背景: 桌機文字占畫面一半，行動版滿版呈現
* 卡片: 行動版圖片隱藏

### point
* 複製root變數，手動調整字體
* 選單左右滾動加上`overflow-auto.flex-nowrap.text-nowrap`
* 水平卡片排版技巧




## 環境
[參考官網範例](https://getbootstrap.com/docs/5.2/examples/blog/)

1. 建立基本環境，引入bs css link
2. 複製root變數，手動調整字體: 
建立一個html檔輸入任意中文，用開發者工具查看:root的地方，把文字變數`--bs-font-sans-serif`複製，在`<style>`輸入:root貼進來    

3. 搜尋微軟正黑體的中英文'Microsoft JhengHei',微軟正黑體,
加在系統字體後方
![](https://i.imgur.com/okH4zLD.png)

    ```css
    <style>
        :root{
            --bs-font-sans-serif: system-ui,-apple-system,'Microsoft JhengHei',微軟正黑體,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
        }
    </style>
    ```



## 導覽列
![](https://i.imgur.com/CvvNhmK.png)

![](https://i.imgur.com/8PAIjuc.png)

* 導覽列: 行動版選單可左右滾動
1. 整個內容置中用 .container 包起來，新增 `<header>`
`.link-dark` a 連結用 link-xx
`.text-decoration-none` 不需文字底線

2. 元件>導覽與頁籤 (nav and tabs)

3. nav行動版: 
在`nav`外層`div`加上`.overflow-auto`，
預設會換行所以要再加上`.flex-nowrap`不換行，
文字也要加上`.text-nowrap` 




## 首圖背景
![](https://i.imgur.com/velpM17.png)

![](https://i.imgur.com/PTQPVYC.png)
    
* 首頁背景: 桌機文字占畫面一半，行動版滿版呈現
1. 內容>文字排版>顯示標題
`h1.display-4.fst-italic` 
`p.lead`

2. 文字桌機版占畫面一半，這裡主要是套用寬度，所以可以用`.col-md-6`外層不包`.row` ，行動版不需額外調整可滿版呈現

3. 背景圖: 背景圖若只有使用一次，可以直接寫在行內的`<style>`。
部份情況會從後端套用圖片，寫了css後就不好套用

4. `.link-xx` 會使用較深色的色彩，但白色已無較深的，所以`<a>`改套用`.text-white`

5. `<p>`段落預設有下向的margin，將`<a>`清除`.mb-0`

6. 新增一個.bg-cover套用到背景圖，將圖填滿、定位在中間
   
    ```css
    .bg-cover{
     background-position: center center;
     background-size: cover; 
    }

    ```
   


## 水平卡片排版技巧 (整個版型最複雜的地方)
![](https://i.imgur.com/Hasm0tS.png)
  
![](https://i.imgur.com/XJodffk.png)


1. 結構.row>.col*2>.card>.col+.col-4

    ![](https://i.imgur.com/V4LoCak.jpg)



2. `.card`預設是`.flex-direction: column`，因版型文字在左圖片在右，所以要再加上`.row.flex-row.g-0`把軸向改回來

    * gutter是0的時候`.row .g-0`可以跟`.card`放同一層
![](https://i.imgur.com/UxubWMr.png)

3. 行列式排版: 在`.row`加上` .row-cols-1 .row-cols-lg-2` 行動版單欄桌機版雙欄

4. 行動版圖片設定隱藏`.d-none .d-md-block` 

5. `.card`內文不同時產生不等高，所以要加上`.h-100`讓兩個卡片等高，每張卡片都要加
![](https://i.imgur.com/jAU8FAI.png)

6. 將左邊內文區塊，轉成flex形式，並且把"繼續閱讀"推到下方，就不受內文多寡影響，都可以對齊最下方

    * 將`.p-4`這一層轉為`.d-flex.flex-column.h-100`，在`<p>`設定`.mb-auto`把"繼續閱讀'推到底部

    * `<a>`設定`.stretched link`
 ![](https://i.imgur.com/VqmW0wk.png)
 
  


## 內文及側欄安排
![](https://i.imgur.com/acf8Big.png)


* 左側.row>(.col-md-8>artcle)+.col-md-4

* 右側用 `.d-none .d-lg-block` 隱藏
新增一個div把內容都放進來，用`.sticky-top`、 `style="top:10px"`固定

## Footer 製作
footer要新增在.container下方
![](https://i.imgur.com/UamO2Sm.png)

<!--20220822 ok-->

## QA
<!--20220821-->
![](https://i.imgur.com/VvikgVf.png)

![](https://i.imgur.com/7E2R61p.png)

挖屋~原來如此，數字只算一個單字，後來用中文測試，高度會隨內容自適應延伸，右側圖片也因為.align-items-stretch會拉伸到到與內容同樣高度
