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

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

## 結構

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

### 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',微軟正黑體,
加在系統字體後方

    <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>

## 導覽列


* 導覽列: 行動版選單可左右滾動
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`

## 首圖背景


* 首頁背景: 桌機文字占畫面一半，行動版滿版呈現
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套用到背景圖，將圖填滿、定位在中間

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

## 水平卡片排版技巧 (整個版型最複雜的地方)


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


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

* gutter是0的時候`.row .g-0`可以跟`.card`放同一層

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

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

5. `.card`內文不同時產生不等高，所以要加上`.h-100`讓兩個卡片等高，每張卡片都要加

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

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

* `<a>`設定`.stretched link`

## 內文及側欄安排

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

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

## Footer 製作
footer要新增在.container下方

<!--20220822 ok-->

## QA
<!--20220821-->


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