响应式(Responsiveness)

Bulma 是一个移动优先的CSS框架

默认垂直显示(Vertical by default) #

Bulma 中每个元素都是 移动优先 的，并针对 垂直阅读进行优化, 并且默认为在移动设备上显示:

  • columns: 是垂直堆放的
  • level: 组件的子元素将垂直堆放
  • nav: 导航菜单将会隐藏

您可以通过添加 is-mobile 修饰符，强制让columns 或 nav 变为 水平 布局。

断点(Breakpoints) #

Bulma 使用 4 断点(breakpoints)来定义5种屏幕尺寸:

  • mobile: up to 768px
  • tablet: from 769px
  • desktop: from 1024px
  • widescreen: from 1216px
  • fullhd: from 1408px

为了方便使用这写断点，Bulma提供了9 混合响应(responsive mixins).

Mobile
Up to 768px 		Tablet
Between 769px and 1023px 		Desktop
Between 1024px and 1215px 		Widescreen
Between 1216px and 1407px 		FullHD
1408px and above

mobile

-

-

tablet

-

desktop

-

widescreen

-

fullhd

-

tablet-only

-

-

desktop-only

-

-

widescreen-only

-

touch

-

until-widescreen

-

until-fullhd

-

To simplify using these breakpoints, Bulma provides easy-to-use responsive mixins.

禁用断点(Disabling breakpoints) #

自默认情况下, $widescreen 和 $fullhd 断点(breakpoints) 是 可用的. 您可以通过将相应的Sass布尔值设置为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)