少女的腦內多巴胺
0%

21 天 Bootstrap 5 新手實戰營 - Week 1

發表於 更新於 分類於 Disqus：
從 0 開始的 Bootstrap 5 課程，感謝洧杰校長，希望自己能持續更新。

Bootstrap 是什麼？

由 HTML、CSS 和 JavaScript 寫好的前端框架，需要時只要載入已經寫好的程式碼來使用即可。

如何使用 Bootstrap？

官方提供兩種載入方式：

  1. 嵌入CDN

利用網路連上與現在位置最近的伺服器。

  • 優：載入速度快、省流量。
  • 缺：人品差的話 CDN 掛掉自己的網站也會跟著掛。
  1. 下載在本地端使用

顧名思義將其他人提供的程式碼下載下來在自己的電腦使用。

  • 優：可修改程式碼做客製化來使用。
  • 缺：如果程式碼很大一包的話載入會載很久。

上圖為使用 CDN 方式，chrome可視為自己的伺服器，如果要連上六角學院的官網，需要先輸入網址進入，進入後會把首頁的 html 抓下來在自己的瀏覽器解析才可以看到網頁，如果解析到一半，瀏覽器發現 html 有外部伺服器的網址，便會連到最近的伺服器取得需要的東西。

如果把 bootstrap 下載在本地端使用的話，如上圖，就會變成自己的伺服器來回取得所需的東西，也會造成自己伺服器的流量過大。

所以到底要如何使用 Bootstrap？

依照內容將CSS貼上至 <head> </head>間，以及將JS貼在<body>的結尾處。

  • 下載在本地端：進入官網的 Download

點選Download即可下載下來。

解壓縮後可以看到裡面有 CSS 跟 JS 的檔案夾，從CDN的網址可以看到，我們需要的檔案只有CSS裡的bootstrap.min.css 以及 JS裡的bootstrap.bundle.min.js，把兩支檔案複製到自己的檔案下，再嵌入即可。

如何確認是否有成功使用 Bootstrap？

以下以使用CDN為例：

  1. 打開檢查至 Network 查看是否有bootstrap.min.css及bootstrap.bundle.min.js的檔案。
  1. 如果有錯誤的話 e.g.網址打錯，Console 會報錯，顯示找不到此檔案。右上角也會顯示錯誤的程式碼在哪個檔案以及哪一行。

CSS 重置與 Bootstrap 重置

Q：為什麼需要 CSS 重置？
A：CSS 本身就有預設值，而這些預設值時常在排版的時候帶來很大的不便，尤其各家的瀏覽器又有各自的預設值，使開發者需要花一些時間成本去針對各瀏覽器的 CSS 去做調整。

CSS 重置總共有兩種，分別為：

兩者的差異是 CSS Normalize 保留原本預設 HTML 標籤的樣式，僅針對不同瀏覽器與各版本間不相容的標籤進行些微調整，而 CSS Reset 則是把所有瀏覽器最不一致的地方強制歸 0，相對比較沒有彈性。

但兩者都有人使用，可以針對需求擇一使用即可。

Bootstrap 重置也是如此，舉例來說 Bootstrap 會把預設的字型替換成自己的字型結構。

CSS 按鈕小技巧

情境1：老闆今天的需求是一顆黑底 btn，交出去後他又突然要加一顆黃色的，黃色做完又要一顆灰色的，於是我將 CSS 複製貼上改了背景顏色生出了三顆 btn。

如果老闆之後又要繼續加不同顏色的 btn，那是不是要繼續複製一堆很籠的程式碼？

這時候就可以使用 CSS 累加的方式，寫一行只有背景顏色的程式碼，並加在原本的 CSS 後方。

依照 CSS 權重，雖然兩者權重一樣，但 CSS 樣式後面會覆蓋掉前面的樣式，如下圖，一開始黑色 btn 的背景顏色就會被槓掉，換成第二個 CSS 的黃色，其餘一模一樣。

CSS 權重

基本的權重為 inline style > ID > Class > Element > *

  • *：很常使用的全站預設值，權重為 0-0-0-0。
1
2
3
4
*{
    padding: 0
    margin: 0
 }
  • element：所有權重皆為 0-0-0-1。
1
div, p, h1, ul, ol, li, em, header, footer .....
  • class：分成在 CSS 裡的及 html 裡的，但權重皆為 0-0-1-0。
1
2
3
4
5
class="box";

.box{
   color : #000000;
 }
  • id：分成在 CSS 裡的及 html 裡的，但權重皆為 0-1-0-0。
1
2
3
4
5
id="box";

#box{
   color : #000000;
 }
  • inline style：寫在 html 行內的 style，權重為 1-0-0-0。
1
2
3
<div style="color:#000000">
    CSS 
</div>

但還有一個老大叫做 !important，!important 的權重非常高，可以蓋過所有的權重。

1
2
3
.box{
   color : #000000; !important
 }

舉個例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/** html */
<h1 class="title1 title2">標題</h1>

/** CSS */
.title1{
 color: red;
}
.title2{
 color: black;
}
h1{
 color: pink;
}
// 顏色為黑色，因為 h1 權重為 1，class 權重為 10，而 title2 把 title1 覆蓋了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/** html */
<div class="container">
    <h1 class="title1 title2">標題</h1>
</div>

/** CSS */
.title1{
 color: red;
}
.title2{
 color: black;
}
h1{
 color: pink;
}
.container h1{
 color: yellow;
}
// 顏色為黃色，因為class 權重為 10，而 container + h1 為 11。
1
2
3
4
5
6
7
8
9
10
11
/** html */
<h1 class="title2 title1">標題</h1>

/** CSS */
.title1{
 color: red;
}
.title2{
 color: black;
}
// 顏色為黑色，兩者都是 class，只會看 CSS 的順序，不會看 html 的前後。

參考

Bootstrap 5 官方文件
Reset CSS與Normalize CSS介紹