相关文章
  Bulma-快速指南 
  

Bulma-快速指南


 

Bulma-简介

什么是Bulma?

Bulma是一个开放源代码,简单而现代的CSS框架,它依赖于flexbox模块(用于开发响应式布局结构)。

历史

Bulma于2016年出版,并在MIT许可下发行。 Bulma的当前版本是0.7.1,已于2018年4月18日发布。

为什么要使用布尔玛?

Bulma非常易于学习和设置。它使用SASS构建,并除以39个.sass文件。通过将代码分成单独的文件,可以轻松地自定义代码,它允许自定义应用程序的一部分以获得预期的结果。

特征

  • 这是一个轻量级的现代CSS框架,它使用Flexbox。
  • 它在单个文件中而不是在单独的文件中包含移动优先样式。
  • 它是可定制和模块化的。

好处

  • 它为台式机,平板电脑和手机提供了响应式设计。
  • 它是纯CSS框架,因此您可以与AngularJS,ReactJS等任何JavaScript框架结合使用。
  • 它使用最少的HTML代码,从而易于阅读和编写代码。

缺点

  • 这是一个新的框架,没有一个社区那么大。
  • 它的文档较少,需要一些小的改进。
  • 该框架仍处于开发阶段。

Bulma-概述

描述

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表单元素通过使用输入元素(例如文本字段,复选框,单选按钮等)指定用户输入数据,并将其发送到服务器以处理数据。

下表列出了可用于利用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.

error: 内容受到保护 !!