Kiểu chữ

Tài liệu và ví dụ về kiểu chữ Bootstrap, bao gồm cài đặt chung, tiêu đề, văn bản nội dung, danh sách, v.v.

Trên trang này

Thiết lập toàn cầu

Bootstrap thiết lập các kiểu hiển thị, kiểu chữ và liên kết toàn cầu cơ bản. Khi cần kiểm soát nhiều hơn, hãy xem các lớp tiện ích văn bản .

Sử dụng ngăn xếp phông chữ gốc chọn lọc tốt nhất font-familycho từng hệ điều hành và thiết bị.
Đối với thang loại toàn diện và dễ tiếp cận hơn, chúng tôi sử dụng gốc mặc định của trình duyệt font-size(thường là 16px) để khách truy cập có thể tùy chỉnh các mặc định của trình duyệt nếu cần.
Sử dụng các thuộc tính $font-family-base, $font-size-basevà $line-height-baselàm cơ sở đánh máy của chúng tôi áp dụng cho <body>.
Đặt màu liên kết toàn cầu qua $link-color.
Sử dụng $body-bgđể đặt background-colortrên <body>( #ffftheo mặc định).

Các kiểu này có thể được tìm thấy bên trong _reboot.scssvà các biến toàn cục được định nghĩa trong _variables.scss. Đảm bảo đã cài $font-size-baseđặt rem.

Đề mục

Tất cả các tiêu đề HTML, <h1>thông qua <h6>, đều có sẵn.

Phần mở đầu	Thí dụ
`<h1></h1>`	h1. Tiêu đề Bootstrap
`<h2></h2>`	h2. Tiêu đề Bootstrap
`<h3></h3>`	h3. Tiêu đề Bootstrap
`<h4></h4>`	h4. Tiêu đề Bootstrap
`<h5></h5>`	h5. Tiêu đề Bootstrap
`<h6></h6>`	h6. Tiêu đề Bootstrap

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1thông qua .h6các lớp cũng có sẵn, khi bạn muốn khớp với kiểu phông chữ của tiêu đề nhưng không thể sử dụng phần tử HTML được liên kết.

h1. Tiêu đề Bootstrap

h2. Tiêu đề Bootstrap

h3. Tiêu đề Bootstrap

h4. Tiêu đề Bootstrap

h5. Tiêu đề Bootstrap

h6. Tiêu đề Bootstrap

html

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Tùy chỉnh tiêu đề

Sử dụng các lớp tiện ích đi kèm để tạo lại văn bản tiêu đề phụ nhỏ từ Bootstrap 3.

Tiêu đề hiển thị lạ mắt Với văn bản phụ bị mờ

html

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Hiển thị các tiêu đề

Các phần tử tiêu đề truyền thống được thiết kế để hoạt động tốt nhất trong phần nội dung trang của bạn. Khi bạn cần một tiêu đề nổi bật, hãy xem xét sử dụng một tiêu đề hiển thị — một kiểu tiêu đề lớn hơn, cố định hơn một chút.

Hiển thị 1

Hiển thị 2

Hiển thị 3

Hiển thị 4

Hiển thị 5

Hiển thị 6

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Các tiêu đề hiển thị được định cấu hình thông qua $display-font-sizesbản đồ Sass và hai biến, $display-font-weightvà $display-line-height.

Các tiêu đề hiển thị có thể tùy chỉnh thông qua hai biến $display-font-familyvà $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Chỉ huy

Làm cho một đoạn văn nổi bật bằng cách thêm vào .lead.

Đây là một đoạn dẫn. Nó nổi bật so với các đoạn văn thông thường.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Các phần tử văn bản nội tuyến

Tạo kiểu cho các phần tử HTML5 nội tuyến phổ biến.

Bạn có thể sử dụng thẻ đánh dấu đểĐiểm nổi bậtchữ.

~~Dòng văn bản này được coi là văn bản đã xóa.~~

~~Dòng văn bản này được coi là không còn chính xác nữa.~~

Dòng văn bản này được coi như một phần bổ sung cho tài liệu.

Dòng văn bản này sẽ hiển thị như được gạch chân.

Dòng văn bản này được coi là bản in đẹp.

Dòng này được hiển thị dưới dạng văn bản in đậm.

Dòng này được hiển thị dưới dạng văn bản in nghiêng.

html

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Hãy lưu ý rằng những thẻ đó nên được sử dụng cho mục đích ngữ nghĩa:

đại diện cho văn bản được đánh dấu hoặc đánh dấu cho mục đích tham khảo hoặc ký hiệu.
đại diện cho các bình luận bên lề và chữ in nhỏ, như bản quyền và văn bản pháp lý.
<s>đại diện cho phần tử không còn phù hợp hoặc không còn chính xác.
đại diện cho một khoảng văn bản nội dòng sẽ được hiển thị theo cách cho biết rằng nó có chú thích phi văn bản.

Nếu bạn muốn tạo kiểu cho văn bản của mình, bạn nên sử dụng các lớp sau để thay thế:

.marksẽ áp dụng các phong cách tương tự như .
.smallsẽ áp dụng các phong cách tương tự như .
.text-decoration-underlinesẽ áp dụng các phong cách tương tự như .
.text-decoration-line-throughsẽ áp dụng các phong cách tương tự như <s>.

Mặc dù không được hiển thị ở trên, hãy thoải mái sử dụng và trong HTML5. được dùng để làm nổi bật các từ hoặc cụm từ mà không truyền tải thêm tầm quan trọng, trong khi chủ yếu là dùng để nói, thuật ngữ kỹ thuật, v.v.

Tiện ích văn bản

Thay đổi căn chỉnh văn bản, chuyển đổi, kiểu, trọng lượng, chiều cao dòng, trang trí và màu sắc với các tiện ích văn bản và tiện ích màu của chúng tôi .

Các từ viết tắt

Triển khai cách điệu phần tử của HTML <abbr>cho các từ viết tắt và từ viết tắt để hiển thị phiên bản mở rộng khi di chuột. Các từ viết tắt có gạch chân mặc định và có được con trỏ trợ giúp để cung cấp ngữ cảnh bổ sung khi di chuột và cho người dùng công nghệ hỗ trợ.

Thêm .initialismvào một chữ viết tắt cho kích thước phông chữ nhỏ hơn một chút.

attr

HTML

html

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Dấu ngoặc kép

Để trích dẫn các khối nội dung từ một nguồn khác trong tài liệu của bạn. Bao <blockquote class="blockquote">quanh bất kỳ HTML nào dưới dạng trích dẫn.

Một câu trích dẫn nổi tiếng, được chứa trong một phần tử blockquote.

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Đặt tên nguồn

Đặc tả HTML yêu cầu thuộc tính blockquote phải được đặt bên ngoài <blockquote>. Khi cung cấp thuộc tính, hãy bao bọc của bạn <blockquote>trong một <figure>và sử dụng một <figcaption>hoặc một phần tử cấp khối (ví dụ :) với .blockquote-footerlớp. Hãy chắc chắn rằng cả tên của công việc nguồn <cite>.

Một câu trích dẫn nổi tiếng, được chứa trong một phần tử blockquote.

html

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Căn chỉnh

Sử dụng các tiện ích văn bản nếu cần để thay đổi căn chỉnh của blockquote của bạn.

Một câu trích dẫn nổi tiếng, được chứa trong một phần tử blockquote.

html

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Một câu trích dẫn nổi tiếng, được chứa trong một phần tử blockquote.

html

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Danh sách

Chưa được xếp lớp

Loại bỏ lề trái và lề mặc định list-styletrên các mục danh sách (chỉ dành cho phần con ngay lập tức). Điều này chỉ áp dụng cho các mục danh sách con ngay lập tức , có nghĩa là bạn cũng sẽ cần thêm lớp cho bất kỳ danh sách lồng nhau nào.

Đây là một danh sách.
Nó xuất hiện hoàn toàn không được phân loại.
Về mặt cấu trúc, nó vẫn là một danh sách.
Tuy nhiên, phong cách này chỉ áp dụng cho các phần tử con ngay lập tức.
Danh sách lồng nhau:
- không bị ảnh hưởng bởi phong cách này
- sẽ vẫn hiển thị một dấu đầu dòng
- và có lề trái thích hợp
Điều này vẫn có thể hữu ích trong một số trường hợp.

html

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

Nội tuyến

Loại bỏ dấu đầu dòng của danh sách và áp dụng một số ánh sáng marginvới sự kết hợp của hai lớp, .list-inlinevà .list-inline-item.

Đây là một mục danh sách.
Và một cái khác.
Nhưng chúng được hiển thị nội tuyến.

html

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

Căn chỉnh danh sách mô tả

Căn chỉnh các thuật ngữ và mô tả theo chiều ngang bằng cách sử dụng các lớp được xác định trước của hệ thống lưới của chúng tôi (hoặc các mixin ngữ nghĩa). Đối với các thuật ngữ dài hơn, bạn có thể tùy chọn thêm một .text-truncatelớp để cắt bớt văn bản bằng dấu chấm lửng.

Danh sách mô tả

Một danh sách mô tả là hoàn hảo để xác định các thuật ngữ.

Kỳ hạn

Định nghĩa cho thuật ngữ.

Và một số văn bản định nghĩa trình giữ chỗ khác.

Một thuật ngữ khác

Định nghĩa này ngắn gọn, vì vậy không có đoạn văn bổ sung hoặc bất cứ điều gì.

Cụm từ bị cắt ngắn được cắt bớt

Điều này có thể hữu ích khi không gian chật hẹp. Thêm dấu chấm lửng ở cuối.

Làm tổ

Danh sách định nghĩa lồng nhau: Tôi nghe nói bạn thích danh sách định nghĩa. Hãy để tôi đặt một danh sách định nghĩa bên trong danh sách định nghĩa của bạn.

html

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Kích thước phông chữ đáp ứng

Trong Bootstrap 5, chúng tôi đã bật kích thước phông chữ đáp ứng theo mặc định, cho phép văn bản mở rộng quy mô tự nhiên hơn trên các kích thước thiết bị và khung nhìn. Hãy xem trang RFS để tìm hiểu cách thức hoạt động của nó.

Sass

Biến

Các tiêu đề có một số biến chuyên dụng để định cỡ và giãn cách.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Các phần tử kiểu chữ khác được đề cập ở đây và trong Khởi động lại cũng có các biến chuyên dụng.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Mixin

Không có kết hợp dành riêng cho kiểu chữ, nhưng Bootstrap sử dụng Định cỡ phông chữ đáp ứng (RFS) .

Kiểu chữ

Thiết lập toàn cầu

Đề mục

Tùy chỉnh tiêu đề

Tiêu đề hiển thị lạ mắt Với ​​văn bản phụ bị mờ

Hiển thị các tiêu đề

Chỉ huy

Các phần tử văn bản nội tuyến

Tiện ích văn bản

Các từ viết tắt

Dấu ngoặc kép

Đặt tên nguồn

Căn chỉnh

Danh sách

Chưa được xếp lớp

Nội tuyến

Căn chỉnh danh sách mô tả

Kích thước phông chữ đáp ứng

Sass

Biến

Mixin

Tiêu đề hiển thị lạ mắt Với văn bản phụ bị mờ