iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
自我挑戰組

30 天轉生到 bootstrap 5 的意識界系列 第 27

第 27 集:Bootstrap 客製化 reboot 重置

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

事前準備

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

Normalize

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

優點

  • 保留一些預設的 HTML 標籤的樣式。(ex:body paddingh1~h6
  • 詳細的文件以及清楚明瞭的註解。

缺點

  • 樣式清的不夠乾淨。

原始碼

使用到一隻檔案:

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

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

box-sizing

計算元素尺寸時不受 paddingborder 影響。

*,
*::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 的結果以及作用。


建議

  • 通常不會去更動 _reboot.scss 原始碼。
  • 會新增一支檔案去撰寫全站(全域)樣式,以及複寫 _reboot.scss 樣式。(我會命名為 _base.scss
  • 也可以自己撰寫一隻 css reset,若樣式足夠自己使用並替代 _reboot.scss,那就不需要引入 _reboot.scss


上一篇
第 26 集:Bootstrap 客製化 root 變數
下一篇
第 28 集:Bootstrap 客製化 component 元件樣式
系列文
30 天轉生到 bootstrap 5 的意識界30

尚未有邦友留言

立即登入留言