in English

Kiểu chữ

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

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-colorvà chỉ áp dụng gạch chân liên kết trên :hover.
  • Sử dụng $body-bgđể đặt a 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

<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ờ 

<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 cân nhắc sử dụng một tiêu đề hiển thị — một kiểu tiêu đề lớn hơn, cố chấp hơn một chút. Hãy nhớ rằng các tiêu đề này không phản hồi theo mặc định, nhưng bạn có thể bật kích thước phông chữ đáp ứng .

Hiển thị 1
Hiển thị 2
Hiển thị 3
Hiển thị 4 
<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>

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.

<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.

<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>

.markvà .smallcác lớp cũng có sẵn để áp dụng các kiểu giống nhau <mark>và <small>đồng thời tránh bất kỳ hàm ý ngữ nghĩa không mong muốn nào mà các thẻ sẽ mang lại.

Mặc dù không được hiển thị ở trên, hãy thoải mái sử dụng <b>và <i>trong HTML5. <b>đượ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 <i>chủ yếu là về giọng nói, thuật ngữ kỹ thuật, v.v.

Tiện ích văn bản

Thay đổi căn chỉnh, chuyển đổi, kiểu, độ đậm và màu văn bản bằng 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ó 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

<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.

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

Đặt tên nguồn

Thêm một <footer class="blockquote-footer">để xác định nguồn. Gộp tên của công việc nguồn vào <cite>.

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

Ai đó nổi tiếng trong Tiêu đề nguồn 
<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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.

Ai đó nổi tiếng trong Tiêu đề nguồn 
<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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

Ai đó nổi tiếng trong Tiêu đề nguồn 
<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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.
<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.
<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. 
<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

Kể từ v4.3.0, Bootstrap đi kèm với tùy chọn kích hoạt kích thước phông chữ đáp ứng, 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. RFS có thể được kích hoạt bằng cách thay đổi $enable-responsive-font-sizesbiến Sass thành truevà biên dịch lại Bootstrap.

Để hỗ trợ RFS , chúng tôi sử dụng hỗn hợp Sass để thay thế các font-sizethuộc tính bình thường của chúng tôi. Kích thước phông chữ đáp ứng sẽ được biên dịch thành calc()các hàm với sự kết hợp của remvà các đơn vị khung nhìn để kích hoạt hành vi chia tỷ lệ đáp ứng. Thông tin thêm về RFS và cấu hình của nó có thể được tìm thấy trên kho lưu trữ GitHub của nó .