###### tags: `css`, `front-end`
# 【自學筆記】BootStrap的替代品W3CSS

`Bootstrap`是目前非常熱門的框架，通常情況下可以省時、省事的建置網站
但同時也有很多缺點，例如==設計難改==、==效能不好==、==檔案很肥==

最近也有其他CSS框架崛起，例如`Tailwind`，但我跟他不熟，看起來==學習成本挺高==

**聽說有個叫w3.css的傢夥長得嘿，來研究看看**
---

先來看看官網怎麼介紹的

:::success
<font style="font-size:24px;font-weight:500">
A Quality Alternative to Bootstrap
</font>
<br>
<font style="font-size:20px">
W3.CSS is Smaller, Faster and Easier to Use.
</font>
<br>
---------------------------------------------------------
<br>
W3.CSS is a modern, responsive, mobile first CSS framework.<br>
W3.CSS provides equality for all browsers: Chrome. Firefox. Edge. IE. Safari. Opera.<br>
W3.CSS provides equality for all devices: Desktop. Laptop. Tablet. Mobile.<br>
W3.CSS is standard CSS only (No jQuery or JavaScript library).
:::

簡單翻譯就是：
1. 容量小、速度快、簡單好用
2. 現代化、響應式、移動優先
3. 支援全瀏覽器
4. 支援全裝置
5. 純css，不需要依賴javascript或是jquery

---

**`w3-container`是 w3.css 中最重要的`class`，其中包含了基本的布局設定，例如：**

* Common margins
* Common paddings
* Common vertical alignments
* Common horizontal alignments
* Common fonts
* Common colors

`w3-container`可以寫在html的容器元素中，例如`<div>`, `<header>`, `<footer>`, `<article>`, `<section>`, `<form>`, ... ...

:::danger
本來想把w3css有的功能都一一筆記，**但實在太多了**
但關於它的用法、它有的功能等等，**官網寫得有夠清楚**
再整理一次也挺浪費時間的，就移駕官網吧 :arrow_down:
https://www.w3schools.com/w3css/default.asp
:::

---

雖然這麼說，其中有一個人覺得超好用的東西叫做 `W3.CSS Color Generator`
只要選擇一個==主要顏色==，就會產生以它為基準的主題顏色包

例如我選擇了 #efc050

就會生成一包

<style>

.w3-theme {color:#fff !important;background-color:#3f51b5 !important}
.w3-theme-light {color:#000 !important;background-color:#e8eaf6 !important}
.w3-theme-dark {color:#fff !important;background-color:#1a237e !important}

.w3-theme-l5 {color:#000 !important;background-color:#e8eaf6 !important}
.w3-theme-l4 {color:#000 !important;background-color:#c5cae9 !important}
.w3-theme-l3 {color:#000 !important;background-color:#9fa8da !important}
.w3-theme-l2 {color:#fff !important;background-color:#7986cb !important}
.w3-theme-l1 {color:#fff !important;background-color:#5c6bc0 !important}
.w3-theme-d1 {color:#fff !important;background-color:#3949ab !important}
.w3-theme-d2 {color:#fff !important;background-color:#303f9f !important}
.w3-theme-d3 {color:#fff !important;background-color:#283593 !important}
.w3-theme-d4 {color:#fff !important;background-color:#1a237e !important}

.w3-theme-action {color:#fff !important;background-color:#311b92 !important}
.w3-text-theme {color:#1a237e !important}

</style>

這樣的東西，在切版的時候只要善用這些class，可以做到超快速無痛的切換主題
超好用ㄉ

---

*新手工程師的筆記，純粹記錄學了些啥東西
如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*