NTM Solutions

Thứ Bảy, 11 tháng 3, 2017

Tự học Bootstrap – Cơ bản – bài 03 - Văn bản và định dạng in ấn

Các thiết lập mặc định trong Bootstrap

Cỡ chữ tổng quát trong Bootstrap là 14px, với line-height = 1.428.
Điều này áp dụng cho thẻ <body> và tất cả đoạn văn.
Hơn nữa, tất cả thẻ <p> có 01 canh lề dưới bằng nửa line-height (mặc định là 10px).

Định dạng Bootstrap vs. Định dạng trình duyệt

Trong bài này, chúng ta sẽ xem vài phần tử HTML sẽ được định dạng hơi khác 01 chút so với định dạng mặc định của trình duyệt.

<h1> - <h6>

Mặc định, Bootstrap sẽ định dạng các thẻ HTML headings (<h1> <h6>) theo cách sau:

Ví dụ:

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)

<small>

Trong Bootstrap thẻ HTML <small> thường được dùng để tạo 01 chữ có định dạng nhạt hơn, 01 dòng chữ thứ cấp trong bất kỳ tiêu đề nào:

Ví dụ:

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text

Thẻ đánh dấu <mark>

Bootstrap sẽ định dạng thẻ HTML <mark> theo cách sau:

Ví dụ:

Dùng để đánh dấu phần tử bằng cách tô sáng chữ.

Thẻ viết tắt <abbr>

Bootstrap sẽ định dạng thẻ HTML <abbr> theo cách sau:

Ví dụ:

The WHO was founded in 1948.

Thẻ trích dẫn <blockquote>

Bootstrap sẽ định dạng thẻ HTML <blockquote> theo cách sau:

Ví dụ:

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


Để canh lề phải cho phần trích dẫn , dùng lớp .blockquote-reverse

Ví dụ:

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 sẽ định dạng thẻ HTML <dl> theo cách sau:

Ví dụ:

Coffee
- black hot drink
Milk
- white cold drink

Thẻ mã <code>

Bootstrap sẽ định dạng thẻ HTML <code> theo cách sau:

Ví dụ:

Các phần tử HTML sau: spansection, và div xác định 01 phần trong văn bản.

Thẻ <kbd>

Bootstrap sẽ định dạng thẻ HTML <kbd> theo cách sau:

Ví dụ:

Dùng ctrl + p để mở hộp thoại IN.

<pre>

Bootstrap sẽ định dạng thẻ HTML <pre> theo cách sau:

Ví dụ:

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

Contextual Colors và Backgrounds

Bootstrap cũng có 01 vài từ khóa về màu sắc.
Các lớp dùng cho màu chữ là:.text-muted, .text-primary, .text-success, .text-info, .text-warning, và .text-danger:

Ví dụ:

This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Các lớp dùng cho màu nền là:.bg-primary, .bg-success, bg-info, bg-warning, và .bg-danger:



Thêm các lớp về in ấn Typography

Các lớp Bootstrap dưới đây có thể được bổ sung vào các định dạng HTML:
Lớp
Mô tả
Ví dụ:
.lead
Makes a paragraph stand out

.small
Định dạng dòng văn bản nhở hơn văn bản chính ( 85%)

.text-left
Canh chữ lề trái

.text-center
Canh chữ ở giữa

.text-right
Canh chữ lề phải

.text-justify
Canh chữ đều 02 bên

.text-nowrap
Indicates no wrap text

.text-lowercase
Chữ thường hết

.text-uppercase
Chữ HOA HẾT

.text-capitalize
Chữ Hoa Ký Tự Đầu

.initialism
Hiển thị văn bản trong 01 thẻ <abbr> trong 01 cỡ chữ nhỏ hơn.

.list-unstyled
Xóa định dạng danh sách chuẩn và canh lề trái (tác dụng đối với cả 02 thẻ <ul><ol>). Lớp này chỉ áp dụng cho thẻ con trực tiếp dưới nó (to remove the default list-style from any nested lists, apply this class to any nested lists as well)

.list-inline
Đặt tất cả danh sách lên cùng 01 dòng.

.dl-horizontal
Xếp hàng các điều khoản (<dt>) và phần mô tả (<dd>) trong thẻ <dl> side-by-side. Starts off like default <dl>, but when the browser window expands, it will line up side-by-side

.pre-scrollable
Làm cho 01 thẻ <pre> có thanh cuộn