建立 Blog 版型行前準備

  • 準備資料 : BootstapFontawoesome CDNFont Awoesome icon 、VSCode
  • 『 Bootstrap Starter template 程式碼 』 + 『 Fontawoesome CDN 』 貼入 VSCode
    • 此區域內的程式碼包含了 Bootstrap 會使用到的 CSS 與 JavaScript
    • Fontawoesome CDN 貼入 <head>
    • 字型 : Windows 中文預設新細明體,建議載入微軟正黑體。因層級關係,字體的 CSS link 一定要放置 Bootstrap CSS 下方才會生效
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Fontawosome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css">

    <!-- 客製 CSS 微軟正黑體字型於此內 -->
    <link rel="stylesheet" href="/css/all.css">
</head>
  • 測試 Bootstap 與 Font Awosome 是否正確載入成功
    • Bootstap : Bootstrap / components 中複製任一元件貼入 VSCode 看是否有顯示
    • Font Awosome 複製任一 icon 的 HTML 看使否有顯示

Blog 版型細部調整

| breadcrumb 與下方標題無對齊 |

  • 因 breadcrumb 預設有 padding ,所以造成與下方沒有對齊的問題。使用 Utilities / spacing 中的 pl-0 把左方 padding 設 0 ,可解決。
    Bootstrap-breadcrumb 與下方標題無對齊示

| 內文內分兩個欄位 |

  • 使用 Grid System → .row .col 排列
    • 單純使用 .col-8 .col-4 是不會有響應式的,須加入斷點,例如 : .col-sm-8 ( 語意 : sm 尺寸以上顯示 8 : 4 ,以下則變單欄式 )

| Code |

路徑 : Content / Code

  • Flex 以及強化的網格系統 : 網格系統不再使用 float ,進而改用 ‘flexbox’ ,讓行動裝置及桌面裝置有更彈性的排版方式。

| 圖片置入太大跑版 |

  • 把圖片網址貼入 <img>,記得加入 .img-fluid ,圖片寬度就會被限制住。
    Bootstrap-加與不加.img-fluid差異

| 標題下方資訊 _ 名稱 , 時間 , tag |

  • .my-3
    • small
      • span
  • div .my-3 製作上下空間,<small> 包覆著這些資訊。

Bootstrap-實做blog標題下方資訊

| Tags 下方標籤列 |

  • 使用 components / Bages ,因為標籤具有連結功能,所以選擇下方的 Links

Bootstrap-實做blog下方標籤列

| 同 .col- 內文與元件區分 |

出處 CH8-79

  • 分左右兩欄時 ( .col-8 .col-4 ),左方的內文與留言區塊寫在一起,看起來沒有明顯區分,可用 <articl> 這個 HTML5 標籤把上方內文包起來與留言區塊做分隔。藉此告訴大家 <articl> 內是主要的文章內容,下方是另外一個元件 ( componemts )

Bootstrap-同col內文與元件區分是意圖

| 留言區塊 | 範例

Bootstrap-實做blog留言區塊

  • 外層使用 Cards ,內層使用 Media Object 。上方表單區域使用 Media Object 包覆 form 表單。
  • 按鈕滿版寬 部分可使用 Components / Buttons.btn-block
  • 大頭照生產器 https://randomuser.me/photos

| 將 Fontawoesome icon 加到網頁上 |

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css">
</head>

<body>
    <!--複製 icon HTML 貼至此-->
    <i class="fas fa-heart"></i> 
</body>

資料來源

最後修改日期: 30 4 月, 2020

作者