Trong hướng dẫn này, bạn sẽ học cách tạo kiểu danh sách (list) HTML với Bootstrap.
Bạn có thể tạo ba loại danh sách HTML khác nhau:
Xem hướng dẫn về danh sách HTML , để tìm hiểu thêm về các loại danh sách khác nhau.
Đôi khi bạn có thể cần phải loại bỏ phong cách mặc định của các phần tử danh sách. Bạn có thể làm điều này bằng cách chỉ cần áp dụng lớp .list-unstyled
cho các phần tử <ul>
hoặc <ol>
tương ứng.
<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>
Kết quả của ví dụ trên sẽ giống như sau:
Lưu ý: Lớp.list-unstyled
loại bỏlist-style
vàpadding
mặc định chỉ để lại trong danh sách các mục là phần tử con của phần tử<ul>
hoặc<ol>
.
Nếu bạn muốn tạo menu ngang bằng cách sử dụng danh sách có thứ tự hoặc không có thứ tự, bạn cần đặt tất cả các phần tử của danh sách trong một dòng duy nhất (tức là cạnh nhau). Bạn có thể thực hiện việc này đơn giản bằng cách thêm lớp .list-inline
vào phần tử <ul>
hoặc <ol>
và lớp .list-inline-item
vào các phần tử <li>
con.
<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>
Kết quả của ví dụ trên sẽ giống như sau:
Các thuật ngữ và mô tả trong danh sách định nghĩa cũng có thể được căn chỉnh theo chiều ngang cạnh nhau bằng cách sử dụng các lớp được định nghĩa trước của hệ thống lưới Bootstrap. Đây là một ví dụ:
<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>
Kết quả của ví dụ trên sẽ giống như sau:
Lưu ý: Đối với các thuật ngữ định nghĩa dài hơn, bạn có thể tùy chọn áp dụng lớp.text-truncate
trên phần tử<dt>
để cắt ngắn văn bản bằng dấu chấm lửng (…).
Trong chương tiếp theo, bạn sẽ học cách tạo danh sách các phần tử linh hoạt hơn và phức tạp hơn bằng cách sử dụng thành phần Bootstrap List Group.
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.
Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.
Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.
Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.