Typography Bootstrap 4

Trong bài viết này chúng ta sẽ cùng tìm hiểu về các định kiểu văn bản cơ bản trong Bootstrap 4, các cài đặt mặc định về văn bản của Bootstrap, các thẻ h và nhiều định dạng khác.

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

  • Bootstrap 4 sử dụng font-size mặc định là 15, line-height là 1.5.
  • font-family mặc định là “Helvetica Neue”, Helvetica, Arial, sans-serif.
  • Tất cả các phần tử của <p> đều có margin-top: 0 và margin-bottom: 1rem (mặc định là 16px).

Typography trong Bootstrap

  • Cài đặt mặc định của Bootstrap 4
  • Các thẻ h1 đến h6
  • Thẻ display heading
  • Thẻ small
  • Thẻ mark
  • Thẻ abbr
  • Thẻ blockquote
  • Thẻ dl
  • Thẻ code
  • Thẻ kbd
  • Thẻ pre
  • Một cố class định kiểu khác trong Bootstrap 4

Các thẻ h1 đến h6

Bootstrap 4 sử dụng các thẻ heading như HTML (h1 đến h6) với font chữ đậm hơn và kích thước lớn hơn:

  • h1 (2.5rem = 40px)
  • h2 (2rem = 32px)
  • h3 (1.75rem = 28px)
  • h4 (1.5rem = 24px)
  • h5 (1.25rem = 20px)
  • h6 (1rem = 16px)

Cách sử dụng thẻ h này tương tự như trên HTML:

  <h1>Nội dung cần làm nổi bật</h1>
  <h2>Quantrimang.com</h2>
  <h3>Quantrimang.com</h3>
  <h4>Quantrimang.com</h4>
  <h5>Quantrimang.com</h5>
  <h6>Quantrimang.com</h6>

Bạn có thể chạy file html đầy đủ này để xem các thẻ h trong Bootstrap sẽ như thế nào:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Thẻ H</h1>
  <p>Ví dụ về thẻ h:</p>
  <h1>Quantrimang.com</h1>
  <h2>Quantrimang.com</h2>
  <h3>Quantrimang.com</h3>
  <h4>Quantrimang.com</h4>
  <h5>Quantrimang.com</h5>
  <h6>Quantrimang.com</h6>
</div>

</body>
</html>

Ta có kết quả như sau:

Thẻ display heading

Các thẻ display heading được sử dụng khi cần làm nổi bật nội dung hơn nữa. Vì so với thẻ h bình thường, nó có font-size lớn hơn, font-weight mảnh hơn và có 4 class để chọn: .display-1, .display-2, .display-3, .display-4.

Để sử dụng các class này bạn sẽ dùng đoạn code như sau trong phần <body>:

 <h1 class="display-1">Quantrimang.com</h1>
 <h1 class="display-2">Quantrimang.com</h1>
 <h1 class="display-3">Quantrimang.com</h1>
 <h1 class="display-4">Quantrimang.com</h1>

Khi đặt trong file HTML đầy đủ như dưới đây:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Thẻ display heading</h1>
  <p>Ví dụ về thẻ display heading:</p>
  <h1 class="display-1">Quantrimang.com</h1>
  <h1 class="display-2">Quantrimang.com</h1>
  <h1 class="display-3">Quantrimang.com</h1>
  <h1 class="display-4">Quantrimang.com</h1>
</div>

</body>
</html>

Ta sẽ có kết quả như sau:

Thẻ small

Trong Bootstrap 4, phần tử <small> được sử dụng để tạo văn bản thứ cấp, có độ đậm nhạt hơn trong bất kỳ thẻ h nào. Để sử dụng small, bạn chỉ cần thêm đoạn văn bản vào giữa cặp thẻ <small> và </small>:

<h1>Quantrimang.com<small>sử dụng thẻ small</small></h1>
<h2>Quantrimang.com<small>sử dụng thẻ small</small></h2>
<h3>Quantrimang.com<small>sử dụng thẻ small</small></h3>
<h4>Quantrimang.com<small>sử dụng thẻ small</small></h4>
<h5>Quantrimang.com<small>sử dụng thẻ small</small></h5>
<h6>Quantrimang.com<small>sử dụng thẻ small</small></h6>

Giả sử có một file html đầy đủ như sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Ví dụ về small</h1>
  <p>Cách sử dụng small trong thẻ h:</p>       
