讨论Bulma(1) - 芒果文档

📌 相关文章

📜 讨论Bulma(1)

📅 最后修改于: 2023-12-03 15:41:42.196000 🧑 作者: Mango

Bulma - 现代化的CSS框架

Bulma 是一个现代化、简约的CSS框架，它是基于 Flexbox 的，且完全响应式。它不仅易于使用，同时也有许多灵活的功能，使其成为许多Web开发人员的首选框架之一。

特性

Bulma框架具有以下特性：

基于Flexbox，易于进行布局
简约/现代化的UI设计
完全响应式
易于自定义和扩展
支持常用的CSS元素

开始使用Bulma

一、从CDN导入

Bulma是基于纯CSS的，你可以直接从CDN导入：

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

二、使用NPM导入

你也可以使用npm安装Bulma，然后在项目中导入：

npm install bulma

导入CSS：

import 'bulma/css/bulma.min.css';

三、手动下载

你也可以从Bulma官网http://bulma.io/download下载zip文件，然后手动导入到项目中。

使用示例

第一步：创建一个基本布局

<section class="hero is-fullheight">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Hello, world!
      </h1>
      <h2 class="subtitle">
        My first Bulma website
      </h2>
    </div>
  </div>
</section>

第二步：使用组件和元素

<section class="section">
  <div class="container">
    <div class="columns">
      <div class="column">
        <div class="card">
          <div class="card-content">
            <p class="title">
              Component
            </p>
            <p class="subtitle">
              A simple container to divide your page into sections.
            </p>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="card">
          <div class="card-content">
            <p class="title">
              Element
            </p>
            <p class="subtitle">
              A simple container to divide your page into sections.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

如何贡献

你可以在GitHub上找到Bulma项目https://github.com/jgthms/bulma，并在其中创建问题和拉取请求。

结论

Bulma 是一个简单、灵活的现代化CSS框架，它可以满足你开发各种Web应用的需要，非常适合Web开发初学者或那些希望使用现代化设计来简化工作流程的中高级开发人员。