📅 最后修改于: 2020-10-26 07:00:27 🧑 作者: Mango
Bulma是一个开放源代码，简单而现代的CSS框架，它依赖于flexbox模块(用于开发响应式布局结构)。
Bulma于2016年出版，并在MIT许可下发行。 Bulma的当前版本是0.7.1，已于2018年4月18日发布。
Bulma非常易于学习和设置。它使用SASS构建，并除以39个.sass文件。通过将代码分成单独的文件，可以轻松地自定义代码，它允许自定义应用程序的一部分以获得预期的结果。
Bulma是一种轻巧的现代CSS框架，它依赖于flexbox模块(用于开发响应式布局结构和精美的设计)。
Bulma的概述包括Bulma入门，响应能力(您可以在台式机，平板电脑和电话等不同设备上查看网页)，颜色，定义颜色和值的功能以及mixins(允许您使用的CSS属性组)在布尔玛中将一个类别的属性用于另一个类别)。
下表列出了可用于利用Bulma CSS的不同类型的实用程序-
| S.No. | Utility & Description |
|---|---|
| 1 | Getting started with BulmaYou can start with Bulma by using one css file. |
| 2 | Responsiveness and ColorsIt is mobile friendly development, which can be combined with large, small, and medium devices. |
| 3 | Functions and MixinsBulma uses some functions and mixins to define values and elements respectively. |
Bulma中的修饰符包括通过使用类的元素的替代样式，用于更改样式的响应类，用于更改元素颜色的颜色帮助器，用于更改文本的大小和颜色的排版帮助器。
下表列出了可用于利用Bulma CSS的不同类型的修饰符-
| S.No. | Modifiers & Description |
|---|---|
| 1 | Modifiers syntax and Responsive Helpers
You can create alternative styles for the elements by using modifier classes. |
| 2 | Color and Typography Helpers
You can use the color helpers for changing color of the text or background. |
Bulma提供响应式网格系统(通过一系列行和列创建页面布局)，该系统可在一个容器中最多扩展12列。列将随着设备或视口大小的增加而重新排列。
下表列出了可用于利用Bulma CSS的列的变体-
| S.No. | Column Types & Description |
|---|---|
| 1 | Column layout and Sizes
Bulma allows building column layout very easily by adding columns class in the container. |
| 2 | Columns Responsiveness and Nesting
Bulma provides responsive columns in the different types of screens like mobile devices, tablets, and desktop. |
| 3 | Columns Gap and Options
Columns create equal gap between column content. |
Bulma布局描述了网页的结构，该结构是使用CSS类设计的。
下表列出了布局的变体，您可以使用它们来利用Bulma CSS-
| S.No. | Layout Types & Description |
|---|---|
| 1 | Container and Levels
Bulma uses containers to represent the basic layout and wrap the site contents. |
| 2 | Media Object
Media object is used to specify abstract object styles for building various types of components. |
| 3 | Hero banner
Bulma provides hero banner to specify the full width banner to the webpage. |
| 4 | Tiles
Bulma creates 2-dimensional layout by using a single element class. |
Bulma表单元素通过使用输入元素(例如文本字段，复选框，单选按钮等)指定用户输入数据，并将其发送到服务器以处理数据。
下表列出了可用于利用Bulma CSS的各种形式的表格-
| S.No. | Form Types & Description |
|---|---|
| 1 | Form controls
Bulma contains different types of form control classes for creating variety of forms. |
| 2 | Input
Bulma provides input field for entering user data along with different types of variations. |
| 3 | Textarea
Bulma textarea is used when you need multiple lines of input. |
| 4 | Select
Bulma select is used when you want to allow the user to pick from multiple options. |
| 5 | Checkbox and Radio
The checkboxes and radio buttons can be used when you want users to choose from a list of preset options. |
| 6 | File
It is used to upload the files from user data. |
Bulma提供了不同类型的元素，例如可以用作容器的box元素，button元素，用于指定图像的图像容器，table元素等。
下表列出了可用于利用Bulma CSS的元素的变体-
| S.No. | Form Types & Description |
|---|---|
| 1 | Button
A button element provide user interaction with custom button styles. |
| 2 | Content
Bulma provides content class to use HTML tags directly. |
| 3 | Box and Icon
The .box class defines a container including a border, radius and padding. |
| 4 | Image
Bulma uses .image class to display the images in the page. |
| 5 | Notification and Progress bars
Bulma specifies predefined alert messages to display the notification. |
| 6 | Table
Bulma wraps the elements for displaying data in tabular format. |
| 7 | Tag and Title
Bulma provides small labels called tags to display the additional information. |
Bulma带有预样式化的组件，该组件提供下拉菜单，模式，分页，导航栏，选项卡等，以使用户在页面中轻松体验。
下表列出了可用于利用Bulma CSS的组件的变体-
| S.No. | Component & Description |
|---|---|
| 1 | Breadcrumb
Bulma uses breadcrumb component as a navigation method to indicate current page’s location to the user in the application. |
| 2 | Card
Card component displays the content in a box for better appearance. |
| 3 | Dropdown
Bulma provides toggleable dropdown menus for displaying related links in a list format. |
| 4 | Message
Bulma provides message blocks to enhance look of your page. |
| 5 | Modal
Modal is a child window that is layered over its parent window. |
| 6 | Navbar
Navbars serve as navigation headers for your site. |
| 7 | Pagination
Pagination component provides series of related links across multiple pages. |
| 8 | Tabs
Bulma provides tabbed navigation menu with different styles to display the content. |