Bulma 中的每个元素都是 移动优先 的,并针对 垂直阅读 进行了优化,因此默认情况下在移动设备上:
columns
垂直堆叠level
组件会垂直堆叠显示其子元素nav
菜单将被隐藏
但是,您可以通过附加 is-mobile
修饰符来强制 columns
或 level
采用 水平 布局。
响应式
Bulma 是一个 移动优先 的框架
Bulma 中的每个元素都是 移动优先 的,并针对 垂直阅读 进行了优化,因此默认情况下在移动设备上:
columns
垂直堆叠level
组件会垂直堆叠显示其子元素nav
菜单将被隐藏但是,您可以通过附加 is-mobile
修饰符来强制 columns
或 level
采用 水平 布局。
Bulma 有 4 个断点,定义了 5 种屏幕尺寸
mobile
:最大 768px
tablet
:从 769px
开始desktop
:从 1024px
开始widescreen
:从 1216px
开始fullhd
:从 1408px
开始为了利用这些断点,Bulma 提供了 9 个响应式 mixins。
移动设备 最大 768px |
平板电脑 介于 769px 和 1023px 之间 |
桌面设备 介于 1024px 和 1215px 之间 |
宽屏 介于 1216px 和 1407px 之间 |
全高清1408px 及以上 |
---|---|---|---|---|
mobile |
- |
|||
- |
tablet |
|||
- |
desktop |
|||
- |
widescreen |
|||
- |
fullhd |
|||
- |
tablet-only |
- |
||
- |
desktop-only |
- |
||
- |
widescreen-only |
- |
||
touch |
- |
|||
until-widescreen |
- |
|||
until-fullhd |
- |
为了简化这些断点的使用,Bulma 提供了 易于使用的响应式 mixins。
默认情况下,$widescreen
和 $fullhd
断点是 启用 的。 您可以通过将相应的 Sass 布尔值设置为 false
来禁用它们
// Disable the widescreen breakpoint
$widescreen-enabled: false;
// Disable the fullhd breakpoint
$fullhd-enabled: false;