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.
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.
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
Full Name
<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.
<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.
<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ả.
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.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
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.
<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.