通过 🎓 在线互动课程、📺 教育视频和 🧑🏻‍💻 项目构建教程学习 CSS。
下载

赞助

Route Planner and Route Optimizer

响应式


Bulma 是一个 移动优先 的框架

默认垂直排列 #

Bulma 中的每个元素都是 移动优先 的,并针对 垂直阅读 进行了优化,因此默认情况下在移动设备上:

  • columns 垂直堆叠
  • level 组件会垂直堆叠显示其子元素
  • nav 菜单将被隐藏

但是,您可以通过附加 is-mobile 修饰符来强制 columnslevel 采用 水平 布局。

断点 #

Bulma 有 4 个断点,定义了 5 种屏幕尺寸

  • mobile:最大 768px
  • tablet:从 769px 开始
  • desktop:从 1024px 开始
  • widescreen:从 1216px 开始
  • fullhd:从 1408px 开始

为了利用这些断点,Bulma 提供了 9 个响应式 mixins

移动设备
最大 768px
平板电脑
介于 769px1023px 之间
桌面设备
介于 1024px1215px 之间
宽屏
介于 1216px1407px 之间
全高清
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;

如何支持 Bulma

#native_company# #native_desc#
#native_cta#
免费开始使用
免费开始使用