Bootstrap - Kiểu chữ
Bootstrap sử dụng Helvetica Neue, Helvetica, Arial và sans-serif trong ngăn xếp phông chữ mặc định của nó. Sử dụng tính năng typography của Bootstrap, bạn có thể tạo các tiêu đề, đoạn văn, danh sách và các phần tử nội dòng khác. Hãy xem tìm hiểu từng điều này trong các phần sau.
Đề mục
Tất cả các tiêu đề HTML (h1 đến h6) đều được tạo kiểu trong Bootstrap. Một ví dụ được hiển thị bên dưới -
<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>Đoạn mã trên với Bootstrap sẽ tạo ra kết quả sau:
Tiêu đề phụ nội tuyến
Để thêm tiêu đề phụ nội dòng vào bất kỳ tiêu đề nào, chỉ cần thêm <small> xung quanh bất kỳ phần tử nào hoặc thêm .small lớp và bạn sẽ nhận được văn bản nhỏ hơn với màu sáng hơn như trong ví dụ dưới đây -
<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1>
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>Đoạn mã trên với Bootstrap sẽ tạo ra kết quả sau:
Bản sao thân chì
Để thêm một số điểm nhấn cho một đoạn văn, hãy thêm class = "lead". Điều này sẽ cung cấp cho bạn kích thước phông chữ lớn hơn, trọng lượng nhẹ hơn và chiều cao dòng cao hơn như trong ví dụ sau:
<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating
the use of lead body copy. This is an example paragraph
demonstrating the use of lead body copy.This is an example
paragraph demonstrating the use of lead body copy.This is an
example paragraph demonstrating the use of lead body copy.
This is an example paragraph demonstrating the use of lead body copy.</p>Nhấn mạnh
Các thẻ nhấn mạnh mặc định của HTML, chẳng hạn như <small> đặt văn bản bằng 85% kích thước của thẻ gốc, <strong> nhấn mạnh văn bản có trọng lượng phông chữ nặng hơn và <em> nhấn mạnh văn bản in nghiêng.
Bootstrap cung cấp một vài lớp có thể được sử dụng để nhấn mạnh vào văn bản như được thấy trong ví dụ sau:
<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>
<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-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>Các từ viết tắt
Phần tử HTML <abbr> cung cấp đánh dấu cho các từ viết tắt hoặc từ viết tắt, như WWW hoặc HTTP. Bootstrap tạo kiểu các phần tử <abbr> với đường viền chấm sáng dọc theo phía dưới và hiển thị toàn bộ văn bản khi di chuột (miễn là bạn thêm văn bản đó vào thuộc tính tiêu đề <abbr>). Để có kích thước phông chữ nhỏ hơn một chút, hãy thêm .initialism vào <abbr>.
<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>Địa chỉ
Sử dụng thẻ <address>, bạn có thể hiển thị thông tin liên hệ trên trang web của mình. Vì <address> mặc định hiển thị: block; bạn sẽ cần sử dụng
Thẻ để thêm ngắt dòng vào văn bản địa chỉ kèm theo.
<address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title = "Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href = "mailto:#">[email protected]</a>
</address>Những câu chuyện cổ tích
Bạn có thể sử dụng <blockquote> mặc định xung quanh bất kỳ văn bản HTML nào. Các tùy chọn khác bao gồm, thêm thẻ <small> để xác định nguồn trích dẫn và căn chỉnh ngay khối trích dẫn bằng cách sử dụng lớp .pull-right . Ví dụ sau minh họa tất cả các tính năng này:
<blockquote>
<p>This is a default blockquote example. This is a default
blockquote example. This is a default blockquote
example.This is a default blockquote example. This is a
default blockquote example.</p>
</blockquote>
<blockquote>
This is a blockquote with a source title.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
<blockquote class = "pull-right">This is a blockquote aligned to the right.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>Danh sách
Bootstrap hỗ trợ danh sách có thứ tự, danh sách không có thứ tự và danh sách định nghĩa.
Ordered lists - Danh sách có thứ tự là danh sách sắp xếp theo thứ tự tuần tự nào đó và được bắt đầu bằng số.
Unordered lists- Danh sách không có thứ tự là danh sách không có bất kỳ thứ tự cụ thể nào và được tạo kiểu truyền thống với các dấu đầu dòng. Nếu bạn không muốn các dấu đầu dòng xuất hiện, thì bạn có thể xóa kiểu bằng cách sử dụng lớp .list-unstyled . Bạn cũng có thể đặt tất cả các mục trong danh sách trên một dòng bằng cách sử dụng lớp .list-inline .
Definition lists- Trong kiểu danh sách này, mỗi mục danh sách có thể bao gồm cả phần tử <dt> và <dd>. <dt> là viết tắt của thuật ngữ định nghĩa , và giống như từ điển, đây là thuật ngữ (hoặc cụm từ) đang được định nghĩa. Sau đó, <dd> là định nghĩa của <dt>. Bạn có thể tạo các thuật ngữ và mô tả trong <dl> xếp cạnh nhau bằng cách sử dụng lớp dl-ngang .
Ví dụ sau minh họa từng loại sau:
<h4>Example of Ordered List</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h4>Example of UnOrdered List</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Unstyled List</h4>
<ul class = "list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Inline List</h4>
<ul class = "list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Definition List</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>Example of Horizontal Definition List</h4>
<dl class = "dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>