Chữ
Tài liệu và ví dụ cho các tiện ích văn bản phổ biến để kiểm soát căn chỉnh, bao bọc, trọng lượng và hơn thế nữa.
Căn chỉnh văn bản
Dễ dàng sắp xếp lại văn bản cho các thành phần với các lớp căn chỉnh văn bản. Đối với căn chỉnh đầu, cuối và căn giữa, các lớp đáp ứng có sẵn sử dụng các điểm ngắt độ rộng khung nhìn giống như hệ thống lưới.
Bắt đầu căn chỉnh văn bản trên tất cả các kích thước cửa sổ xem.
Văn bản được căn giữa trên tất cả các kích thước cửa sổ xem.
Văn bản được căn chỉnh cuối trên tất cả các kích thước cửa sổ xem.
Bắt đầu căn chỉnh văn bản trên các cửa sổ xem có kích thước SM (nhỏ) hoặc rộng hơn.
Bắt đầu căn chỉnh văn bản trên các cửa sổ xem có kích thước MD (trung bình) hoặc rộng hơn.
Bắt đầu căn chỉnh văn bản trên khung nhìn có kích thước LG (lớn) hoặc rộng hơn.
Bắt đầu căn chỉnh văn bản trên các cửa sổ xem có kích thước XL (cực lớn) hoặc rộng hơn.
<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>
Gói văn bản và phần tràn
Gói văn bản bằng một .text-wrap
lớp.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Ngăn văn bản gói bằng một .text-nowrap
lớp.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Ngắt từ
Ngăn các chuỗi văn bản dài phá vỡ bố cục các thành phần của bạn bằng cách sử dụng .text-break
để đặt word-wrap: break-word
và word-break: break-word
. Chúng tôi sử dụng word-wrap
thay vì phổ biến overflow-wrap
hơn để hỗ trợ trình duyệt rộng rãi hơn và thêm những thứ không dùng nữa word-break: break-word
để tránh các vấn đề với vùng chứa linh hoạt.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
, nó bị xóa khỏi CSS đã biên dịch RTL của chúng tôi.
Chuyển đổi văn bản
Chuyển đổi văn bản trong các thành phần với các lớp viết hoa văn bản.
Chữ viết thường.
Văn bản viết hoa.
Văn bản CapiTaliZed.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Lưu ý cách .text-capitalize
chỉ thay đổi chữ cái đầu tiên của mỗi từ, để tránh trường hợp của bất kỳ chữ cái nào khác không bị ảnh hưởng.
Cỡ chữ
Nhanh chóng thay đổi font-size
văn bản. Trong khi các lớp tiêu đề của chúng tôi (ví dụ, .h1
- .h6
) áp dụng font-size
, font-weight
và line-height
, các tiện ích này chỉ áp dụng font-size
. Định kích thước cho các tiện ích này phù hợp với các phần tử tiêu đề của HTML, vì vậy khi số lượng tăng lên, kích thước của chúng sẽ giảm.
.fs-1 văn bản
văn bản .fs-2
văn bản .fs-3
văn bản .fs-4
văn bản .fs-5
văn bản .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>
Tùy chỉnh các font-size
s có sẵn của bạn bằng cách sửa đổi $font-sizes
bản đồ Sass.
Độ đậm và độ nghiêng của phông chữ
Nhanh chóng thay đổi font-weight
hoặc font-style
của văn bản với các tiện ích này. font-style
tiện ích được viết tắt là .fst-*
và font-weight
các tiện ích được viết tắt là .fw-*
.
Chữ in đậm.
Văn bản đậm hơn (liên quan đến phần tử mẹ).
Văn bản trọng lượng bình thường.
Văn bản có trọng lượng nhẹ.
Văn bản có trọng lượng nhẹ hơn (liên quan đến phần tử mẹ).
Văn bản in nghiêng.
Văn bản có kiểu phông chữ bình thường
<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>
Chiều cao giữa các dòng
Thay đổi chiều cao dòng bằng .lh-*
các tiện ích.
Đây là một đoạn văn dài được viết để cho thấy chiều cao dòng của một phần tử bị ảnh hưởng như thế nào bởi các tiện ích của chúng tôi. Các lớp được áp dụng cho chính phần tử đó hoặc đôi khi là phần tử cha. Các lớp này có thể được tùy chỉnh khi cần thiết với API tiện ích của chúng tôi.
Đây là một đoạn văn dài được viết để cho thấy chiều cao dòng của một phần tử bị ảnh hưởng như thế nào bởi các tiện ích của chúng tôi. Các lớp được áp dụng cho chính phần tử đó hoặc đôi khi là phần tử cha. Các lớp này có thể được tùy chỉnh khi cần thiết với API tiện ích của chúng tôi.
Đây là một đoạn văn dài được viết để cho thấy chiều cao dòng của một phần tử bị ảnh hưởng như thế nào bởi các tiện ích của chúng tôi. Các lớp được áp dụng cho chính phần tử đó hoặc đôi khi là phần tử cha. Các lớp này có thể được tùy chỉnh khi cần thiết với API tiện ích của chúng tôi.
Đây là một đoạn văn dài được viết để cho thấy chiều cao dòng của một phần tử bị ảnh hưởng như thế nào bởi các tiện ích của chúng tôi. Các lớp được áp dụng cho chính phần tử đó hoặc đôi khi là phần tử cha. Các lớp này có thể được tùy chỉnh khi cần thiết với API tiện ích của chúng tôi.
<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>
Monospace
Thay đổi lựa chọn thành ngăn xếp phông chữ monospace của chúng tôi với .font-monospace
.
Đây là trong monospace
<p class="font-monospace">This is in monospace</p>
Đặt lại màu
Đặt lại màu của văn bản hoặc liên kết với .text-reset
, để nó kế thừa màu từ cha của nó.
Đã tắt tiếng văn bản có liên kết đặt lại .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Trang trí văn bản
Trang trí văn bản trong các thành phần với các lớp trang trí văn bản.
Văn bản này có một dòng bên dưới nó.
Văn bản này có một dòng đi qua nó.
Liên kết này đã bị xóa trang trí văn bản<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>
Sass
Biến
// 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;
Bản đồ
Các tiện ích kích thước phông chữ được tạo từ bản đồ này, kết hợp với API tiện ích của chúng tôi.
$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 tiện ích
Các tiện ích phông chữ và văn bản được khai báo trong API tiện ích của chúng tôi trong scss/_utilities.scss
. Tìm hiểu cách sử dụng API tiện ích.
"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
),