Bài 2: Sử dụng Typography trong Bootstrap để viết tiêu đề

Bài 2: Sử dụng Typography trong Bootstrap để viết tiêu đề

Như các bạn đã biết thì 1 website không thể thiếu được nội dung, trong đó Typography trong Bootstrap giúp bạn làm điều đó.

Chúng ta có thể dùng nó để viết tiêu đề, nội dung, danh sách…

Ở bài 1 chúng ta đã được giới thiệu về cách sử dụng Gird System trong Bootstrap để tạo ra 1 bố cục bao gồm các hàng và các cột với kích thước theo tỷ lệ.

Cùng bắt đầu bài hôm nay với nội dung như sau:

Typography trong Bootstrap là gì?

Như đã nói ở trên thì Typography trong Bootstrap dùng để tạo kiểu chữ cho nội dung trang web. Nếu không quy định kiểu chữ thì trông có vẻ thô sơ và không đáp ứng được nhu cầu toàn cầu đối với từng thiết bị khác nhau.

Bạn có thể dùng nó để trang trí chữ như chiều cao, font chữ, màu sắc …

Một số ví dụ so sánh

Với các thẻ Heading

Ví dụ chúng ta thử với các thẻ Heading xem sao nhé, bắt đầu bằng cách không chèn các thư viện của Bootstrap:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
<h1>h1. Đây là nội dung thẻ H1</h1>
<h2>h2. Đây là nội dung thẻ H2</h2>
<h3>h3. Đây là nội dung thẻ H3</h3>
<h4>h4. Đây là nội dung thẻ H4</h4>
<h5>h5. Đây là nội dung thẻ H5</h5>
<h6>h6. Đây là nội dung thẻ H6</h6>
    <!-- End Example Code -->
  </body>
</html>

Kết quả là:

hien-thi-cac-the-khi-chua-dung-bootstrap

Bây giờ ta chèn thư viện Bootstrap vào nhé:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
<h1>h1. Đây là nội dung thẻ H1</h1>
<h2>h2. Đây là nội dung thẻ H2</h2>
<h3>h3. Đây là nội dung thẻ H3</h3>
<h4>h4. Đây là nội dung thẻ H4</h4>
<h5>h5. Đây là nội dung thẻ H5</h5>
<h6>h6. Đây là nội dung thẻ H6</h6>
    <!-- End Example Code -->
  </body>
</html>

Kết quả là:

hien-thi-cac-the-khi-da-dung-bootstrap

Như vây đã có sự thay đổi bây giờ chúng ta hoàn toàn có thể tùy biến các thẻ Heading trên các kiểu chữ được quy định trong Bootstrap:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
	<h1>
	Chào mừng bạn đến với sonnguyenaz
	<small class="text-body-secondary">Chia sẻ các kiến thức IT</small>
	</h1>
    <!-- End Example Code -->
  </body>
</html>

Kết quả thu được:

tuy-bien-kieu-chu

Cách viết tắt có chú thích

Bạn cũng có thể viết tắt và khi di chuột vào thì hiển thị chú thích:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
	<p><abbr title="sonnguuyen">sn</abbr></p>
	<p><abbr title="Cơ sở dữ liệu" class="initialism">CSDL</abbr></p>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

chu-thich-viet-tat

Trích dẫn theo style riêng

Blockquote dùng để trích dẫn:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
	<figure>
  <blockquote class="blockquote">
    <p>Chào mừng bạn đến với Blog sonnguyenaz.com</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Chia sẻ kiến thức về IT
  </figcaption>
</figure>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

trich-dan-blockquote

Bạn cũng có thể căn chỉnh sang bên phải hoặc ở giữa tùy thích bằng class: class=”text-center”, class=”text-end”

//căn giữa
<figure class="text-center">
  <blockquote class="blockquote">
    <p>Chào mừng bạn đến với Blog sonnguyenaz.com</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Chia sẻ kiến thức về IT
  </figcaption>
</figure>

Hoặc:

//căn sang phải
<figure class="text-center">
  <blockquote class="blockquote">
    <p>Chào mừng bạn đến với Blog sonnguyenaz.com</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Chia sẻ kiến thức về IT
  </figcaption>
</figure>

Tạo kiểu chữ theo cách riêng

Bạn có thể tạo chữ ghạch chân thông thường như dùng thẻ u, s… nhưng ở đây bạn cũng có thể làm như sau:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
	<p class="text-decoration-underline">Kiểu chữ ghạch chân.</p>
	<p class="text-decoration-line-through">Kiểu chữ bị ghach.</p>
	<a href="#" class="text-decoration-none">Tạo link không có ghạch chân</a>
    <!-- End Example Code -->
  </body>
</html>

Và kết quả là:

tao-kieu-chu-ghach-chan

Tạo Line height để phân dòng

Khoảng cách các dòng trong bố cục trang web được sử dụng thường xuyên, đối với Bootstrap bạn có thể quy định nó bằng class:

  • lh-1: khoảng cách rất nhỏ.
  • lh-sm: Khoảng cách nhỏ.
  • lh-base: Khoảng cách vừa.
  • lh-lg: Khoảng cách lớn.

Ví dụ:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
	<p class="lh-1">sonnguyenaz.com là Blog được lập ra nhằm mục đích chia sẻ kinh nghiệm về máy tính, tin học văn phòng, các kinh nghiệm sống…</p>
	<p class="lh-sm">sonnguyenaz.com là Blog được lập ra nhằm mục đích chia sẻ kinh nghiệm về máy tính, tin học văn phòng, các kinh nghiệm sống…</p>
	<p class="lh-base">sonnguyenaz.com là Blog được lập ra nhằm mục đích chia sẻ kinh nghiệm về máy tính, tin học văn phòng, các kinh nghiệm sống…</p>
	<p class="lh-lg">sonnguyenaz.com là Blog được lập ra nhằm mục đích chia sẻ kinh nghiệm về máy tính, tin học văn phòng, các kinh nghiệm sống…</p>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

tao-khoang-cach-dong-line-height

Căn chữ theo chiều dọc

Bạn muốn căn chữ theo chiều dọc thông thường phải viết style cho nó, nhưng với Bootstrap thì không cần bạn chỉ cần gọi và dùng thôi:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-row">
    <!-- Example Code -->
	<span class="align-baseline">baseline</span>
	<span class="align-top">top</span>
	<span class="align-middle">middle</span>
	<span class="align-bottom">bottom</span>
	<span class="align-text-top">text-top</span>
	<span class="align-text-bottom">text-bottom</span>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

can-chu-theo-chieu-doc

Lời kết

Qua các ví dụ ở trên thì bạn cũng có thể hiểu được sức mạnh của Bootstrap rồi đúng không ạ, tất cả đã có sẵn bạn chỉ cần gọi ra và sử dụng tùy ý thích.

Lưu ý các kiểu định dang văn bản và nội dung cho phù hợp với quy tắc, chứ đừng thấy đẹp là đưa hết vào các bạn nhé. Chỉ cần đủ và đẹp đáp ứng đúng nhu cầu sử dụng là được.

Cảm ơn các bạn đã theo dõi!

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *