块(Block)

Bulma 最基本的分割单位是块。

块元素是一种简单的间隔工具。它允许同级HTML元素之间具有一致的边距:

例如

此文本位于块内。.
此文本在第二个块中。如果他在受苦,他会被认为是在帮助他。海洋会像很多需要的冰箱。没有人投诉。
此文本在第三个块中。这个方块底部没有边距。

HTML

<div class="block">
          此文本位于块内。.
  </div>
  <div class="block">
  此文本在第二个块中。此文本在第二个块中。如果他在受苦,他会被认为是在帮助他。海洋会像很多需要的冰箱。没有人投诉。
  </div>
  <div class="block">
  此文本在第三个块中。这个方块底部没有边距。
  </div>

如您所见,前两个块有底部边距,但第三个块没有。这是因为Bulma在除最后一个块外的所有块上都应用了间距。这意味着您可以使用任意数量的块,间距将只显示在它们之间。

如果不使用block,HTML元素之间将没有空格:

例如

此文本不在块中。
此文本也不在块内。如果他在受苦,他会被认为是在帮助他。海洋会像很多需要的冰箱。没有人投诉。
此文本也不在块中。

HTML

<div>
          此文本不在块中。
  </div>
  <div>
  此文本也不在块内。如果他在受苦,他会被认为是在帮助他。海洋会像很多需要的冰箱。没有人投诉。
  </div>
  <div>
  此文本也不在块中。
  </div>

你已经在用它了 #

事实上,你已经在不知不觉中使用了这个块。它的CSS属性在几个Bulma元素和组件之间共享:

俺老刘提示:下面的属性都默认使用了块元素:

  • breadcrumb
  • level
  • message
  • pagination
  • tabs
  • box
  • content
  • notification
  • other
  • progress
  • table
  • title

这要归功于@extend %block 占位符功能。

对比一下,它看起来是这样的:

没有使用block

30%
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.

Error

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

使用了 block

30%
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.

Error

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

无论您使用哪个Bulma元素和组件,也不管它们的顺序如何,它们之间都有一个一致的空间。

一行CSS代码 #

如您所见,块的CSS非常简单:除了最后一个之外,它对所有同级应用增加了一个底部边距margin-bottom。这样可以防止最后一个同级在底部添加不必要的空间。

.block:not(:last-child) {
    margin-bottom: 1.5rem;
  }

返回头部

问题反馈
返回顶部