BootStrap5 第一章 : 載入

BS5 官方網站: https://getbootstrap.com/

BS5 六角中文版: https://bootstrap5.hexschool.com/

BS5 載入方法

有兩種方式 1. 使用CDN載入 2.本地載入 ，兩者的不同在於:

CDN載入

CDN是抓其他伺服器的資料文件，用網址的方式，使用在自己的專案上。
優點--省流量
缺點--若遠端方掛掉，自己也會掛掉

本地載入

將資料文件下載至本地資料夾使用(意就是下在到自己的資料夾，在用路徑載入)
優點--本地載入的話不會有跟著掛掉的問題；而且還能自己修改參數

缺點--流量大

關於 CSS reset & Normalize.css & BS Reboot

CSS Reset

CSS Reset 就像是一個全站設定，或是預設值。
因為在早期，各家瀏覽器的預設值五花八門，各自不同，造成很多問題。
優點: 讓開發者針對每個語意修改，若是手刻網站個人認為適合使用。
缺點: 甚麼都歸零的感覺，非常極端。

星號{}與body{}

星號選取器，也就是通用選取器，甚麼都選在內，和選擇body有所不同。
Css reset 就是以星號做選擇，這樣會導致甚麼問題呢?

星號的濫用

因為全部都選取的關係，一些完全沒有必要做 CSS reset 的網頁物件也被 reset 了。(像是表單、清單、粗體斜體...等本該預設的外觀都被重置了)
為了解決這個問題，Normalize.css 因此誕生。而 ＊號這個通用選取器的使用者就開始減少了。

Normalize.css

特點:

1. 保留有用的瀏覽器默認設置，而不是將其刪除。
2. 為廣泛的 HTML 元素提供一般化的樣式。
3. 修正瀏覽器的 Bug 與不一致。
4. 透過微妙的改善提高可用性。
5. 有詳細的文檔來解釋代碼。

BS reboot 就是帶有 Normalize.css，因此載入bs後不需在載入Normalize.css。

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}