NB的Bulma：一个没有任何JS代码的前端框架！

菜小编

2024-8-10

WEB前端开发

一个轻量级的、响应式UI框架：Bulma。它是殿堂级大师Jeremy Thomas开发的框架！

它简单到只有一个CSS文件，但提供了一整套功能强大的组件框架。让人直呼NB!

接下来，让我们一起来看看！

简介

先来看看官方得介绍。

Bulma: the modernCSS framework thatjust works. Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

重点在responsive(响应式的)。

Bulma是一个现代的、轻量级的、易自定义的 CSS UI 框架。它采用Flexbox布局，使构建响应式网页设计变得简单快捷。

开发者可以直接调用 class 名来使用，通过规范的组合，来达到快速构建 web 界面。 ps: class 类名命名简单、直观、便捷！算得上一套标准的命名范本！

安装和使用前提

记住：You only need 1 CSS file to use Bulma。 你只需要一个CSS文件就能使用Bulma框架。

你可以通过CDN直接引入bulma.min.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

或者安装NPM包。

npm install bulma
// or
yarn add bulma

前提：Bulma是现代网页响应式框架。因此你需要下面这样的HTML声明！

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    
  </body>
</html>

也就是html5页面，配置好上面的<meta>标签！

🆗，一切就绪，可以尽情使用啦~

示例

Bulma提供了强大的栅格系统，使页面布局灵活易用。来看看示例。

这就是我一开始提到的FlexBox。又如这个布局。

还有这个布局。

这里把最后一个示例的代码贴一下，大家有个印象就好！

<div class="columns is-mobile">
  <div class="column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
    <code>is-three-quarters-mobile</code><br>
    <code>is-two-thirds-tablet</code><br>
    <code>is-half-desktop</code><br>
    <code>is-one-third-widescreen</code><br>
    <code>is-one-quarter-fullhd</code>
  </div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>