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 bao gồm 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 khi 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 abackground-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. Tiêu đề Bootstrap |
|
|
h2. Tiêu đề Bootstrap |
|
|
h3. Tiêu đề Bootstrap |
|
|
h4. Tiêu đề Bootstrap |
|
|
h5. Tiêu đề Bootstrap |
|
|
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.
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>.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.
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.
<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.
<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.
<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-inlinevà .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>Kích thước phông chữ đáp ứng
Bootstrap v4.3 đi kèm với tùy chọn cho phép 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ó .