Bulma - 响应式设计和颜色

描述

响应式设计规定网站应该在从宽屏显示器到移动电话的各种设备上都能良好显示。Bulma是一个移动友好的开发框架，可以与大型、小型和中型设备结合使用。因此，它被称为移动优先框架。

默认情况下，Bulma 指定移动设备上的垂直阅读，并包含以下几点：

Bulma 包含五个断点：

Bulma 包含 9 个响应式混合器：

您可以通过将$widescreen和$fullhd断点设置为false值来禁用它们。

//Disabling the widescreen breakpoint
$widescreen-enabled: false

//Disabling the fullhd breakpoint
$fullhd-enabled: false

Bulma 元素和组件包含不同类型的颜色变体，语法为.is-$color（例如：is-info、is-success 等）。

下表显示了不同类型的颜色及其反转值：

序号	颜色	变量	值	计算值	反转值	计算反转值
1	白色	$white	$white	hsl(0, 0%, 100%)	$black	hsl(0, 0%, 4%)
2	黑色	$black	$black	hsl(0, 0%, 4%)	$white	hsl(0, 0%, 100%)
3	浅色	$light	$white-ter	hsl(0, 0%, 96%)	$grey-darker	hsl(0, 0%, 21%)
4	深色	$dark	$grey-darker	hsl(0, 0%, 21%)	$white-ter	hsl(0, 0%, 96%)
5	主要颜色	$primary	$turquoise	hsl(171, 100%, 41%)	#fff	#fff
6	链接颜色	$link	$blue	hsl(217, 71%, 53%)	#fff	#fff
7	信息颜色	$info	$cyan	hsl(204, 86%, 53%)	#fff	#fff
8	成功颜色	$success	$green	hsl(141, 71%, 48%)	#fff	#fff
9	警告颜色	$warning	$yellow	hsl(48, 100%, 67%)	rgba(0, 0, 0, 0.7)	rgba(0, 0, 0, 0.7)
10	危险颜色	$danger	$red	hsl(348, 100%, 61%)	#fff	#fff

Bulma 提供了介于黑色和白色之间的灰色阴影，如下所示：

bulma_overview.htm

打印页面