Bootstrap List

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.

Tạo danh sách với Bootstrap

Bạn có thể tạo ba loại danh sách HTML khác nhau:

• Danh sách không có thứ tự - Danh sách các mục trong đó thứ tự không quan trọng một cách rõ ràng. Các mục danh sách trong danh sách không có thứ tự được đánh dấu bằng dấu đầu dòng, ví dụ: ⚬ , ● , v.v.
• Danh sách có thứ tự - Danh sách các mục có thứ tự quan trọng một cách rõ ràng. Các mục danh sách trong danh sách có thứ tự được đánh dấu bằng số, ví dụ: 1, ⅵ, v.v.
• Danh sách định nghĩa - Danh sách các thuật ngữ với các mô tả liên quan của chúng.

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.

Loại bỏ kiểu của danh sách có thứ tự và không có thứ tự

Đô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>.

Đặt các phần tử trong danh sách có thứ tự và không có thứ tự trên cùng một hàng

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:

Tạo danh sách định nghĩa ngang

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.

Bootstrap • Bootstrap Cơ Bản