Bootstrap: Typography

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Tiêu đề

Tất cả các thẻ tiêu đề của HTML, từ thẻ <h1> tới <h6>, đều sẵn có. Các class từ .h1 tới .h6 được sử dụng khi bạn muốn style các thẻ tiêu đề nhưng vẫn muốn text của bạn hiển thị trên cùng dòng.

h1. Bootstrap heading

Semibold 36px

h2. Bootstrap heading

Semibold 30px

h3. Bootstrap heading

Semibold 24px

h4. Bootstrap heading

Semibold 18px
h5. Bootstrap heading
Semibold 14px
h6. Bootstrap heading
Semibold 12px
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Bạn cũng có thể tạo ra các text khác đi kèm trong tiêu đề bằng thẻ <small> hoặc class .small.

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Body

font-size mặc định của Bootstrap là 14px, với line-height có tỷ lệ 1.428. Các thuộc tính này được áp dụng cho phần <body> và tất cả các đoạn văn. Hơn nữa, <p> (các đoạn văn) sẽ nhận khoảng căn lề dưới (margin-bottom) bằng một nửa line-height của chúng (mặc định là 10px).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Làm nổi bật đoạn văn

Bạn có thể làm một đoạn văn trở nên nổi bật hơn bằng cách thêm class .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Xây dựng với Less

Tỉ lệ typograghy trong Bootstrap dựa trên 2 biến trong Less trong variables.less@font-size-base và @line-height-base. Biến thứ nhất là font-size cơ sở được sử dụng rất phổ biến, còn biến thứ hai là line-height cơ sở. Chúng tôi sử dụng những biến này và một số phép toán cơ bản để tạo ra margin, padding và line-height. Tùy biến chúng và Bootstrap sẽ tự động điều chỉnh.

Nhấn mạnh

Hãy sử dụng các thẻ nhấn mạnh mặc định của HTML với những style đơn giản.

Text có kích thước nhỏ

Để giảm tính nhấn mạnh cho các đoạn text hoặc khối text, hãy sử dụng thẻ <small> để thay đổi kích thước của những text đó bằng 85% so với kích thước của phần tử cha. Các phần tử tiêu đề nhận những font-size của riêng chúng khi nằm trong thẻ <small>. Bạn cũng có thể sử dụng một phần tử có class .small trên cùng dòng thay vì <small>.

This line of text is meant to be treated as fine print.

<small>This line of text is meant to be treated as fine print.</small>

In đậm

Được sử dụng để nhấn mạnh một đoạn text với giá trị font-weight cao.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

In nghiêng

Được sử dụng để nhấn mạnh một đoạn text với chữ in nghiêng.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Các phần tử thay thế

Bạn có thể tự do sử dụng các thẻ <b> và <i> in HTML5. Thẻ <b> được sử dụng để in đậm một từ hoặc cụm từ trong khi thẻ <i> được sử dụng phổ biến cho các thuật ngữ về kỹ thuật, âm thanh,...

Các class căn chỉnh

Dễ dàng căn chỉnh lại các text với các thành phần khác bằng các class căn chỉnh text.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>

Tên viết tắt

Sử dụng thẻ <abbr> của HTML để hiển thị tên viết tắt, và sẽ hiển thị tên đầy đủ khi hover qua. Các thẻ này có thuộc tính title đi kèm, có đường viền bên dưới ở dạng các dấu chấm liền nhau và khi hover qua sẽ hiển thị con trỏ dạng trợ giúp.

Tên viết tắt cơ bản

Sử dụng thuộc tính title có giá trị là tên đầy đủ của tên viết tắt trên thẻ <abbr>

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>

Initialism

Thêm class .initialism vào thẻ <abbr> để thiết lập font-size nhỏ hơn một chút.

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Địa chỉ

Hiển thị thông tin liên hệ cho phần tử cha gần nhất hoặc cả <body>. Để bảo toàn định dạng, hãy kết thúc tất cả các dòng bằng thẻ <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

Khối trích dẫn

Để trích dẫn một khối nội dung từ một nguồn khác trong tài liệu của bạn.

Khối trích dẫn mặc định

Hãy bọc một khối HTML bất kỳ mà bạn muốn trích dẫn bằng thẻ <blockquote>. ưu tiên sử dụng thẻ <p> bên trong <blockquote>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Các tùy chọn cho khối trích dẫn

Bạn có thể tùy chọn thay đổi nội dung và style của khối <blockquote>.

Đặt tên một nguồn

Hãy thêm một <footer> để xác định nguồn trích dẫn đến từ đâu. Bọc tên của source-work bằng thẻ <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Các dạng hiển thị thay thế

Để căn phải nội dung trích dẫn, hãy sử dụng class .blockquote-reverse.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Danh sách

Danh sách không có thứ tự

Một danh sách các hạng mục được sắp xếp không theo một thứ tự nào cả.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

Danh sách có thứ tự

Một danh sách các hạng mục được sắp xếp theo một thứ tự nhất định.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

Danh sách không được style

Loại bỏ thuộc tính list-style mặc định của danh sách và khoảng căn lề trái (margin-left) trên tất cả các hạng mục của danh sách. Lưu ý rằng, việc này chỉ áp dụng cho các thẻ <li> là con trực tiếp của <ul> hoặc <ol>, điều đó có nghĩa là bạn có thể sẽ cần thêm class cho các danh sách khác nằm sâu bên trong.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

Danh sách cùng dòng

Đặt tất cả các hạng mục trong danh sách trên cùng một dòng bằng cách sử dụng thuộc tính display: inline-block; cùng thuộc tính padding có giá trị nhỏ.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>

Thông tin chi tiết

Một danh sách các thuật ngữ với thông tin đi kèm.

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Chi tiết theo hàng ngang

Hãy đặt các thuật ngữ và thông tin đi kèm bên trong các thẻ <dl> nằm sát nhau. Bình thường bạn chỉ cần sử dụng những thẻ <dl> mặc định, tuy nhiên khi thanh điều hướng mở rộng ra, bạn hãy sử dụng <dl> dạng này.

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Felis euismod semper eget lacinia

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Tự động cắt ngắn

Danh sách các thông tin theo hàng ngang sẽ tự động cắt ngắn các thuật ngữ quá dài để nằm vừa vặn trong cột bên trái bằng cách sử dụng thuộc tính text-overflow. Để tương thích với các khung nhìn hẹp, chúng sẽ thay đổi về dạng xếp chồng mặc định.

» Tiếp: Code
« Trước: Hệ thống lưới
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!