Bulma的元素默认为移动端优先模式，移动端的用户体验:
columns列是垂直排列的- 水平组件
level在垂直方向自动显示相应的子组件 - 顶部导航菜单
nav默认是隐藏的
通过添加is-mobile类名，你可以把以上默认配置调整为水平布局。
Sponsor
响应式
移动端优先的CSS框架
默认垂直模式 #
断点 #
Bulma通过 4个断点来适配五种屏幕尺寸:
-
mobile 手机端: from0px -
tablet 平板: from769px -
desktop 桌面常规: from1024px -
widescreen 桌面宽屏: from1216px -
fullhd 高清: from1408px
通过这些断点的不同组合，可以提供 9种响应式组件。
|
Mobile Between 0px and 768px
|
Tablet Between 769px and 1023px
|
Desktop Between 1024px and 1215px
|
Widescreen Between 1216px and 1407px
|
FullHD Between 1408px and px
|
|---|---|---|---|---|
|
mobile |
- |
|||
|
- |
tablet |
|||
|
- |
desktop |
|||
|
- |
widescreen |
|||
|
- |
fullhd |
|||
|
- |
tablet-only |
- |
||
|
- |
desktop-only |
- |
||
|
- |
widescreen-only |
- |
||
|
touch |
- |
|||
|
until-widescreen |
- |
|||
|
until-fullhd |
- |
|||
为了简化断点的使用方法，同时也提供 easy-to-use responsive mixins的方法。
取消断点 #
默认情况下，宽屏和高清模式的断点是自动激活的，你可以在相关的Sass配置里面配置为false进行取消：
// Disable the widescreen breakpoint
$widescreen-enabled: false;
// Disable the fullhd breakpoint
$fullhd-enabled: false;|
Sass Variable
|
CSS Variable
|
Value
|
|---|