响应式(Responsiveness)

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


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

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

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

您可以通过添加 is-mobile 修饰符,强制让columnsnav 变为 水平 布局。


断点(Breakpoints) #

Bulma 有 5 断点(breakpoints):

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

Bulma 使用 9 混合响应(responsive mixins):

  • =mobile
    小于 768px
  • =tablet
    大于 769px
  • =tablet-only
    大于 769px 并且小于 1023px
  • =touch
    小于 1023px
  • =desktop
    大于 1024px
  • =desktop-only
    大于 1024px 并且小于 1215px
  • =widescreen
    大于 1216px
  • =widescreen-only
    大于 1216px 并且小于 1407px
  • =fullhd
    大于 1408px
Mobile
小于 768px
Tablet
769px1023px 之间
Desktop
1024px1215px 之间
Widescreen
1216px1407px 之间
FullHD
1408px 以上

mobile

-

-

tablet

-

desktop

-

widescreen

-

fullhd

-

tablet-only

-

-

desktop-only

-

-

widescreen-only

-

touch

-

until-widescreen

-

until-fullhd

-


禁用断点(Disabling breakpoints) #

Since 0.7.0

自默认情况下, $widescreen$fullhd 断点(breakpoints) 是 可用的. 您可以通过将相应的Sass布尔值设置为false来禁用它们:

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

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

Variables #

这些变量 的值是另外一个变量的引用.

名字 类型 默认值 计算值
名字 类型 默认值 计算值
$gap size 32px
$tablet size 769px
$desktop computed 960px + (2 * $gap)
$widescreen computed 1152px + (2 * $gap)
$fullhd computed 1344px + (2 * $gap)