Bulma CSS框架教程
Bulma CSS – 简介
Bulma CSS – 开始
Bulma CSS – CSS类
Bulma CSS – 模块化
Bulma CSS – 响应式
Bulma是一个支持响应式的框架，在电脑、手机、平板各种尺寸的屏幕上都可以完美呈现网页。
手机显示
Bulma对于手机显示作了优化：
columns、level等水平布局在手机上将会垂直排列显示nav导航菜单在手机上将被折叠
如果想在手机上强制水平布局显示，可以给columns、level加is-mobile修饰符。
屏幕界线
Bulma规定了5个屏幕宽度界线，区分不同类型的屏幕：
- mobile/手机: <= 768px
- tablet/平板: 769px ~ 1023px
- desktop/桌面: 1024px ~ 1215px
- widescreen/宽屏: 1216px ~ 1407px
- fullhd/全屏高清: >= 1408px
禁用某些屏幕界线
默认情况下，sass源代码中$widescreen-enabled和$fullhd屏幕界线是启用的，可以通过如下修改禁用:
// Disable the widescreen breakpoint
$widescreen-enabled: false
// Disable the fullhd breakpoint
$fullhd-enabled: false
SASS变量
在SASS源代码中，响应式支持相关的一些变量定义如下：
$gap | size | 64px | |
$tablet | size | 769px | |
$desktop | computed | 960px + (2 * $gap) | |
$widescreen | computed | 1152px + (2 * $gap) | |
$fullhd | computed | 1344px + (2 * $gap) |