Bulma - 响应式和颜色
描述
响应式设计规定网站应从宽屏显示器到手机都看起来不错。Bulma 是一种移动友好型开发，可与大型、小型和中型设备结合使用。因此，它被称为移动优先框架。
默认情况下，Bulma 指定在移动设备上垂直阅读，并包括以下几点 −
列将以垂直格式排列。
level 组件的子项将垂直排列。
nav 菜单将不可见。
断点
Bulma 包含五个断点 −
| 序列号 | 设备 | 断点 |
|---|---|---|
| 1 | 移动设备 | 最高 768px |
| 2 | 平板电脑 | 从 769px | 开始
| 3 | 台式机 | 从 1024px | 开始
| 4 | 宽屏 | 从 1216px | 开始
| 5 | 全高清 | 从 1408px | 开始
Bulma 包含 9 个响应式 mixin −
| S.No. | Mixin | 断点 |
|---|---|---|
| 1 | =mobile | 最高可达 768px |
| 2 | =tablet | 从 769px 开始 |
| 3 | =tablet-only | 从 769px 到 1023px |
| 4 | =touch | 最高可达1023px |
| 5 | =桌面 | 从 1024px |
| 6 | =桌面专用 | 从 1024px 到 1215px |
| 7 | =宽屏 | 从 1216px |
| 8 | =宽屏专用 | 从 1216px 到 1407px |
| 9 | =fullhd | 从 1408px 开始 |
您可以通过将 $widescreen 和 $fullhd 断点设置为 false 来禁用它们。
//禁用宽屏断点 $widescreen-enabled: false //禁用全高清断点 $fullhd-enabled: false
颜色
Bulma 元素和组件包含不同类型的颜色变体，语法为 .is-$color(例如:is-info、is-success 等)。
下表显示了不同类型的颜色及其反转值 −
| S.No. | 颜色 | 变量 | 值 | 计算值 | 反转值 | 计算反转值 |
|---|---|---|---|---|---|---|
| 1 | White | $white | $white | hsl(0, 0%, 100%) | $black | hsl(0, 0%, 4%) |
| 2 | Black | $black | $black | hsl(0, 0%, 4%) | $white | hsl(0, 0%, 100%) |
| 3 | Light | $light | $white-ter | hsl(0, 0%, 96%) | $grey-darker | hsl(0, 0%, 21%) |
| 4 | Dark | $dark | $grey-darker | hsl(0, 0%, 21%) | $white-ter | hsl(0, 0%, 96%) |
| 5 | Primary | $primary | $turquoise | hsl(171, 100%, 41%) | #fff | #fff |
| 6 | Link | $link | $blue | hsl(217, 71%, 53%) | #fff | #fff |
| 7 | Info | $info | $cyan | hsl(204, 86%, 53%) | #fff | #fff |
| 8 | Success | $success | $green | hsl(141, 71%, 48%) | #fff | #fff |
| 9 | Warning | $warning | $yellow | hsl(48, 100%, 67%) | rgba(0, 0, 0, 0.7) | rgba(0, 0, 0, 0.7) |
| 10 | Danger | $danger | $red | hsl(348, 100%, 61%) | #fff | #fff |
Bulma 为元素提供了黑色和白色之间的灰色阴影，如下所示 −
| S.No. | 颜色 | 变量 | 值 |
|---|---|---|---|
| 1 | Black bis | $black-bis | hsl(0, 0%, 7%) |
| 2 | Black ter | $black-ter | hsl(0, 0%, 14%) |
| 3 | Grey darker | $grey-darker | hsl(0, 0%, 21%) |
| 4 | Grey dark | $grey-dark | hsl(0, 0%, 29%) |
| 5 | Grey light | $grey-light | hsl(0, 0%, 71%) |
| 6 | Grey lighter | $grey-lighter | hsl(0, 0%, 86%) |
| 7 | White ter | $white-ter | hsl(0, 0%, 96%) |
| 8 | White bis | $white-bis | hsl(0, 0%, 98%) |
bulma_overview.html
