Bootstrap - Typography
Chào mừng các bạn future web developers! Hôm nay, chúng ta sẽ khám phá thế giới kỳ diệu của Bootstrap typography. Là người thầy thân thiện trong khu phố máy tính, tôi ở đây để hướng dẫn các bạn qua hành trình này với rất nhiều ví dụ, giải thích và có thể là một两句 dad joke. Hãy bắt đầu nhé!
Bootstrap Default / Global Settings
Bootstrap đi kèm với một số thiết lập typography mặc định giúp văn bản của bạn trông đẹp ngay từ khi mới sử dụng. Nó giống như có một người stylist cá nhân cho trang web của bạn!
Dưới đây là một ví dụ cơ bản về cách Bootstrap định dạng văn bản:
<p>This is a paragraph styled by Bootstrap.</p>Bạn có thể đang nghĩ, "Trông giống như văn bản thông thường!" Và bạn đã đúng! Nhưng Bootstrap đã làm một số cải tiến tinh tế. Nó đã đặt một font-family mặc định (thường là một font sans-serif), một kích thước fontComfortable và một line-height dễ chịu. Đó là những điều nhỏ bé làm cho Bootstrap trở nên mạnh mẽ.
Headings
Các heading trong Bootstrap giống như các kích thước khác nhau của cà phê tại quán yêu thích của bạn - chúng có шість hương vị, từ h1 đến h6.
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>Mỗi heading có kích thước và trọng lượng riêng, tạo ra một cấu trúc rõ ràng trong nội dung của bạn. Nó giống như sắp xếp tủ quần áo - mọi thứ đều có vị trí của mình!
Customizing Headings
Nhưng nếu bạn muốn sử dụng các phong cách heading mà không thực sự sử dụng thẻ heading? Bootstrap có thể giúp bạn với các lớp .h1 đến .h6.
<p class="h1">This paragraph looks like a heading 1</p>
<span class="h3">This span looks like a heading 3</span>Điều này rất tuyệt khi bạn muốn có vẻ ngoài của một heading mà không có ý nghĩa ngữ nghĩa. Nó giống như mặc một áo sơ-mi tuxedo - trang trọng, nhưng không quá trang trọng.
Display Headings
Khi các heading thông thường không đủ, Bootstrap cung cấp các heading "display". Đây giống như những siêu mẫu của heading - lớn, đậm và thu hút sự chú ý.
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>Những heading display này rất phù hợp cho những lúc bạn cần làm một tuyên bố lớn. Hãy sử dụng chúng một cách khôn ngoan, quá nhiều và trang của bạn có thể bắt đầu hét lên!
Lead
Lớp .lead là cách của Bootstrap để làm cho một đoạn văn nổi bật. Nó giống như đưa văn bản của bạn vào một micro.
<p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>Sử dụng điều này cho văn bản giới thiệu hoặc thông tin quan trọng bạn muốn làm nổi bật.
Abbreviations
Bootstrap định dạng các viết tắt và từ viết tắt với một gạch chân chấm. Nó giống như tặng độc giả của bạn một vòng解码器!
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>Di chuột qua viết tắt, và bạn sẽ thấy từ đầy đủ xuất hiện.
Blockquote
Blockquotes trong Bootstrap được định dạng để nổi bật so với phần còn lại của văn bản. Chúng giống như những đứa trẻ cool trong thế giới đoạn văn.
<blockquote class="blockquote">
<p>Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.</p>
</blockquote>Naming a Source
Bạn có thể thêm một nguồn vào blockquote của mình bằng cách sử dụng thẻ <footer> với lớp blockquote-footer.
<blockquote class="blockquote">
<p>Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.</p>
<footer class="blockquote-footer">Albert Einstein</footer>
</blockquote>Đó là như công nhận công trạng, nhưng với phong cách!
Alignment
Bootstrap cho phép bạn dễ dàng căn chỉnh văn bản với các lớp. Nó giống như dạy văn bản của bạn nhảy - trái, giữa, phải!
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>Inline Text Elements
Bootstrap cung cấp các phong cách cho các phần tử văn bản in-line khác nhau. Nó giống như một cây kéo đa năng cho văn bản của bạn!
Dưới đây là bảng các phần tử văn bản in-line thường được sử dụng:
| Element | Description |
|---|---|
<mark> |
Văn bản được làm nổi bật |
<del> |
Văn bản đã xóa |
<s> |
Văn bản gạch ngang |
<ins> |
Văn bản được chèn |
<u> |
Văn bản gạch chân |
<small> |
Văn bản nhỏ hơn |
<strong> |
Văn bản đậm |
<em> |
Văn bản in nghiêng |
Ví dụ:
<p>You can use these elements to <mark>highlight</mark>, <del>delete</del>, <s>strikethrough</s>, <ins>insert</ins>, <u>underline</u>, make text <small>smaller</small>, <strong>bold</strong>, or <em>italicized</em>.</p>Lists
Bootstrap định dạng các danh sách để làm cho chúng hấp dẫn hơn về mặt thị giác. Nó giống như cho danh sách của bạn một lần nâng cấp!
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
</ol>Description List Alignment
Bootstrap cho phép bạn căn chỉnh các thuật ngữ và mô tả trong các danh sách mô tả. Nó giống như tổ chức một từ điển, nhưng cool hơn!
<dl class="row">
<dt class="col-sm-3">Coffee</dt>
<dd class="col-sm-9">Black hot drink</dd>
<dt class="col-sm-3">Milk</dt>
<dd class="col-sm-9">White cold drink</dd>
</dl>Điều này tạo ra một bố cục hai cột cho danh sách mô tả của bạn.
Responsive Font Sizes
Bootstrap 4 đã引入 responsive font sizes. Nó giống như văn bản của bạn làm yoga - nó co dãn và thích nghi với các kích thước màn hình khác nhau!
Để启用 responsive font sizes, thêm dòng này vào CSS của bạn:
html {
font-size: 1rem;
}Sau đó, sử dụng lớp .font-size-responsive trên các phần tử của bạn:
<p class="font-size-responsive">This text will adjust its size on different devices.</p>Và thế là xong, các bạn! Một hướng dẫn toàn diện về Bootstrap typography. Nhớ rằng, typography là giọng nói của nội dung của bạn - hãy để nó ca hát! Chúc các bạn may mắn trong việc mã hóa, và mong trang web của bạn luôn trông đẹp!
Credits: Image by storyset