Source

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 giả định là 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-base$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.

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, không phải hàng hóa luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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>

.mark.smallcác lớp cũng có sẵn để áp dụng các kiểu giống nhau <mark><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><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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

Ai đó nổi tiếng trong Tiêu đề nguồn
<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

Ai đó nổi tiếng trong Tiêu đề nguồn
<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

Ai đó nổi tiếng trong Tiêu đề nguồn
<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer moltie lorem tại massa
  • Facilisis trong pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat tại
  • Faucibus porta lacus fringilla vel
  • Aenean ngồi amet erat nunc
  • Bỏ qua lorem porttitor
<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</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-inline.list-inline-item.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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ữ.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem num peit.

Donec id elit non mi porta gravida tại eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Cụm từ bị cắt ngắn được cắt bớt
Fusce dapibus, Tellus ac cursus rowo, rùa bò mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Làm tổ
Danh sách định nghĩa lồng nhau
Aenean posuere, tra tấn sed cursus feugiat, nunc augue blandit nunc.
<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Kiểu chữ đáp ứng

Kiểu chữ đáp ứng đề cập đến việc mở rộng văn bản và các thành phần bằng cách điều chỉnh đơn giản phần tử gốc font-sizetrong một loạt các truy vấn phương tiện. Bootstrap không làm điều này cho bạn, nhưng nó khá dễ dàng để thêm nếu bạn cần.

Đây là một ví dụ về nó trong thực tế. Chọn bất kỳ font-sizes và truy vấn phương tiện nào bạn muốn.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}