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 提供带不同样式的选项卡式导航菜单来显示内容。

打印页面