Bài học tiếp theo trong loạt bài học Bootstrap 3 này chúng ta sẽ tìm hiểu về văn bản và kiểu chữ trong Bootstrap các bạn nhé!
Cài đặt mặc định của Bootstrap
Kích thước phông chữ mặc định chung của Bootstrap là 14px, với chiều cao dòng là 1.428.
Điều này được áp dụng cho phần tử <body> và tất cả các đoạn (<p> ).
Ngoài ra, tất cả các phần tử <p> đều có lề dưới (margin-bottom) bằng một nửa chiều cao dòng (line-height ) được tính toán của chúng (10px theo mặc định).
Bootstrap so với mặc định của trình duyệt
Trong chương này, chúng ta sẽ xem xét một số phần tử HTML sẽ được Bootstrap tạo kiểu hơi khác một chút so với mặc định của trình duyệt.
<h1> đến <h6>
Theo mặc định, Bootstrap sẽ định kiểu các tiêu đề HTML (<h1> thành <h6>) theo cách 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>
<small>
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>
<mark>
Phần tử mark trong bootstrap sẽ tô sáng đoạn văn bản. Bootstrap sẽ tạo kiểu cho phần tử <mark> HTML theo cách sau:
Ví dụ
<div class="container"> <h5>Tô sáng văn bản</h5> <p>Chữ HocTV tô sáng như sau <mark>HocTV</mark> okie </p> </div>
kết quả:
Tô sáng văn bản
Chữ HocTV tô sáng như sau HocTV okie
<abbr>
Bootstrap sẽ tạo kiểu gạch chân cho phần tử bằng cách sử dụng <abbr>
Ví dụ:
<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>
Cụm từ World Health Organization được viết tắt là WHO.
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, … và cách sử dụng cũng tương tự như trên
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
Lời kết:
Qua bài viết này, Học TV hi vọng các bạn đã nắm được cách áp dụng các phần tử và các lớp để định nghĩa kiểu và định dạng các phần tử văn bản trong Bootstrap 3 một cách chuẩn chính tả hơn. Chúc các bạn thành công!
