這篇文章適合誰
當提到CSS的框架的時候，大家一定會想到目前最火紅的框架：Bootstrap，但是這篇文章要帶大家來認識的是Bulma這個更為輕量、簡單的框架。而這篇文章適合對於網頁開發有興趣，並且對於CSS有一些基礎的開發者，希望可以幫助到大家。
什麼是Bulma?
Bulma是一個基於 Flexbox 的現代化的 CSS 框架，設計的初衷就是移動式裝置優先(手機、平板)，可以輕鬆用來實現各種簡單或者複製的內容佈局，瀏覽器支持：Chrome、Edge、Firefox、Internet Explorer (10+)、Opera 以及 Safari。
修飾語法
首先你要先了解的是修飾類的語法，可以藉由這種語法去更改Bulma元素的樣式，他們都以is-或has-為開頭。
Button
Bulma 的安裝只需一步，把樣式表插入網頁即可。
<link rel=”stylesheet” href=”css/bulma/min.css”/>
在使用上也非常簡單，只需在HTML元素中加入class，並在a元素中加入button類別，就會產生一個按鈕。
<a class=”button”>Button</a>
在上面有提到可以用is-或是has-為開頭的語法去改變button的樣式，請看以下範例。
<a class=”button is-small”>Small</a> <a class=”button is-Normal”>Normal</a> <a class=”button is-Medium”>Medium</a> <a class=”button is-Large”>Large</a>
文字
而Bulma也有提供顏色的使用方法來讓開發者使用：
- is-primary(藍綠)
- is-link(深藍)
- is-info(藍)
- is-success(綠)
- is-warning(黃)
- is-danger(紅)
Bulma提供了7種可以修訂文字大小的語法：
- is-size-1： 3rem
- is-size-2： 2.5rem
- is-size-3： 2rem
- is-size-4： 1.5rem
- is-size-5： 1.25rem
- is-size-6： 1rem
- is-size-7： 0.75rem
也可以為不同的設備設定不同的文字大小：
- is-size-1-mobile：手機是 size-1
- is-size-1-tablet：平板是 size-1
- is-size-1-touch：手機和平板是 size-1
- is-size-1-desktop：桌面、寬屏和高清是 size-1
- is-size-1-widescreen：寬屏和高清是 size-1
- is-size-1-fullhd：高清是 size-1
Columns
Bulma 的網格是基於Flexbox，寫起來非常容易，讓我們創建擁有四列的Columns，你可以根據你的需要增加自己的行列的數目。
結果如下：
為了加入顏色，我們可以用<p>標籤替換它們裡面的文本，並給它notification類和is-*修飾符。像這樣舉例如：
<p class =”notifiacation is-sucess”>第一欄</ p>
讓我們用 is-info，is-success，is-warning和is-danger改變其顏色，其結果如下：
也可以使用is-half控制寬度（加到綠色列）
<div class=”column is-half”> <p class =”notification is-success”>第二欄</ p> </div>
結果：導致綠色那列佔了總長度的一半
以下是可用於控制列寬度的選項：
- is-two-thirds
- is-half
- is-one-third
- is-one-quarter
- is-four-fifths
- is-three-fifths
- is-two-fifths
- is-one-fifth
- is-three-quarters
結語
希望這篇文章能夠幫助你初步認識Bulma這個前端框架，如果想觀看更多相關內容，可以到快樂學程式的Udemy逛逛，有豐富的入門程式課程，你絕對會在裡面奠定良好的程式基礎！
如果你的入門還在單打獨鬥，歡迎來到快樂學程式找到志同道合的夥伴，你的自學之路不孤單。
