[Bootstrap] Phần 4: Văn bản

Trong bài này, chúng ta sẽ học đến cách thiết lập mặc định cho phong cách văn bản trong Bootstrap. Kích thước font (font-size) mặc định là 14px, với độ giãn dòng (line-height) là 1.428 (10/7). Phong cách này áp dụng cho phần tử và tất cả các đoạn văn bản.

Tất cả phần tử p có lề dưới (margin-bottom) vằng 1/2 độ rộng dòng (line-height có 10px theo mặc định).

So sánh Bootstrap và các phong cách mặc định của trình duyệt

Phần này, chúng ta xem xét một vài phần tử HTML mà sẽ có đôi chút khác biệt khi dùng Bootstrap so với các mặc định trình duyệt.

Các phần tử h1, h2, h3, h4, h5 và h6: theo mặc định, Bootstrap sẽ có kích thước font chữ như sau:

<div class="container">
  <h1>h1 Bootstrap heading (36px)</h1>
  <h2>h2 Bootstrap heading (30px)</h2>
  <h3>h3 Bootstrap heading (24px)</h3>
  <h4>h4 Bootstrap heading (18px)</h4>
  <h5>h5 Bootstrap heading (14px)</h5>
  <h6>h6 Bootstrap heading (12px)</h6>
</div>

Phần tử small: khi dùng phần tử này, đoạn văn bản có có kiểu chữ nhỏ và thanh hơn.

<div class="container">
  <h1>Lighter, Secondary Text</h1>
  <p>The small element is used to create a lighter, secondary text in any heading:</p>
  <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>
</div>

Phần tử mark: phần tử này giúp tô sáng các chữ trong 1 đoạn văn bản

<div class="container">
  <h1>Văn bản được tô sáng</h1>
  <p>Đây là đoạn văn được <mark>tô sáng</mark> khi dùng phần tử mark.</p>
</div>

Phần tử abbr: phần tử này sẽ gạch chân cụm từ và xác định cụm từ đó cụm từ viết tắt về mặt ngữ nghĩa.

<div class="container">
  <p>Cụm từ World Health Organization được viết tắt là <abbr title="World Health Organization">WHO</abbr>.</p>
</div>

Ngoài ra còn nhiều phần tử khác để định nghĩa cho văn bản như: blockquote, dl, code, kbd, pre, … các bạn tự tìm hiểu thêm nhé.

Các lớp định nghĩa màu chữ: một số lớp để định nghĩa màu chữ là .text-muted, .text-primary, .text-success, .text-info, .text-warning, và .text-danger.

<div class="container">
  <h2>Contextual Colors</h2>
  <p>Use the contextual classes to provide "meaning through colors":</p>
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
</div>

Các lớp định nghĩa màu nền: một số lớp để định nghĩa màu nền là .bg-primary, .bg-success, bg-info, bg-warning, và .bg-danger.

<div class="container">
  <h2>Contextual Backgrounds</h2>
  <p>Use the contextual background classes to provide "meaning through colors":</p>
  <p class="bg-primary">This text is important.</p>
  <p class="bg-success">This text indicates success.</p>
  <p class="bg-info">This text represents some information.</p>
  <p class="bg-warning">This text represents a warning.</p>
  <p class="bg-danger">This text represents danger.</p>
</div>

Các lớp định nghĩa phong cách văn bản khác
Một số các lớp khác dùng để định nghĩa phong cách cho đoạn văn bản như sau:

• .lead: định nghĩa 1 đoạn văn bản nổi bật
• .text-left: canh đoạn văn bản bên trái
• .text-center: canh đoạn văn bản ở giữa
• .text-right: canh đoạn văn bản bên phải
• .text-justify: canh đều đoạn văn bản
• .text-nowrap: đoạn văn bản không bị bao lại
• .text-lowercase, .text-uppercase, .text-capitalize: đoạn văn bản in thường, in hoa, viết hoa chữ cái đầu
• .list-inline: định nghĩa các phần tử của danh sách nằm trên 1 dòng
• …

Qua bài viết này, các bạn đã nắm cách áp dụng các phần tử và các lớp để định nghĩa phong cách cho các đoạn văn bản trong Bootstrap.