通过 🎓 在线互动课程、📺 教育视频和 🧑🏻‍💻 项目构建教程学习 CSS。
下载

赞助

Route Planner and Route Optimizer

章节


一个简单的容器,可以将您的页面分成章节,就像您现在阅读的这一部分一样

section 组件是具有响应式内边距的简单布局元素。它们最好用作 body直接子元素。

示例

章节

一个简单的容器,可以将您的页面分成章节,就像您现在阅读的这一部分一样。

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 来更改间距

示例

中等章节

一个简单的容器,可以将您的页面分成章节,就像您现在阅读的这一部分一样。

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>

示例

大型章节

一个简单的容器,可以将您的页面分成章节,就像您现在阅读的这一部分一样。

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>

Sass 和 CSS 变量 #

Sass 变量
CSS 变量
$section-padding
var(--bulma-section-padding)
3rem 1.5rem
$section-padding-desktop
var(--bulma-section-padding-desktop)
3rem 3rem
$section-padding-medium
var(--bulma-section-padding-medium)
9rem 4.5rem
$section-padding-large
var(--bulma-section-padding-large)
18rem 6rem

如何支持 Bulma

#native_company# #native_desc#
#native_cta#
免费开始使用
免费开始使用