Bootstrap 4 - Bootstrap Lists
Tạo danh sách bằng Bootstrap
Bài viết dưới đây hiepsiit.com sẽ hướng dẫn bạn cách tạo danh sách bằng Bootstrap.
1. Tạo Danh Sách Bằng Bootstrap
Chúng ta có thể tạo 3 kiểu danh sách HTML khác nhau, bao gồm:
- Kiểu danh sách không sắp xếp (Unordered list): là kiểu danh sách trong đó các mục không theo thứ tự rõ ràng. Các mục trong kiểu danh sách không sắp xếp không được đánh dấu bằng các biểu tượng.
- Kiểu danh sách sắp xếp (Ordered list): là kiểu danh sách trong đó các mục được sắp xếp theo thứ tự và được đánh dấu bằng số, chẳng hạn như 1, 2, 3, ....
- Danh sách kiểu mô tả (Definition list): là kiểu danh sách trong đó bao gồm các thuật ngữ có phần mô tả liên quan.
2. Kiểu Danh Sách Không thứ tự
Đôi khi trong một số trường hợp chúng ta phải xóa style mặc định của các mục trong danh sách. Để làm được điều này, chúng ta chỉ cần áp dụng lớp .list-unstyled cho các phần tử ul hoặc ol tương ứng.
Ví dụ: trong ví dụ dưới đây chúng ta tạo kiểu danh sách không sắp xếp:
<ul class="list-unstyled">
<li>Home</li>
<li>Products
<ul>
<li>Gadgets</li>
<li>Accessories</li>
</ul>
</li>
<li>About Us</li>
<li>Contact</li>
</ul>
Đặt Các Danh Mục Trên 1 Dòng Dùng Danh Sách Không Thứ Tự
Nếu muốn tạo menu ngang bằng cách sử dụng kiểu danh sách sắp xếp và không sắp xếp, chúng ta chỉ cần đặt tất cả các danh mục trong một dòng. Để làm được điều này chỉ cần áp dụng lớp .list-inline cho các phần tử ul hoặc ol và lớp .list-inline-item cho các phần tử li.
Ví dụ: trong ví dụ dưới đây chúng ta tạo menu ngang bằng cách đặt các danh mục trong danh sách sắp xếp và không sắp xếp trong 1 dòng:
<ul class="list-inline">
<li class="list-inline-item">Home</li>
<li class="list-inline-item">Products</li>
<li class="list-inline-item">About Us</li>
<li class="list-inline-item">Contact</li>
</ul>
Tạo Kiểu Danh Sách Dạng Tự Điển Bằng Bootstrap
Ngoài ra chúng ta có thể căn chỉnh các thuật ngữ và mô tả trong danh sách kiểu mô tả theo chiều ngang bằng cách sử dụng các lớp được xác định trước trong grid system (hệ thống lưới) trong Bootstrap.
Ví dụ: trong ví dụ dưới đây chúng ta sẽ tạo một danh sách theo kiểu danh sách mô tả được căn chỉnh theo chiều ngang:
<dl class="row">
<dt class="col-sm-3">User Agent</dt>
<dd class="col-sm-9">An HTML user agent is any device that interprets HTML documents.</dd>
<dt class="col-sm-3 text-truncate">Client-side Scripting</dt>
<dd class="col-sm-9">Client-side scripting generally refers to the category of computer programs on the web that are executed by the user's web browser.</dd>
<dt class="col-sm-3">Document Tree</dt>
<dd class="col-sm-9">The tree of elements encoded in the source document.</dd>
</dl>