CSS 變數
Dart Sass
Flexbox
模組化
開放原始碼
回應式
免費
智慧型網格
自動顏色
骨架
佈景主題
是我有幸使用過寫得最漂亮的一個框架。
Per Axbom 的頭像 Per Axbom
@jgthms 的 Bulma CSS 真是完美。
Alejandro Barrera A. 的頭像 Alejandro Barrera A.
5 分鐘後,我就讓 #bulmaio 開始執行。真是奇蹟啊!!!! @jgthms
Jamie 的頭像 Jamie
Bulma,我想我愛上你了。
Jesse Schoff 的頭像 Jesse Schoff
我們非常感謝 @jgthms 創造了 Bulma CSS 框架。
Infinity Search 的頭像 Infinity Search
有了 Bulma,我能在一天內用我網站範本製作出每個頁面,而且之前我完全不知道如何使用它。
Bruh 的頭像 Bruh
下載

現代
CSS 框架

Bulma 是免費的開源框架,提供可立即使用的前端元件,您可以輕鬆地將它們組合起來,以建構回應式網頁介面。

不需要 CSS 知識!
CSS 變數
Dart Sass
Flexbox
模組化
開放原始碼
回應式
智慧型網格

暗黑模式

自動或根據使用者喜好選擇暗黑主題

Bulma

基於 Flexbox 的現代 CSS 框架

變更已成功儲存
<div data-theme="dark">
  <h1 class="title">Bulma</h1>

  <p class="subtitle">
    Modern CSS framework based on <a href="https://bulma.dev.org.tw">Flexbox</a>
  </p>

  <div class="message is-success">
    <div class="message-body">
      Changes successfully saved
    </div>
  </div>

  <div class="field">
    <input class="input" type="text" placeholder="Your Name">
  </div>

  <div class="field">
    <div class="select">
      <select><option>Select dropdown</option></select>
    </div>
  </div>

  <div class="buttons">
    <a class="button is-link is-soft">Save Changes</a>
    <a class="button is-danger is-soft">Cancel</a>
  </div>
</div>

Bulma 感謝其贊助商

他們的支持有助於 Bulma 和其他開源軟體的持續開發

最簡單的網格系統

只要新增欄,它們就會自動調整大小

在桌上型電腦上更好

這個互動式工具在較大的螢幕上效果更好!這是因為 Bulma 欄位預設為垂直。我建議您稍後在桌上型電腦上重新檢視此頁面。😉

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>

雖然可以新增任意數量的欄位,但建議堅持使用12 個欄位
如果您想要較小的區塊,您隨時可以巢狀欄位。

如此容易學習

幾分鐘內開始設計

按鈕

按鈕

button is-primary

按鈕

button is-primary is-large

按鈕

button is-primary is-large is-loading

按鈕

如此快速自訂

只需在匯入 Bulma 之前設定您自己的 Sass 變數
@use "sass:color";

// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;

// Path to Bulma's sass folder
@use "path/to/bulma/sass" with (
  $family-primary: '"Nunito", sans-serif',
  $grey-dark: $brown,
  $grey-light: $beige-light,
  $primary: $purple,
  $link: $pink,
  $control-border-width: 2px,
  $input-h: color.hue($beige-lighter),
  $input-s: color.saturation($beige-lighter),
  $input-background-l: color.lightness($beige-lighter),
  $input-border-l: color.lightness($beige-lighter),
  $input-shadow: none
);

// Import the Google Font
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");

之前

Bulma

基於 Flexbox 的現代 CSS 架構

之後

Bulma

基於 Flexbox 的現代 CSS 架構

不需要 JavaScript

僅使用 CSS,因此可整合到 任何 JS 環境中

美化 by everyone

看看 Bulma 開發人員正在建置什麼

受到 社群 喜愛

看看 Bulma 粉絲正在推文什麼

還有更多

加入超過 200,000 名開發人員

如何支援 Bulma

#native_company# #native_desc#
#native_cta#