CSS 框架 Bulma 教程

阮一峰發表於2017-10-24
CSS框架

網頁樣式需要大量時間開發，最省事的方法就是使用 CSS 框架。

Bootstrap 是最著名的 CSS 框架，但是今天我想推薦另一個更輕量化、更易用的框架----Bulma。有了它，即使完全不懂 CSS，也可以輕而易舉做出美觀的網頁。

我要感謝 100offer 對我提供贊助。100offer 是國內第一流的人力資源網站，本文結尾有他們的簡介，最近想換工作的朋友可以看一下。

一、簡介

Bulma 框架最大的特點，就是簡單好用。所有樣式都基於class，只需為 HTML 元素指定class，樣式立刻生效。


<a class="button is-primary is-large">Login</a>

上面程式碼中，a 元素只需加上幾個class，就會出現一個主色調（is-primary）的大（is-large）按鈕。

Bulma 是一個手機優先的框架，提供五個寬度斷點，具有良好的自適應特性，可以隨心所欲為不同裝置設定不同樣式。

  • mobile：小於等於768px
  • tablet：大於等於769px
  • desktop：大於等於1024px
  • widescreen：大於等於1216px
  • fullhd：大於等於1408px

它提供二十多種常用元件，比如表單 、表格、圖示、麵包屑、選單、導航、Modal 視窗等等。簡單的網站，可以不用寫任何 CSS 程式碼。

二、基本用法

Bulma 的安裝只需一步，把樣式表插入網頁即可。


<link rel="stylesheet" href="css/bulma.min.css"/>

使用更簡單，就是為 HTML 元素加上class。


<a class="button">Button</a>

上面的程式碼為 a 元素加上button類，這個連結就會被渲染成按鈕。

Bulma 提供大量的修飾類，用來改變基類的樣式。它們都是以is-或has-開頭。比如，要改變 Button 的大小，就可以使用下面的修飾類。


<a class="button is-small">Small</a>
<a class="button">Normal</a>
<a class="button is-medium">Medium</a>
<a class="button is-large">Large</a>

Bulma 預設提供6種顏色。

  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger

按鈕狀態的修飾類如下。

  • is-hovered
  • is-focused
  • is-active
  • is-loading

完整的修飾類清單請看官方文件。

三、網格體系

Bulma 的網格體系基於 Flex 佈局，寫起來非常容易。最簡單的用法就是使用columns指定容器，使用column指定專案。


<div class="columns">
  <div class="column">First column</div>
  <div class="column">Second column</div>
  <div class="column">Third column</div>
  <div class="column">Fourth</div>
</div>

螢幕寬度大於 768px 時，所有專案平鋪，平分容器的寬度；寬度小於等於 768px 時，所有專案變成垂直堆疊。

以下的修飾類用來指定專案的寬度。

  • 四分之三：is-three-quarters
  • 四分之一： is-one-quarter
  • 三分之二：is-two-thirds
  • 三分之一：is-one-third
  • 二分之一：is-half
  • 五分之四：is-four-fifths
  • 五分之三：is-three-fifths
  • 五分之二：is-two-fifths
  • 五分之一：is-one-fifth

此外，還有一些修飾類也非常有用。

  • is-narrow：網格的寬度由內容的寬度決定
  • is-centered：網格內容居中對齊
  • is-gapless：網格之間沒有間距

Bulma 也支援12網格體系。

  • is-2
  • is-3
  • is-4
  • is-5
  • is-6
  • is-7
  • is-8
  • is-9
  • is-10
  • is-11

如果要指定某個網格偏移，可以用is-offset-修飾類。

  • is-offset-one-quarter
  • is-offset-one-fifth
  • is-offset-8
  • is-offset-1

四、響應式佈局

前面說過，Bulma 有五個寬度斷點，分別是 mobile（手機）、tablet（平板）、desktop（桌面）、widescreen（寬屏）、fullHD（高畫質）。

columns佈局預設是在手機上垂直堆疊，其他寬度都是平鋪。如果希望手機也保持平鋪，可以加上is-mobile修飾類。


