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-reverseVí 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:
span, section,
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>
và <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 |
Không có nhận xét nào:
Đăng nhận xét