<h1>Quantrimang.com <small>VD small</small></h1>
<h2>Quantrimang.com <small>VD small</small></h2>
<h3>Quantrimang.com <small>VD small</small></h3>
<h4>Quantrimang.com <small>VD small</small></h4>
<h5>Quantrimang.com <small>VD small</small></h5>
<h6>Quantrimang.com <small>VD small</small></h6>
</div>

</body>
</html>

Khi chạy file trên ta sẽ nhận được kết quả như ảnh chụp dưới đây:

Thẻ mark

Bootstrap 4 sẽ định kiểu phần tử mark với màu nền vàng và thêm padding. Để sử dụng mark, bạn chỉ cần đặt phần văn bản cần làm nổi bật vào giữa cặp thẻ <mark> và </mark>. Giả sử ta có file html đầy đủ như này:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Làm nổi bật văn bản</h1>    
  <p>Sử dụng mark để <mark>làm nổi bật</mark> văn bản.</p>
</div>

</body>
</html>

Ảnh chụp dưới đây là kết quả sau khi chạy file trên.

Thẻ abbr

Nếu muốn đánh dấu một đoạn văn bản nào đó là từ viết tắt trong Bootstrap 4, bạn chỉ cần đặt nó giữa cặp thẻ <abbr title=”Từ viết đầy đủ”> và </abbr>, khi đó đoạn văn bản này sẽ được gạch chân bằng 1 dòng chấm, và khi chỉ chuột vào đó, bạn sẽ thấy từ viết đầy đủ của nó.

File html đầy đủ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Từ viết tắt</h1>
  <p>Thẻ abbr được dùng để đánh dấu từ viết tắt:</p>
  <p><abbr title="Quản Trị Mạng">QTM</abbr> ra đời năm 2003.</p>
</div>

</body>
</html>

Kết quả sẽ như sau:

Thẻ blockquote

Thêm class .blockquote vào <blockquote> khi bạn muốn trích dẫn các đoạn nội dung từ nguồn khác.

Để sử dụng blockquote bạn sẽ làm như sau:

<blockquote class="blockquote">
<p> Đoạn văn bản cần trích dẫn<p>
<footer class="blockquote-footer">Nguồn trích dẫn</footer>
</blockquote>

Trong file html đầy đủ thì sẽ như thế này:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Ví dụ về Blockquote</h1>
  <p>Đoạn dưới đây sử dụng blockquote để trích dẫn 1 đoạn giới thiệu<br>
  về Quantrimang.com từ website Quantrimang.com:</p>
  <blockquote class="blockquote">
    <p>Khởi nguồn từ một trang web cung cấp kiến thức về mạng, server, các thiết bị mạng, thủ thuật máy tính. Hiện nay, Quantrimang.com đã trở thành mạng xã hội về khoa học công nghệ, mở rộng nội dung để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính,...</p>
    <footer class="blockquote-footer">Website Quantrimang.com</footer>
  </blockquote>
</div>

</body>
</html>

Ta sẽ được kết quả như dưới đây:

Thẻ dl

Khi cần tạo một list với Bootstrap 4 thì bạn sẽ sử dụng dl. Cách sử dụng sẽ như sau:

  <dl>
    <dt>Danh sách 1</dt>
    <dd>- con của danh sách 1</dd>
    <dt>Danh sách 2</dt>
    <dd>- con của danh sách 2</dd>
  </dl>

Bạn có thể chạy thử file html sau để xem kết quả:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Ví dụ về tạo list</h1>    
  <p>dl giúp tạo 1 list:</p>
  <dl>
    <dt>Ứng dụng</dt>
    <dd>- Word</dd>
    <dd>- Excel</dd>
    <dt>Hệ điều hành</dt>
    <dd>- Windows</dd>
    <dd>- Linux</dd>
  </dl>     
</div>

</body>
</html>

Ta có đầu ra khi chạy file trên như hình dưới đây:

Thẻ code

Các nội dung nằm trong thẻ code sẽ được tô màu đỏ, nổi bật hơn so với các văn bản xung quanh nó. Và hiển nhiên rồi, những nội dung này thường là các thẻ, hàm, phần tử… nào đó của code, bạn chỉ cần đặt chúng trong <code> và </code> là xong.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Quantrimang.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Trích dẫn code</h1>
  <p>Các đoạn trích dẫn code sẽ được nhúng trong thẻ code:</p>
  <p>Ngôn ngữ lập trình Python cung cấp 2 loại vòng lặp, vòng lặp <code>for</code> và vòng lặp <code>while</code>. Sử dụng những vòng lặp này cùng với câu lệnh điều khiển vòng lặp như <code>break</code><code>continue</code> bạn có thể tạo ra những dạng vòng lặp khác nhau. </p>
