文本
用於控制對齊、換行、粗細等的常用文本實用程序的文檔和示例。
文本對齊
使用文本對齊類輕鬆將文本重新對齊到組件。對於開始、結束和中心對齊,可以使用與網格系統使用相同視口寬度斷點的響應類。
在所有視口尺寸上開始對齊文本。
在所有視口大小上居中對齊文本。
在所有視口大小上結束對齊的文本。
在尺寸為 SM(小)或更寬的視口上開始對齊文本。
在尺寸為 MD(中)或更寬的視口上開始對齊文本。
在 LG(大)或更寬的視口上開始對齊文本。
在 XL(特大)或更寬的視口上開始對齊文本。
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>
文本換行和溢出
用.text-wrap
類包裝文本。
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
防止文本用.text-nowrap
類換行。
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
斷字
.text-break
使用to setword-wrap: break-word
和防止長字符串破壞組件的佈局word-break: break-word
。我們使用word-wrap
而不是更常見overflow-wrap
的更廣泛的瀏覽器支持,並添加不推薦使用word-break: break-word
以避免彈性容器問題。
嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
從我們的 RTL 編譯的 CSS 中刪除。
文本變換
使用文本大寫類轉換組件中的文本。
小寫文本。
大寫文本。
大寫文本。
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
請注意如何.text-capitalize
只更改每個單詞的第一個字母,而不影響任何其他字母的大小寫。
字體大小
快速更改font-size
文本。雖然我們的標題類(例如.h1
– .h6
)適用font-size
、font-weight
和line-height
,但這些實用程序僅適用於font-size
。這些實用程序的大小與 HTML 的標題元素相匹配,因此隨著數量的增加,它們的大小會減小。
.fs-1 文本
.fs-2 文本
.fs-3 文本
.fs-4 文本
.fs-5 文本
.fs-6 文本
<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>
font-size
通過修改$font-sizes
Sass 映射自定義您的可用s。
字體粗細和斜體
使用這些實用程序快速更改文本的font-weight
或font-style
。font-style
實用程序縮寫為.fst-*
並且font-weight
實用程序縮寫為.fw-*
。
粗體文字。
粗體粗細文本(相對於父元素)。
正常重量文本。
輕量級文本。
較輕的文本(相對於父元素)。
斜體文字。
具有正常字體樣式的文本
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>
線高
.lh-*
使用實用程序更改行高。
這是一個很長的段落,用來展示元素的行高如何受我們的實用程序影響。類應用於元素本身或有時應用於父元素。這些類可以根據需要使用我們的實用程序 API 進行定制。
這是一個很長的段落,用來展示元素的行高如何受我們的實用程序影響。類應用於元素本身或有時應用於父元素。這些類可以根據需要使用我們的實用程序 API 進行定制。
這是一個很長的段落,用來展示元素的行高如何受我們的實用程序影響。類應用於元素本身或有時應用於父元素。這些類可以根據需要使用我們的實用程序 API 進行定制。
這是一個很長的段落,用來展示元素的行高如何受我們的實用程序影響。類應用於元素本身或有時應用於父元素。這些類可以根據需要使用我們的實用程序 API 進行定制。
<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
等寬
使用 .將選擇更改為我們的等寬字體堆棧.font-monospace
。
這是在等空間
<p class="font-monospace">This is in monospace</p>
重置顏色
用 重置文本或鏈接的顏色.text-reset
,以便它從其父級繼承顏色。
帶有重置鏈接的靜音文本。
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
文字裝飾
使用文本裝飾類裝飾組件中的文本。
<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
薩斯
變量
// stylelint-disable value-keyword-case
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base: var(--#{$variable-prefix}font-sans-serif);
$font-family-code: var(--#{$variable-prefix}font-monospace);
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root: null;
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-size-sm: $font-size-base * .875;
$font-size-lg: $font-size-base * 1.25;
$font-weight-lighter: lighter;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;
$font-weight-bolder: bolder;
$font-weight-base: $font-weight-normal;
$line-height-base: 1.5;
$line-height-sm: 1.25;
$line-height-lg: 2;
$h1-font-size: $font-size-base * 2.5;
$h2-font-size: $font-size-base * 2;
$h3-font-size: $font-size-base * 1.75;
$h4-font-size: $font-size-base * 1.5;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base;
地圖
字體大小的實用程序是從這張地圖生成的,並結合我們的實用程序 API。
$font-sizes: (
1: $h1-font-size,
2: $h2-font-size,
3: $h3-font-size,
4: $h4-font-size,
5: $h5-font-size,
6: $h6-font-size
);
實用程序 API
字體和文本實用程序在我們的實用程序 API 中聲明scss/_utilities.scss
。了解如何使用實用程序 API。
"font-family": (
property: font-family,
class: font,
values: (monospace: var(--#{$variable-prefix}font-monospace))
),
"font-size": (
rfs: true,
property: font-size,
class: fs,
values: $font-sizes
),
"font-style": (
property: font-style,
class: fst,
values: italic normal
),
"font-weight": (
property: font-weight,
class: fw,
values: (
light: $font-weight-light,
lighter: $font-weight-lighter,
normal: $font-weight-normal,
bold: $font-weight-bold,
bolder: $font-weight-bolder
)
),
"line-height": (
property: line-height,
class: lh,
values: (
1: 1,
sm: $line-height-sm,
base: $line-height-base,
lg: $line-height-lg,
)
),
"text-align": (
responsive: true,
property: text-align,
class: text,
values: (
start: left,
end: right,
center: center,
)
),
"text-decoration": (
property: text-decoration,
values: none underline line-through
),
"text-transform": (
property: text-transform,
class: text,
values: lowercase uppercase capitalize
),
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
nowrap: nowrap,
)
),
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),