排版(Typography)

更改文本的大小、重量和其他字体属性

1

1.大小

有7种大小可供选择:

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

2.响应大小

可以为每个视口宽度选择特定的大小。只需将视口宽度附加到“大小”修饰符。

例如,下面是$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-touch 3rem 3rem unchanged unchanged unchanged
is-size-1-tablet unchanged 3rem 3rem 3rem 3rem
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种尺寸中的每一种使用相同的逻辑。

3.对齐

可以使用4个对齐辅助对象之一对齐文本:

Class Alignment
has-text-centered 使文本居中
has-text-justified 使文本对齐
has-text-left 使文本向左对齐
has-text-right 使文本与右侧对齐

4.响应对齐

可以为每个视口宽度不同地对齐文本。只需将视口宽度附加到对齐修改器。

例如,以下是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-touch left-aligned left-aligned unchanged unchanged unchanged
has-text-left-tablet-only unchanged left-aligned unchanged unchanged unchanged
has-text-left-tablet unchanged left-aligned left-aligned left-aligned left-aligned
has-text-left-desktop-only unchanged unchanged left-aligned unchanged unchanged
has-text-left-desktop unchanged unchanged left-aligned left-aligned left-aligned
has-text-left-widescreen-only unchanged unchanged unchanged left-aligned unchanged
has-text-left-widescreen unchanged unchanged unchanged left-aligned left-aligned
has-text-left-fullhd unchanged unchanged unchanged unchanged left-aligned

您可以对4条路线中的每一条使用相同的逻辑。

5.文本转换

可以使用以下4个文本转换辅助对象来转换文本:

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

6.文字粗细

可以使用5个文本权重辅助对象之一变换文本粗细:

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

7.字体

您可以使用以下5种字体系列辅助工具之一更改字体系列:

Class Family
is-family-sans-serif
Sets font family to
is-family-monospace
Sets font family to
is-family-primary
Sets font family to
is-family-secondary
Sets font family to
is-family-code
Sets font family to

返回头部

23222

问题反馈
返回顶部