</div>

</body>
</html>

Ta sẽ có kết quả như sau:

Thẻ kbd

Trong các hướng dẫn về máy tính, bạn có thể phải sử dụng đến các phím bấm trên bàn phím. Để làm nổi bật những phím bấm, nội dung cần nhập vào bạn có thể sử dụng kbd, nội dung trong thẻ kbd sẽ được chuyển sang font chữ màu trắng với màu nền đen.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Quantrimang.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Thẻ kbd</h1>
   <p>Nhấn <kbd>Windows + R</kbd> để mở cửa sổ Run.</p>
</div>

</body>
</html>

Khi đó đoạn “Nhấn Windows + R để mở cửa sổ Run.” sẽ được trình bày như sau:

Thẻ pre

pre được dùng khi bạn muốn trích dẫn nhiều dòng code. Bạn chỉ cần đưa đoạn code muốn viết vào giữa thẻ <pre> và </pre> là xong, khá đơn giản:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Quantrimang.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>Viết nhiều dòng code</h1>
<p>Khi cần trích dẫn nhiều dòng code bạn sẽ sử dụng pre. Ví dụ dưới đây là một đoạn code Python:</p>
<pre>
# Nhận đầu vào từ người dùng cho đến khi họ nhập một nguyên âm 
nguyenAm = "aeiouAEIOU" 
# vòng lặp vô hạn 
while True: 
    m = input("Nhập một nguyên âm: ") 
    # Điều kiện ở giữa khối lệnh 
    if m in nguyenAm: 
        break 
    print("Đây không phải là nguyên âm. Hãy thử lại!") 
# Code by Quantrimang.com 
print("Chuẩn rồi, cảm ơn bạn!")
</pre>
</div>

</body>
</html>

Chạy file trên ta có kết quả như này:

Một cố class định kiểu khác trong Bootstrap 4

Bạn có thể sử dụng một số class Bootstrap 4 khác dưới đây để định kiểu cho các phần tử HTML:

Class Mô tả
.font-weight-bold Chữ in đậm
.font-weight-bolder Chữ in đậm hơn
.font-italic Chữ in nghiêng
.font-weight-light Chữ có nét mảnh hơn chữ thường
.font-weight-lighter Chữ có nét mảnh hơn nữa
.font-weight-normal Chữ bình thường
.lead Làm nổi bật một đoạn văn (font chữ to hơn)
.small Làm chữ nhỏ đi (còn khoảng 80% so với kích thước thông thường)
.text-left Căn lề trái văn bản
.text-*-left Căn lề trái văn bản trên màn hình nhỏ, vừa lớn, hoặc rất lớn.
.text-break Ngăn văn bản dài phá vỡ bố cục (ép ngắt dòng văn bản dài để vừa với chiều rộng màn hình)
.text-center Căn giữa văn bản
.text-*-center Căn giữa văn bản trên màn hình nhỏ, vừa lớn, hoặc rất lớn.
.text-decoration-none Removes the underline from a link
.text-right Căn phải văn bản
.text-*-right Căn phải văn bản trên màn hình nhỏ, vừa lớn, hoặc rất lớn.
.text-justify Căn đều văn bản
.text-monospace Chuyển văn bản thành kiểu Monospaced
.text-nowrap Không wrap văn bản
.text-lowercase In thường toàn bộ văn bản
.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ừ gốc của nó)
.text-uppercase In hoa toàn bộ văn bản
.text-capitalize Viết hoa chữ cái đầu
.initialism Hiển thị văn bản bên trong phần tử <abbr> ở cỡ chữ nhỏ hơn một chút.
.list-unstyled Xóa kiểu danh sách mặc định và lề trái trên các mục danh sách (dùng được trên cả <ul> và <ol>). Class này chỉ áp dụng cho các mục danh sách con đang dùng class (để xóa kiểu danh sách mặc định khỏi mọi danh sách lồng nhau, áp dụng class này cho bất kỳ danh sách lồng nhau nào).
.list-inline Đặt tất cả các mục 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>).
.pre-scrollable
Làm cho phần tử <pre> có thể cuộn được.