自适应

Bulma 是移动设备优先的框架

默认竖屏 #

Bulma 的每个元素都是移动设备优先,而且为竖屏阅读做过优化,所以默认为使用移动设备:

  • columns 会竖向堆叠
  • level 组件会竖向堆叠显示其子元素
  • nav 菜单会隐藏

您可以通过添加 is-mobile 修饰符强制 columnslevel 横向(horizontal)布局。

断点 #

Bulma 使用 4 个断点定义了 5 个屏幕尺寸

  • mobile: 上限到 768px
  • tablet: 从 769px 开始
  • desktop: 从 1024px 开始
  • widescreen: 从 1216px 开始
  • fullhd: 从 1408px 开始

利用这些断点,Bulma 提供了 9 种自适应混入

移动设备
上限到 768px
平板
769px1023px 之间
桌面系统
1024px1215px 之间
宽屏
1216px1407px 之间
巨屏
1408px 及以上

移动设备

-

-

平板

-

桌面系统

-

宽屏

-

巨屏

-

仅平板

-

-

仅桌面

-

-

仅宽屏

-

触屏

-

宽屏以下

-

巨屏以下

-

为了简化这些断点的使用, Bulma 提供了易用自适应混入

禁用断点 #

默认情况下,$widescreen$fullhd 断点是 启用的。您可以通过设置相关 Sass 的 boolean 值为 false 来禁用:

// Disable the widescreen breakpoint
$widescreen-enabled: false

// Disable the fullhd breakpoint
$fullhd-enabled: false

Variables #

Name
Type
Value
Computed Value
Computed Type
$gap
size
32px
$tablet
size
769px
$desktop
computed
960px + (2 * $gap)
$widescreen
computed
1152px + (2 * $gap)
$fullhd
computed
1344px + (2 * $gap)

Made with Bulma 此页面为开放源码页面。 发现排版问题?或者表达模糊?
在 GitHub 改进该页内容

#native_company# #native_desc#
#native_cta#

简讯 功能、版本、展柜……实时新闻滚动发布!