IMG-LOGO
× 01. Hướng dẫn cài đặt bootstrap + jquery - học lập trình bằng bootstrap+ Jquery 02. Học bootstrap qua ví dụ 2- Bootstrap 03. Học bootstrap qua ví dụ 3 - Bootstrap 04. Thao tác lên tags html bằng jquery - Bootstrap 05. Xử lý sự kiện trong jquery (events in jquery) - Bootstrap 06. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 1 07. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 2 08. Hướng dẫn học bootstrap qua ví dụ dự án web đồng hồ - bootstrap




Trang Chủ Học Bootstrap Bootstrap 4 Text/Typography

Bootstrap 4 Text/Typography

by GokiSoft.Com - 19:31 12/10/2020 2,937 Lượt Xem

Bootstrap 4 Default Settings

Bootstrap 4 sử dụng mặc định font-size là 16px, và line-height là 1.5.

Mặc định font-family là "Helvetica Neue", Helvetica, Arial, sans-serif.

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


<h1> - <h6>

Bootstrap 4 styles lại các thẻ HTML headings (<h1> - <h6>)  với phông chữ đậm hơn (font-weight) và kích thước phông chữ (font-size) tăng:

Ví dụ



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

h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)


Display Headings

Display headings được sử dụng để nổi bật hơn headings bình thường (font-size lớn hơn và font-weight nhẹ hơn), và có 4 classes để chọn: .display-1.display-2.display-3.display-4

Ví dụ


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

Display 1

Display 2

Display 3

Display 4


<small>

Trong Bootstrap 4 thẻ <small> được sử dụng để tạo một văn bản thứ cấp có font nhẹ hơn trong bất kỳ heading nào:

Ví dụ


<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text

<mark>

Bootstrap 4 có thẻ <mark> dùng để hightlight chữ:

Ví dụ


<p>Dùng thẻ mark để <mark>highlight</mark> chữ.</p>


Dùng thẻ mark để highlight chữ.


<abbr>

Bootstrap 4 có thẻ <abbr> dùng để tạo border dạng dots bên dưới chữ:

Ví dụ


<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>


WHO được thành lập năm 1948.


<blockquote>

Add class .blockquote trong thẻ <blockquote> khi trích dẫn các khối nội dung từ một nguồn khác:

Ví dụ


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

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.


From WWF's website

<dl>

Bootstrap 4 có thẻ<dl> được biểu diễn như sau:

Ví dụ


<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink

<code>

Bootstrap 4 có thẻ <code> được biểu diễn như sau:

Ví dụ


<p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>


Các thẻ: spansection, và div định nghĩa một phần trong tài liệu HTML.


<kbd>

Bootstrap 4 có thẻ <kbd> được biểu diễn như sau:

Ví dụ


<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>


Use ctrl + p to open the Print dialog box.


<pre>

Bootstrap 4 có thẻ <pre> được biểu diễn như sau:

Ví dụ

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

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


Typography Classes

Các class trong Bootstrap 4 dưới đây có thể thêm vào các thẻ HTML:

ClassMô tả
.font-weight-boldBôi đậm chữ
.font-weight-bolderBolder text
.font-italicChữ in nghiêng

.font-weight-lightChữ nhẹ
.font-weight-lighterChữ nhẹ hơn
.font-weight-normalChữ bình thường
.leadLàm cho một đoạn văn nổi bật

.smallLàm chữ nhỏ (80% đối với kích thước parent)
.text-leftChữ sang trái
.text-*-leftChữ sang trái theo kích cỡ màn hình xs, sm, lg, xlarge
.text-breakNgăn chặn văn bản dài từ phá vỡ bố cục

.text-centerChữ vào giữa
.text-*-centerChữ vào giữa theo kích cỡ màn hình xs, sm, lg, xlarge

.text-decoration-noneBỏ gạch chân link
.text-rightChữ sang phải
.text-*-rightChữ sang phải theo kích cỡ màn hình xs, sm, lg, xlarge

.text-justifyJustified chữ
.text-monospaceChữ monospaced
.text-nowrapChữ no wrap
.text-lowercaseChữ lowercase
.text-resetReset màu chữ hoặc link (kế thừa màu sắc từ parent của nó)
.text-uppercaseChữ uppercase
.text-capitalizeChữ cái đầu viết hoa
.initialismHiển thị chữ trong thẻ <abbr> ở cỡ chữ nhỏ hơn một chút
.list-unstyledLoại bỏ list-style mặc định và left margin ở list items (có tác dụng với <ul> và <ol>). Class này chỉ áp dụng cho list items con của thẻ (để loại bỏ list-style mặc định trong bất cử nested lists - list items lồng nhau, hãy áp dụng class này đối với mọi nested lists - list item lồng nhau)
.list-inlineĐặt mọi list items vào một dòng duy nhất (dùng class .list-inline-item ở từng thẻ <li>)
.pre-scrollableKhiến thẻ <pre> scrollable

Bình luận



Chia sẻ từ lớp học

Đã sao chép!!!