Bill Gates
@BillGates
36m
The horrifying killings of
George Floyd, Ahmaud Arbery,
Breonna Taylor and far too
many other Black people—and
the protests they sparked—are
shining a light on the brutal
injustices that Black people
experience every day...
Bulma是一个基于 Flexbox 的免费开源 CSS 框架。它组件丰富、兼容且文档齐全。它本质上是高度敏感的。它使用类来实现其设计。
图像类是一种容器，因为图像需要几分钟才能加载，图像容器为该图像保留了空间，这样网站的布局就不会在图像加载时甚至图像错误时中断。
示例 1：此示例使用 Bulma 来显示图像。
Bulma Image
Display image
A computer is a machine that can be
instructed to carry out sequences
of arithmetic or logical operations
automatically via computer
programming. Modern computers have
the ability to follow generalized
sets of operations, called programs.
These programs enable computers to
perform an extremely wide range of
tasks.
输出： 
示例2：本示例使用Bulma 显示加载错误或图像错误。
Bulma Image
Image Error
A computer is a machine that can be
instructed to carry out sequences
of arithmetic or logical operations
automatically via computer programming.
Modern computers have the ability to
follow generalized sets of operations,
called programs. These programs enable
computers to perform an extremely wide
range of tasks.
输出： 
说明： Bulma 图像类充当为图像保留空间的容器，因此即使出现图像错误，网站布局也不会中断。在这里，我们提供了一个错误的图像 URL，但尽管该空间是为要加载的图像保留的。
示例 3：此示例使用 Bulma 创建圆形图像。
Bulma Image
![]()
输出： 
示例 4：此示例使用 Bulma 创建不同大小的图像。
Bulma Image
Size
Image
24x24px
32x32px
48x48px
64x64px
96x96px
128x128px
输出： 
示例 5：此示例使用 Bulma 创建具有纵横比的响应式图像。
Bulma Image
Size
Image
1by1
5by4
输出： 
示例 6：此示例使用 Bulma 创建具有纵横比的响应式图像。
Bulma Image
Size
Image
4by3
3by2
输出： 
示例 7：此示例使用 Bulma 创建具有纵横比的响应式图像。
Bulma Image
Size
Image
5by3
16by9
2by1
输出： 
注意：在上面的所有示例中，我们使用了一些额外的 Bulma 类，例如容器、列、标题、表等，以很好地设计内容。