排版辅助类(Typography helpers)

在一个或多个viewport宽度中应用不同的尺寸(size)颜色(color)


尺寸(Size) #

7 种尺寸(size) 可以选择:

Class Font-size
is-size-1 3rem
is-size-2 2.5rem
is-size-3 2rem
is-size-4 1.5rem
is-size-5 1.25rem
is-size-6 1rem
is-size-7 0.75rem

响应式尺寸(Responsive size) #

您可以为每个视口(viewport)宽度选择特定的大小。您只需要将视口宽度附加到size修改器(modifier)即可。

For example, here are the modifiers for $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

3rem

3rem

3rem

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种尺寸使用相同的逻辑。


颜色(Colors) #

你可以给任意元素使用一下 9 种颜色9 灰度: :

Class Color
has-text-white hsl(0, 0%, 100%)
has-text-black hsl(0, 0%, 4%)
has-text-light hsl(0, 0%, 96%)
has-text-dark hsl(0, 0%, 21%)
has-text-primary hsl(171, 100%, 41%)
has-text-info hsl(204, 86%, 53%)
has-text-link hsl(217, 71%, 53%)
has-text-success hsl(141, 71%, 48%)
has-text-warning hsl(48, 100%, 67%)
has-text-danger hsl(348, 100%, 61%)
has-text-black-bis hsl(0, 0%, 7%)
has-text-black-ter hsl(0, 0%, 14%)
has-text-grey-darker hsl(0, 0%, 21%)
has-text-grey-dark hsl(0, 0%, 29%)
has-text-grey hsl(0, 0%, 48%)
has-text-grey-light hsl(0, 0%, 71%)
has-text-grey-lighter hsl(0, 0%, 86%)
has-text-white-ter hsl(0, 0%, 96%)
has-text-white-bis hsl(0, 0%, 98%)

对齐(Alignment) #

你可以使用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

响应式对齐(Responsive Alignment) #

现在,您可以为每个视口宽度设置文本对齐。您只需要将视口宽度附加到对齐修改器即可。

例如,对于 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


文本转换(Text transformation) #

有4种文本转换辅助类可用用来进行文本转换:

Class Transformation
is-capitalized 将每个单词的第一个字符转换为大写
is-lowercase 将所有字符转换为小写
is-uppercase 将所有字符转换为大写
is-italic 将所有字符转换为斜体

文本粗细(Text weight) #

您可以使用5种文本粗细辅助类之一来变换文本粗细:

Class Weight
has-text-weight-light Transforms text weight to light
has-text-weight-normal Transforms text weight to normal
has-text-weight-medium Transforms text weight to medium
has-text-weight-semibold Transforms text weight to semi-bold
has-text-weight-bold Transforms text weight to bold

字体(Font family) #

Since 0.7.4

可以使用5种字体辅助类之一设置文本字体:

Class Family
is-family-sans-serif S将字体设置为 $family-sans-serif
is-family-monospace S将字体设置为 $family-monospace
is-family-primary S将字体设置为 $family-primary
is-family-secondary S将字体设置为 $family-secondary
is-family-code S将字体设置为 $family-code