Buzz
Dưới đây là hướng dẫn chi tiết về cách tạo danh sách bằng Bootstrap. Nếu bạn quan tâm đến cách tạo Fixed Layout (bố cục cố định) với Bootstrap, hãy tham khảo thêm các bài học khác trên Mytour.
Tạo danh sách với Bootstrap - Hướng dẫn chi tiết
1. Tạo danh sách với Bootstrap
Có 3 kiểu danh sách HTML chúng ta có thể tạo, bao gồm:
- Danh sách không sắp xếp (Unordered list): Trong kiểu này, các mục không được sắp xếp theo thứ tự cụ thể. Chúng không có biểu tượng đánh dấu.
- Danh sách sắp xếp (Ordered list): Trong kiểu này, các mục được sắp xếp theo thứ tự và có biểu tượng đánh dấu như số 1, 2, 3,...
- Danh sách mô tả (Definition list): là kiểu danh sách chứa các thuật ngữ kèm theo phần mô tả.
2. Danh sách không sắp xếp
Trong một số trường hợp, chúng ta cần loại bỏ kiểu mặc định của các mục trong danh sách. Để thực hiện điều này, chỉ cần thêm lớp .list-unstyled cho các phần tử ul hoặc ol.
Ví dụ: Dưới đây là cách tạo danh sách không sắp xếp trong ví dụ:
Dưới đây là kết quả bạn sẽ thu được:
Chú ý: Lớp .list-unstyled giúp loại bỏ kiểu danh sách mặc định và giảm padding trái của các mục trong danh sách thuộc ul hoặc ol.
3. Sắp xếp danh mục trong danh sách sắp xếp và không sắp xếp trên cùng một dòng
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ỉ cần đặt tất cả các danh mục trong một dòng. Áp dụng lớp .list-inline cho ul hoặc ol và lớp .list-inline-item cho li.
Ví dụ: Trong ví dụ sau, chúng ta sẽ tạo menu ngang bằng cách sắp xếp các danh mục từ danh sách sắp xếp và không sắp xếp trong một dòng:
Kết quả trả về sẽ hiển thị như sau:
4. Tạo kiểu danh sách mô tả với Bootstrap
Hơn nữa, chúng ta có thể điều chỉnh vị trí của 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 định nghĩa trước trong hệ thống lưới của Bootstrap.
Ví dụ: Trong ví dụ sau, chúng ta sẽ tạo một danh sách theo kiểu danh sách mô tả được sắp xếp ngang:
Kết quả trả về sẽ có dạng như sau:
Lưu ý: Đối với các định nghĩa thuật ngữ dài, bạn có thể sử dụng lớp .text-truncate trên phần tử dt để rút gọn văn bản và thay thế bằng dấu ba chấm (...).
Trong bài học này, Mytour đã hướng dẫn cách tạo danh sách bằng Bootstrap. Nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận dưới bài viết.
Trong bài học tiếp theo, Mytour sẽ tiếp tục giới thiệu về List Group trong Bootstrap.
