Bootstrap 4 Text/Typography

0
6

Cài đặt mặc định của Bootstrap 4

Bootstrap 4 sử dụng mặc định font-sizelà 16px và của nó line-heightlà 1,5.

Mặc định font-familylà “Helvetica Neue”, Helvetica, Arial, sans-serif.

Ngoài ra, tất cả các <p>phần tử đều có margin-top: 0và margin-bottom: 1rem(16px theo mặc định).


<h1> – <h6>

Bootstrap 4 định kiểu các tiêu đề HTML ( <h1>sang <h6>) với trọng lượng phông chữ đậm hơn và kích thước phông chữ tăng lên:

Thí dụ

<div class="container">
  <h1>h1 Bootstrap heading (2.5rem = 40px)</h1>
  <h2>h2 Bootstrap heading (2rem = 32px)</h2>
  <h3>h3 Bootstrap heading (1.75rem = 28px)</h3>
  <h4>h4 Bootstrap heading (1.5rem = 24px)</h4>
  <h5>h5 Bootstrap heading (1.25rem = 20px)</h5>
  <h6>h6 Bootstrap heading (1rem = 16px)</h6>
</div>

Tiêu đề hiển thị

Hiển thị tiêu đề được sử dụng để nổi bật hơn tiêu đề bình thường (lớn hơn font-size và font-weight nhẹ hơn), và có bốn lớp học để lựa chọn: .display-1.display-2.display-3,.display-4

Thí dụ

<div class="container">
  <h1>Display Headings</h1>
  <p>Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):</p>
  <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>
</div>

<mark>

Bootstrap 4 sẽ tạo kiểu cho <mark>phần tử HTML với màu nền vàng và một số phần đệm:

Thí dụ

<div class="container">
  <h1>Highlight Text</h1>    
  <p>Use the mark element to <mark>highlight</mark> text.</p>
</div>

<abbr>

Bootstrap 4 sẽ tạo kiểu cho <abbr>phần tử HTML với đường viền chấm ở dưới:

Thí dụ

<div class="container">
  <h1>Abbreviations</h1>
  <p>The abbr element is used to mark up an abbreviation or acronym:</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

<blockquote>

Thêm .blockquotelớp vào a <blockquote> khi trích dẫn các khối nội dung từ một nguồn khác:

Thí dụ

<div class="container">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
</div>

<dl>

Bootstrap 4 sẽ tạo kiểu cho <dl>phần tử HTML theo cách sau:

Thí dụ

<div class="container">
  <h1>Description Lists</h1>    
  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>

Description Lists

The dl element indicates a description list:

Coffee
– black hot drink
Milk
– white cold drink

<code>

Bootstrap 4 sẽ tạo kiểu cho <code>phần tử HTML theo cách sau:

Thí dụ

<div class="container">
  <h1>Code Snippets</h1>
  <p>Inline snippets of code should be embedded in the code element:</p>
  <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
</div>

Code Snippets

Inline snippets of code should be embedded in the code element:

The following HTML elements: spansection, and div defines a section in a document.

<kbd>

Bootstrap 4 sẽ tạo kiểu cho <kbd>phần tử HTML theo cách sau:

Thí dụ

<div class="container">
  <h1>Keyboard Inputs</h1>
  <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

<pre>

Bootstrap 4 sẽ tạo kiểu cho <pre>phần tử HTML theo cách sau:

Thí dụ

<div class="container">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>

For multiple lines of code, use the pre element:

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

Các lớp học kiểu chữ khác

Các lớp Bootstrap 4 bên dưới có thể được thêm vào để tạo kiểu cho các phần tử HTML hơn nữa:

Class Description Example
.font-weight-bold Bold text Try it
.font-weight-bolder Bolder text Try it
.font-italic Italic text Try it
.font-weight-light Light weight text Try it
.font-weight-lighter Lighter weight text Try it
.font-weight-normal Normal text Try it
.lead Làm cho một đoạn văn nổi bật Try it
.small Cho biết văn bản nhỏ hơn (được đặt thành 80% kích thước của văn bản gốc) Try it
.text-left Cho biết văn bản căn trái Try it
.text-*-left Cho biết văn bản căn trái trên màn hình nhỏ, vừa, lớn hoặc phóng to Try it
.text-break Ngăn văn bản dài bị vỡ layout Try it
.text-center Cho biết văn bản được căn giữa Try it
.text-*-center Cho biết văn bản được căn giữa trên màn hình nhỏ, vừa, lớn hoặc phóng to Try it
.text-decoration-none Xóa gạch chân khỏi một liên kết Try it
.text-right Cho biết văn bản căn phải Try it
.text-*-right Cho biết văn bản được căn phải trên màn hình nhỏ, vừa, lớn hoặc phóng to Try it
.text-justify Cho biết văn bản được căn chỉnh Try it
.text-monospace Văn bản liền mạch Try it
.text-nowrap Cho biết không có văn bản bao bọc Try it
.text-lowercase Cho biết văn bản viết thường Try it
.text-reset Đặt lại màu của văn bản hoặc liên kết (kế thừa màu từ màu gốc của nó) Try it
.text-uppercase Cho biết văn bản viết hoa Try it
.text-capitalize Cho biết văn bản viết hoa Try it
.initialism Hiển thị văn bản bên trong phần tử <abbr> ở kích thước phông chữ nhỏ hơn một chút Try it
.list-unstyled Loại bỏ kiểu danh sách mặc định và lề trái trên các mục danh sách (hoạt động trên cả <ul> và <ol>). Lớp này chỉ áp dụng cho các mục danh sách con ngay lập tức (để xóa kiểu danh sách mặc định khỏi bất kỳ danh sách lồng nhau nào, hãy áp dụng lớp này cho mọi danh sách lồng nhau) Try it
.list-inline Đặt tất cả các mục trong danh sách trên một dòng (được sử dụng cùng với .list-inline-item trên mỗi phần tử <li>) Try it
.pre-scrollable Làm cho phần tử <pre> có thể cuộn được

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây