有7种大小可供选择:
排版(Typography)
更改文本的大小、重量和其他字体属性
1
1.大小
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
|
FullHD1408px 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
|
FullHD1408px 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 |