有 7 种大小 可供选择
赞助
排版助手
更改文本的 大小、粗细和其他字体属性
大小 #
| 类名 | 字体大小 | 大小 |
|---|---|---|
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
|
示例 |
响应式大小 #
您可以为每个 视口宽度选择 特定的 大小。 您只需将 视口宽度 附加到大小修饰符。
例如，以下是 $size-1 的修饰符
| 类名 | 手机 最大 768px |
平板769px 和 1023px 之间 |
桌面1024px 和 1215px 之间 |
宽屏1216px 和 1407px 之间 |
全高清1408px 及以上 |
|---|---|---|---|---|---|
is-size-1-mobile |
|
不变 | 不变 | 不变 | 不变 |
is-size-1-touch |
|
|
不变 | 不变 | 不变 |
is-size-1-tablet |
不变 |
|
|
|
|
is-size-1-desktop |
不变 | 不变 |
|
|
|
is-size-1-widescreen |
不变 | 不变 | 不变 |
|
|
is-size-1-fullhd |
不变 | 不变 | 不变 | 不变 |
|
您可以对 7 种大小 中的每一种使用相同的逻辑。
对齐方式 #
您可以使用 4 种对齐助手 之一对齐文本
| 类名 | 对齐方式 |
|---|---|
has-text-centered |
使文本 居中 |
has-text-justified |
使文本 两端对齐 |
has-text-left |
使文本与 左侧 对齐 |
has-text-right |
使文本与 右侧 对齐 |
响应式对齐方式 #
您可以为每个 视口宽度 以不同的方式 对齐文本。 只需将 视口宽度 附加到对齐修饰符。
例如，以下是 has-text-left 的修饰符
| 类名 | 手机 最大 768px |
平板769px 和 1023px 之间 |
桌面1024px 和 1215px 之间 |
宽屏1216px 和 1407px 之间 |
全高清1408px 及以上 |
|---|---|---|---|---|---|
has-text-left-mobile |
左对齐 | 不变 | 不变 | 不变 | 不变 |
has-text-left-touch |
左对齐 | 左对齐 | 不变 | 不变 | 不变 |
has-text-left-tablet-only |
不变 | 左对齐 | 不变 | 不变 | 不变 |
has-text-left-tablet |
不变 | 左对齐 | 左对齐 | 左对齐 | 左对齐 |
has-text-left-desktop-only |
不变 | 不变 | 左对齐 | 不变 | 不变 |
has-text-left-desktop |
不变 | 不变 | 左对齐 | 左对齐 | 左对齐 |
has-text-left-widescreen-only |
不变 | 不变 | 不变 | 左对齐 | 不变 |
has-text-left-widescreen |
不变 | 不变 | 不变 | 左对齐 | 左对齐 |
has-text-left-fullhd |
不变 | 不变 | 不变 | 不变 | 左对齐 |
您可以对 4 种对齐方式 中的每一种使用相同的逻辑。
文本转换 #
您可以使用 4 种文本转换助手 之一来转换文本
| 类名 | 转换 |
|---|---|
is-capitalized |
将每个单词的 第一个字符 转换为 大写 |
is-lowercase |
将 所有字符 转换为 小写 |
is-uppercase |
将 所有字符 转换为 大写 |
is-italic |
将 所有字符 转换为 斜体 |
is-underlined
|
下划线 文本 |
文本粗细 #
您可以使用 5 种文本粗细助手 之一来转换文本粗细
| 类名 | 粗细 |
|---|---|
has-text-weight-light |
将文本粗细转换为 细体 |
has-text-weight-normal |
将文本粗细转换为 正常 |
has-text-weight-medium |
将文本粗细转换为 中等 |
has-text-weight-semibold |
将文本粗细转换为 半粗体 |
has-text-weight-bold |
将文本粗细转换为 粗体 |
has-text-weight-extrabold |
将文本粗细转换为 特粗体 |
字体系列 #
您可以使用 5 种字体系列助手 之一来更改字体系列
| 类名 | 系列 |
|---|---|
is-family-sans-serif
|
将字体系列设置为 $family-sans-serif |
is-family-monospace
|
将字体系列设置为 $family-monospace |
is-family-primary
|
将字体系列设置为 $family-primary |
is-family-secondary
|
将字体系列设置为 $family-secondary |
is-family-code
|
将字体系列设置为 $family-code |