<div class="columns is-mobile">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

如果希望手機和平板是垂直堆疊，其他寬度平鋪，可以使用is-desktop修飾類。


<div class="columns is-desktop">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

如果希望在不同裝置，網格佔據不同的寬度，可以像下面這樣寫。


<div class="
  column
  is-half-mobile
  is-one-third-tablet
  is-one-quarter-desktop
">
</div>

上面程式碼中，這個網格在手機上佔據二分之一寬度，平板三分之一寬度，桌面四分之一寬度，寬屏和高畫質則是平鋪。

Bulma 允許為不同裝置指定不同的佈局。


<div class="
  column
  is-flex-mobile
  is-inline-tablet
  is-block-desktop
">
</div>

上面程式碼中，手機是 flex 佈局，平板是 inline 佈局，其他寬度是 block 佈局。

下面是隱藏某個專案的修飾類。

  • is-hidden-mobile：只在手機隱藏
  • is-hidden-tablet-only：只在平板隱藏
  • is-hidden-desktop-only ：只在桌面隱藏
  • is-hidden-touch：手機和平板隱藏，其他寬度顯示

完整的清單請看官方文件。

五、文字

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

此外，還有字型顏色、對齊、輕重的修飾類。

六、定製

最後這個部分是高階內容，講解如何定製 Bulma，也就是修改預設樣式。Bulma 採用 Sass 語法（注意，不是 Scss 語法），所以定製的樣式也必須使用 SASS。

首先，克隆或下載原始碼。


$ git clone https://github.com/jgthms/bulma.git

然後，安裝依賴。


$ cd bulma
$ npm install

接著，在原始碼的根目錄裡面，新建一個app.sass檔案，定製的程式碼都寫在這個檔案。在它裡面，先引入 Bulma 基礎變數。如果需要的話，可以改掉。


@import "./sass/utilities/initial-variables"

$blue: #72d0eb
$pink: #ffb3b3
$family-serif: "Merriweather", "Georgia", serif

上面程式碼中，預設的blue、pink和family-serif變數被改掉。

有一些 Bulma 變數是從基礎變數衍生的，需要的話也可以改掉。


$primary: $pink

上面程式碼中，主色調改成了pink變數。

接著，在這個檔案裡面載入 Bulma 的入口指令碼。


@import "./bulma"

這一行的下面，你就可以寫自己的樣式了，比如為所有標題加一個下劃線。


.title {
  text-decoration: underline;
}

最後，開啟package.json，找到下面這一行。


"build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css",

把裡面的bulma.sass改成app.sass。


"build-sass": "node-sass --output-style expanded --source-map true app.sass css/bulma.css",

以後每次修改完樣式，執行一下npm run build，就會生成自己的樣式表css/bulma.css了。

（全文完）

================================

優秀的人才不缺工作機會，只缺適合自己的好機會。但是他們往往沒有精力，從海量機會中找到最適合的那個。

100offer 讓您可以向數百家網際網路企業，匿名展示簡歷和職業期望，省下查詢職位和投遞簡歷的時間。透過這種方式，對您感興趣的企業，主動邀請您參加面試。

100offer 的使用者之中，既有厭倦了大公司螺絲釘般的重複工作，轉而進入創業公司的前 BAT 員工；也有在小公司工作多年，一心想進入大公司的網際網路人；還有嚮往國外的工作與生活，成功肉身翻牆新加坡的工程師。

準備好用不一樣的方式迎接更好的職業機會了嗎？現在就提交申請吧！

另外，10月24日是程式設計師節。作為一名敲程式碼為生的程式設計師，你是不是被旁人貼過太多不屬於你的標籤----死板、呆萌、宅、不解人意？

100offer 給你一個撕掉標籤的機會：關注 100offer 微訊號，傳送一段話／一張圖／一段影片／一條語音...展示你除了敲程式碼以外的神技能，還有最高價值1024元的"程式設計師興趣基金"等你拿！

（完）

相關文章