CSS Bulma 框架

這是我參與8月更文挑戰的第10天，活動詳情查看：8月更文挑戰

Bulma 是一個免費的、開源的框架，採用了移動優先的響應式佈局，它提供了可隨時使用的前端組件，您能夠輕鬆地將這些組件組合起來構建響應性強的 web 界面。

Bluma 能夠做爲 Bootstrap 的替代框架，這類框架還有 Skeleton、Pure、Bootflat、Mueller 等。

Bluma 是純 CSS 的框架，你只須要將已經給定的類添加到你的標籤中，就能實現漂亮的效果。

下面咱們來看看它的一些用法。

安裝

使用 NPM

$ npm install bulma
複製代碼

安裝後，導入CSS 文件：

@import 'bulma/css/bulma.css'
複製代碼

使用 CDN

使用 jsDelivr 導入 CSS 文件

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
複製代碼

本地

您能夠從 GitHub 得到最新的 Bulma 版本，下載樣式表文件到本地

屏幕尺寸

Bulma 是一個手機優先的框架，提供五個寬度斷點，具備良好的自適應特性，能夠爲所欲爲爲不一樣設備設置不一樣樣式。

768         1024                1216         1408
'     '     '     '     '     '     '     '     '     '     '     '
<---------^------------^------------------^-------------^------------->
  mobile      tablet         desktop         widescreen      fullhd
複製代碼

網格體系

Bulma 的網格體系基於 Flex 佈局，使用 columns 指定容器，使用 column 指定項目。

<div class="columns">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>
複製代碼

修飾符

如下類定義不一樣顏色。

.is-primary
.is-link
.is-info
.is-success
.is-warning
.is-danger
複製代碼

如下類定義大小。

.is-small
.is-normal
.is-medium
.is-large
複製代碼

如下類定義狀態。

.is-hovered
.is-outlined
.is-loading
.is-focused
.is-active
.is-static
複製代碼

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

排版

如下類修改字體大小。

.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	手機
is-size-1-tablet	平板
is-size-1-touch	手機和平板
is-size-1-desktop	桌面、寬屏和高清
is-size-1-widescreen	寬屏和高清
size-1 is-size-1-fullhd	高清

如下類對齊文本

.has-text-centered	使文本成爲中心
.has-text-justified	使文本合理
.has-text-left.	使文本與左對齊
.has-text-right	使文本向右對齊

如下類轉換文本

.is-capitalized	將每一個單詞的第一個字符轉換爲大寫
.is-lowercase	將全部字符轉換爲小寫
.is-uppercase	將全部字符轉換爲大寫

組件

Bulma 內置了 Breadcrumb、Card、Menu 等十種組件，使用超級簡單、方便，你能夠在這👉 components 查看這些組件。

如下以 Card 卡片爲例：

<div class="card">
  <div class="card-content">
    <div class="content">
      Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros.
    </div>
  </div>
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
    </figure>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Save</a>
    <a href="#" class="card-footer-item">Edit</a>
    <a href="#" class="card-footer-item">Delete</a>
  </footer>
</div>
複製代碼

以上例子中，卡片內分爲三部分：card-content 文本內容，card-image 圖片容器，card-footer 腳部列表。

WYSIWYG 內容

WYSIWYG：所見即所得是一種系統。它使得用戶在視圖中所看到文檔與該文檔的最終產品具備相同的樣式，也容許用戶在視圖中直接編輯文本、圖形、或文檔中的其餘元素。

<div class="content">
  <!-- start WYSIWYG contents -->
  <h1>Heading</h1>
  <p>Paragraph</p>

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <!-- end WYSIWYG contents -->
</div>
複製代碼

要爲一般生成的 WYSIWYG 內容提供默認樣式，請使用 .content 類。你能夠在Content查看關於這類的內容。

定製 Bulma

要想自定義 Bulma，您須要：

• 安裝 Bulma

• 有效的 Sass 設置

• 建立本身的 .scss 和 .sass 文件

你能夠經過 node-sass、Sass CLI、webpack 任何一種方法來實現，官網給出了詳細的步驟，一步到位。下面咱們簡單的介紹下如何更改自定義樣式。

先導入 Bulma 初始變量，以以下爲例：

@import "../node_modules/bulma/bulma.sass"; // 該文件須要先引用

// 設置您須要更改顏色的變量
$purple: #8A4D76;
$pink: #FA7C91;
$purple-color-1: $purple; // 派生變量
複製代碼

上面代碼中，預設的 purple、pink 和 purple-color-1 變量將被替換。