在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

jgthms/bulma

菜单

布局组件

相关源文件

Bulma 中的布局组件为构建响应式页面布局提供了结构基础。这些组件有助于在不同屏幕尺寸上以一致且视觉上吸引人的方式组织和排列内容。与关注用户交互的 UI 组件（请参阅 UI 组件）不同，布局组件主要处理内容的空间组织。

布局组件概述

Bulma 提供了六个主要的布局组件，它们协同工作以创建灵活的页面结构

  1. Container (容器) - 通过响应式最大宽度在水平方向上居中内容
  2. Hero (英雄区块) - 可跨越整个视口高度的全宽横幅
  3. Section (区域) - 具有一致内边距的内容块
  4. Footer (页脚) - 带有充足内边距的页面结尾元素
  5. Level (级别) - 水平居中对齐系统
  6. Media Object (媒体对象) - 可重复嵌套的内容结构

来源

容器组件

container 是一个简单的实用元素，它会在其父元素内水平居中内容。它具有响应式最大宽度，该宽度根据视口大小而变化。

容器结构和行为

容器的默认行为

  • 移动设备：全宽度
  • 桌面设备 (≥1024px)：最大宽度 960px
  • 宽屏设备 (≥1216px)：最大宽度 1152px
  • 超宽屏设备 (≥1408px)：最大宽度 1344px
修饰类行为
is-fluid (流体)始终全宽度，两侧各有 32px 的外边距
is-widescreen (宽屏)在宽屏断点之前保持全宽度
is-fullhd (超宽屏)在超宽屏断点之前保持全宽度
is-max-desktop (最大桌面宽度)在所有更大的屏幕上都具有桌面尺寸的最大宽度 (960px)
is-max-widescreen (最大宽屏宽度)在所有更大的屏幕上都具有宽屏尺寸的最大宽度 (1152px)
is-max-tablet (最大平板宽度)在所有更大的屏幕上都具有平板电脑尺寸的最大宽度 (768px)

来源

英雄区块组件

hero 组件创建全宽横幅，可以选择覆盖整个视口高度。它通常用于引人注目的标题或部分。

英雄区块结构

基本的英雄区块结构需要

  • hero 作为主容器
  • hero-body 作为直接子元素，包含主要内容

对于全高英雄区块，您可以添加

  • hero-head 用于固定在顶部的内容
  • hero-foot 用于固定在底部的内容

英雄区块修饰符

  • 颜色：is-primary、is-link、is-info、is-success、is-warning、is-danger、is-light、is-dark
  • 尺寸：is-small、is-medium、is-large
  • 高度变化：is-halfheight、is-fullheight
  • is-fullheight-with-navbar - 考虑固定导航栏

来源

区域组件

section 组件为内容块提供了一致的内边距。它通常用作 body 元素的直接子元素，将页面划分为不同的区域。

section 组件有三种尺寸

  • 默认 - 标准内边距 (上下 3rem)
  • is-medium - 更多内边距 (上下 9rem)
  • is-large - 最大内边距 (上下 18rem)

来源

footer 组件是一个简单的容器，具有充足的底部内边距，旨在作为网页的最后一个元素。

页脚通常包含

  • 版权信息
  • 重要页面的链接
  • 联系信息
  • 社交媒体链接

来源

级别组件

level 组件是一个水平对齐系统，可垂直居中其子元素。它适用于导航栏、表单控件或任何需要水平对齐并垂直居中的内容。

级别结构

级别组件有两种结构

  1. 并列级别:

    • level 作为主容器
    • level-left 用于左对齐内容
    • level-right 用于右对齐内容
    • level-item 位于左右容器内部

  2. 居中级别:

    • level 作为主容器
    • level-item 作为直接子元素（无左右容器）

修饰符 is-mobile 在移动设备上保持水平布局（否则会垂直堆叠）。

来源

媒体对象

media 对象是一个通用的组件，用于可重复嵌套的内容布局。它特别适用于评论线程、用户列表或通知系统。

媒体对象结构

媒体对象由以下部分组成

  • media 作为主容器
  • media-left 通常用于图像或图标（可选）
  • media-content 用于主要内容区域
  • media-right 用于右对齐内容，如按钮（可选）

媒体对象可以嵌套多达三层，使其成为线程评论或回复的理想选择。

来源

布局组件的响应式行为

所有布局组件都设计为在不同视口尺寸下具有响应性

组件移动设备行为平板电脑及以上行为
容器全宽度基于断点的响应式最大宽度
Hero (英雄区块)全宽度（全高时为垂直）全宽度（保持高度设置）
章节标准内边距标准内边距
页脚标准内边距标准内边距
复杂度垂直堆叠水平对齐（除非使用了 is-mobile 修饰符）
媒体对象保持结构保持结构

来源

常见使用模式

布局组件通常以可预测的模式组合使用

典型嵌套模式

  1. 从高级结构组件开始：hero、section 或 footer
  2. 在这些组件内部添加 container 以控制内容宽度
  3. 使用 level 进行水平对齐或使用 media 进行可重复内容布局
  4. 添加 title、subtitle 或 content 等内容元素

来源

总结

Bulma 的布局组件为构建网页提供了一个全面的系统。它们遵循逻辑层次结构

  • hero、section 和 footer 提供主要的页面结构
  • container 控制内容宽度和居中
  • level 和 media 在容器内提供中间结构
  • 内容元素和 UI 组件填充这些结构

这种组织方式可以轻松实现一致、响应式的布局。

来源