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
特點:
- 保留有用的瀏覽器默認設置,而不是將其刪除。
- 為廣泛的 HTML 元素提供一般化的樣式。
- 修正瀏覽器的 Bug 與不一致。
- 透過微妙的改善提高可用性。
- 有詳細的文檔來解釋代碼。
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;
}