Bulma 快速指南

什麼是 Bulma？

Bulma 是一個開源的、簡單且現代的 CSS 框架，它依賴於 flexbox 模組（用於開發響應式佈局結構）。

歷史

Bulma 於 2016 年釋出，並在 MIT 許可證下分發。Bulma 的當前版本為 0.7.1，於 2018 年 4 月 18 日釋出。

為什麼要使用 Bulma？

Bulma 非常易於學習和設定。它使用 SASS 構建，並分為 39 個 .sass 檔案。程式碼可以透過將其分成單獨的檔案來輕鬆定製，並且它允許定製應用程式的各個部分以獲得預期的結果。

特性

它是一個輕量級、現代的 CSS 框架，它使用 Flexbox。
它在一個檔案中包含移動優先樣式，而不是在單獨的檔案中。
它是可定製和模組化的。

優點

它為桌上型電腦、平板電腦和移動裝置提供響應式設計。
它是一個純 CSS 框架，因此您可以將其與任何 JavaScript 框架（如 AngularJS、ReactJS 等）結合使用。
它使用最少的 HTML 程式碼，這使得程式碼易於閱讀和編寫。

缺點

它是一個新的框架，社群規模還不夠大。
它的文件較少，需要一些小的改進。
此框架仍在開發階段。

Bulma - 概述

描述

Bulma 是一個輕量級、現代的 CSS 框架，它依賴於 flexbox 模組（用於開發響應式佈局結構和精美設計）。

Bulma 的概述包括：Bulma 入門、響應式設計（您可以在不同的裝置上（例如桌上型電腦、平板電腦和手機）檢視網頁）、顏色、用於定義顏色和值的函式以及 Bulma 中的 mixin（允許您將一個類的屬性用於另一個類的 CSS 屬性組）。

下表列出了您可以用來利用 Bulma CSS 的不同型別的實用程式：

序號	實用程式和描述
1	Bulma 入門您可以使用一個 css 檔案開始使用 Bulma。
2	響應式設計和顏色它是移動友好的開發，可以與大型、小型和中型裝置結合使用。
3	函式和 Mixin Bulma 使用一些函式和 mixin 來分別定義值和元素。

Bulma - 修飾符

描述

Bulma 中的修飾符包括：使用類為元素提供替代樣式、響應式類來更改樣式、顏色輔助工具來更改元素的顏色、排版輔助工具來更改文字的大小和顏色。

下表列出了您可以用來利用 Bulma CSS 的不同型別的修飾符：

序號	修飾符和描述
1	修飾符語法和響應式輔助工具您可以透過使用修飾符類為元素建立替代樣式。
2	顏色和排版輔助工具您可以使用顏色輔助工具來更改文字或背景的顏色。

Bulma - 列

描述

Bulma 提供響應式網格系統（透過一系列行和列建立頁面佈局），該系統可以擴充套件到容器內的 12 列。列將隨著裝置或視口大小的增加而重新排列。

下表列出了您可以用來利用 Bulma CSS 的列的不同變體：

序號	列型別和描述
1	列布局和大小 Bulma 允許透過在容器中新增 columns 類來非常輕鬆地構建列布局。
2	列響應性和巢狀 Bulma 在不同型別的螢幕（如移動裝置、平板電腦和桌上型電腦）中提供響應式列。
3	列間距和選項列在列內容之間建立相等的間距。

Bulma - 佈局

描述

Bulma 佈局描述了網頁的結構，該結構是使用其 CSS 類設計的。

下表列出了您可以用來利用 Bulma CSS 的佈局的不同變體：

序號	佈局型別和描述
1	容器和級別 Bulma 使用容器來表示基本佈局幷包裝站點內容。
2	媒體物件媒體物件用於為構建各種型別的元件指定抽象物件樣式。
3	英雄橫幅 Bulma 提供英雄橫幅來為網頁指定全寬橫幅。
4	圖塊 Bulma 使用單個元素類建立二維佈局。

Bulma - 表單

描述

Bulma 表單元素使用輸入元素（例如文字欄位、複選框、單選按鈕等）指定使用者輸入資料，並將其傳送到伺服器以處理資料。

下表列出了您可以用來利用 Bulma CSS 的表單的不同變體：

序號	表單型別和描述
1	表單控制元件 Bulma 包含不同型別的表單控制元件類，用於建立各種表單。
2	輸入 Bulma 提供輸入欄位用於輸入使用者資料以及不同型別的變體。
3	文字區域當您需要多行輸入時，可以使用 Bulma 文字區域。
4	選擇當您希望允許使用者從多個選項中進行選擇時，可以使用 Bulma 選擇。
5	複選框和單選按鈕當您希望使用者從預設選項列表中進行選擇時，可以使用複選框和單選按鈕。
6	檔案它用於從使用者資料上傳檔案。

Bulma - 元素

描述

Bulma 提供不同型別的元素，例如可以用作容器的框元素、按鈕元素、用於指定影像的影像容器、表格元素等。

下表列出了您可以用來利用 Bulma CSS 的元素的不同變體：

序號	表單型別和描述
1	按鈕按鈕元素提供使用者與自定義按鈕樣式的互動。
2	內容 Bulma 提供 content 類來直接使用 HTML 標籤。
3	框和圖示 .box 類定義一個包含邊框、半徑和填充的容器。
4	影像 Bulma 使用 .image 類在頁面中顯示影像。
5	通知和進度條 Bulma 指定預定義的警報訊息以顯示通知。
6	表格 Bulma 包裝用於以表格格式顯示資料的元素。
7	標籤和標題 Bulma 提供名為標籤的小標籤來顯示附加資訊。

Bulma - 元件

描述

Bulma 帶有預先設定樣式的元件，這些元件提供下拉選單、模態框、分頁、導航欄、選項卡等，以便使用者輕鬆地在頁面中體驗。

下表列出了您可以用來利用 Bulma CSS 的元件的不同變體：

序號	元件和描述
1	麵包屑 Bulma 使用麵包屑元件作為導航方法，以指示應用程式中當前頁面的位置。
2	卡片卡片元件在一個框中顯示內容，以獲得更好的外觀。
3	下拉選單 Bulma 提供可切換的下拉選單，以列表格式顯示相關連結。
4	訊息 Bulma 提供訊息塊來增強頁面外觀。
5	模態框模態框是一個子視窗，它層疊在其父視窗之上。
6	導航欄導航欄用作站點的導航標題。
7	分頁分頁元件提供跨多個頁面的系列相關連結。
8	選項卡 Bulma 提供帶不同樣式的選項卡式導航選單來顯示內容。

列印頁面