节(Section)

一个简单的容器,用于将页面划分为多个部分,就像您当前正在阅读的部分一样

节组件是带有响应填充的简单布局元素。它们最好作为body的直接下级。

Example

Section

A simple container to divide your page into sections, like the one you're currently reading.

HTML

<section class="section">
    <h1 class="title">Section</h1>
    <h2 class="subtitle">
      A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
    </h2>
  </section>

大小 #

你可以用修饰符 is-mediumis-large 来改变空间大小 spacing.

Example

Medium section

A simple container to divide your page into sections, like the one you're currently reading.

HTML

<section class="section is-medium">
    <h1 class="title">Medium section</h1>
    <h2 class="subtitle">
      A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
    </h2>
  </section>

Example

Large section

A simple container to divide your page into sections, like the one you're currently reading.

HTML

<section class="section is-large">
    <h1 class="title">Large section</h1>
    <h2 class="subtitle">
      A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
    </h2>
  </section>

Variables #

Name
Type
Value
Computed Value
Computed Type
$section-padding
size
3rem 1.5rem
$section-padding-desktop
size
3rem 3rem
$section-padding-medium
size
9rem 4.5rem
$section-padding-large
size
18rem 6rem

返回头部

问题反馈
返回顶部