排版助手

在一个或多个视口宽度中应用不同的大小或宽度

有 7 种尺寸 可供选择:

您可以为每个视口宽度选择特定的尺寸，您只需附加 视口宽度 到尺寸修饰符上。

例如，这是 $size-1 的修饰符：

Class	Mobile Up to `768px`	Tablet Between `769px` and `1023px`	Desktop Between `1024px` and `1215px`	Widescreen Between `1216px` and `1407px`	FullHD `1408px` and above
`is-size-1-mobile`	`3rem`	unchanged	unchanged	unchanged	unchanged
`is-size-1-tablet`	unchanged	`3rem`	unchanged	unchanged	unchanged
`is-size-1-touch`	`3rem`	`3rem`	unchanged	unchanged	unchanged
`is-size-1-desktop`	unchanged	unchanged	`3rem`	`3rem`	`3rem`
`is-size-1-widescreen`	unchanged	unchanged	unchanged	`3rem`	`3rem`
`is-size-1-fullhd`	unchanged	unchanged	unchanged	unchanged	`3rem`

您可以对 7种尺寸以此类推。

您可以为任何元素设置 9种颜色，或者 9种灰色。

您可以使用 4种对齐类 来使文本对齐

Class	Alignment
`has-text-centered`	Makes the text centered 居中
`has-text-justified`	Makes the text justified 两端对齐
`has-text-left`	Makes the text aligned to the left 左对齐
`has-text-right`	Makes the text aligned to the right 右对齐

您现在可以为每个视口使用不同的 对齐文本，您只需将 视口宽度 附加到对齐修饰符即可。

例如，这是 has-text-left 的修饰符写法：

Class	Mobile Up to `768px`	Tablet Between `769px` and `1023px`	Desktop Between `1024px` and `1215px`	Widescreen Between `1216px` and `1407px`	FullHD `1408px` and above
`has-text-left-mobile`	left-aligned	unchanged	unchanged	unchanged	unchanged
`has-text-left-tablet`	unchanged	left-aligned	left-aligned	left-aligned	left-aligned
`has-text-left-tablet-only`	unchanged	left-aligned	unchanged	unchanged	unchanged
`has-text-left-touch`	left-aligned	left-aligned	unchanged	unchanged	unchanged
`has-text-left-desktop`	unchanged	unchanged	left-aligned	left-aligned	left-aligned
`has-text-left-desktop-only`	unchanged	unchanged	left-aligned	unchanged	unchanged
`has-text-left-widescreen`	unchanged	unchanged	unchanged	left-aligned	left-aligned
`has-text-left-widescreen-only`	unchanged	unchanged	unchanged	left-aligned	unchanged
`has-text-left-fullhd`	unchanged	unchanged	unchanged	unchanged	left-aligned

您可以使用 4种文本转换辅助类 来转换文本：

您可以使用 4种字间距类来修改字间距

Class	Weight
`has-text-weight-light`	Transforms text weight to light 300宽
`has-text-weight-normal`	Transforms text weight to normal 400宽
`has-text-weight-semibold`	Transforms text weight to semi-bold 600宽
`has-text-weight-bold`	Transforms text weight to bold 700宽

这是一个 开源项目. 错别字? Or 有疑问? 在GitHub上改进这个页面。

Bulma Partners

Check out their products!