第 27 集：Bootstrap 客製化 reboot 重置

13th鐵人賽 bootstrap bootstrap5 scss css reset

Kent

2021-10-12 23:37:28

2418 瀏覽

此篇會介紹 Bootstrap 使用的 css reset 檔案 _reboot.scss。

事前準備

css reset 基礎概念

還不懂 css reset 的朋友，建議先閱讀事前準備的文章，再繼續閱讀會更好消化呦。

Normalize

Normalize 是一個開源的 project
Bootstrap reboot 樣式，是建立於 Normalize.css 基礎之上。

優點

保留一些預設的 HTML 標籤的樣式。（ex：body padding、h1~h6）
詳細的文件以及清楚明瞭的註解。

缺點

樣式清的不夠乾淨。

原始碼

使用到一隻檔案：

_reboot.scss：主要清除 css 樣式。

介紹幾個有趣的樣式設置。

box-sizing

計算元素尺寸時不受 padding、border 影響。

*,
*::before,
*::after {
  box-sizing: border-box;
}

scroll-behavior

使用錨點達到網頁滾動到某個指定地方，smooth 讓網頁能平滑滾動到指定地方。（預設 auto，立即滾動）

@if $enable-smooth-scroll {
  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

Body

常用於網頁全站（全域）樣式設置。

<body> 標籤包住所有網頁元素，通常會在 body 樣式中設置預設樣式。

編譯後的 css

body {
  margin: 0;
  font-family: var(--bs-font-family-noto-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #494846;
  background-color: white;
}

依照上方範例介紹

假設我們在撰寫樣式時，沒有設置 font-size，則預設大小就會是 1rem。

// 保留預設樣式 font-size 為 1rem。
.title {
  color: #000;
}

則依照權重高低來決定覆蓋順序。（css 權重概念歡迎參考此篇介紹）

// 覆蓋 font-size 樣式為 0.85rem。
.title {
  font-size: 0.85rem;
  color: #000;
}

Typography

舉例 h1~h6 標籤

預設變數

$headings-margin-bottom:      $spacer / 2 !default;
$headings-font-family:        null !default;
$headings-font-style:         null !default;
$headings-font-weight:        500 !default;
$headings-line-height:        1.2 !default;
$headings-color:              null !default;

預設樣式 %heading

%heading {
  margin-top: 0; // 1
  margin-bottom: $headings-margin-bottom;
  font-family: $headings-font-family;
  font-style: $headings-font-style;
  font-weight: $headings-font-weight;
  line-height: $headings-line-height;
  color: $headings-color;
}

// h1~h6 都是使用 %heading 樣式，指差別在於 font-size 值不同
h1 {
  @extend %heading;
  @include font-size($h1-font-size);
}

編譯後的 css

// 由下樣式可以得知 %heading 樣式設置結果
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

// 透過 @include font-size() 函式，來設置彼此的 font-size 樣式

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

上述介紹了幾個 _reboot.scss 的樣式，大家想了解更多歡迎從原始碼下手，複製樣式出來編譯，並查看編譯後的 css 樣式為何，透過這種方式可以加速暸解 _reboot.scss 的結果以及作用。