7. Table Trong Bootstrap 5

Table trong Bootstrap 5:

Trong Bootstrap 5, bạn có thể sử dụng lớp và các thành phần liên quan để tạo bảng (table) hiển thị dữ liệu một cách dễ dàng và hấp dẫn. Dưới đây là một số cách sử dụng bảng trong Bootstrap 5 cùng với ví dụ:

1. Bảng Cơ Bản:

Bạn có thể tạo bảng cơ bản bằng cách sử dụng lớp table và các lớp thêm vào các thành phần trong bảng.

html

<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John Doe</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jane Smith</td>
            <td>[email protected]</td>
        </tr>
    </tbody>
</table>

2. Bảng với Lớp Tương Phản:

Sử dụng lớp table-dark để tạo bảng với nền đậm.

html

<table class="table table-dark">
    <!-- Nội dung bảng tương tự như ví dụ trước -->
</table>

3. Bảng Đa Dạng:

Sử dụng các lớp table-{variant} để thêm màu sắc đa dạng vào bảng.

html

<table class="table table-primary">
    <!-- Nội dung bảng tương tự như ví dụ trước -->
</table>

4. Bảng Bordered:

Sử dụng lớp table-bordered để thêm đường viền cho bảng.

html

<table class="table table-bordered">
    <!-- Nội dung bảng tương tự như ví dụ trước -->
</table>

5. Bảng Hover:

Sử dụng lớp table-hover để thêm hiệu ứng hover vào bảng.

html

<table class="table table-hover">
    <!-- Nội dung bảng tương tự như ví dụ trước -->
</table>

6. Bảng Responsively:

Sử dụng lớp table-responsive để làm cho bảng trở nên đáp ứng và cuộn ngang khi kích thước màn hình nhỏ hơn.

html

<div class="table-responsive">
    <table class="table">
        <!-- Nội dung bảng tương tự như ví dụ trước -->
    </table>
</div>

Đây chỉ là một số ví dụ cơ bản về cách sử dụng bảng trong Bootstrap 5. Bootstrap cung cấp nhiều lựa chọn và lớp để tùy chỉnh giao diện của bảng theo ý muốn. Bạn có thể tìm hiểu thêm thông tin chi tiết trong tài liệu chính thức của Bootstrap.

Dưới đây là một ví dụ về cách sử dụng bảng trong Bootstrap 5:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <title>Bootstrap 5 Table Example</title>
</head>
<body>
    <div class="container mt-5">
        <h2>Employee List</h2>
        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>John Doe</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Jane Smith</td>
                        <td>[email protected]</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Trong ví dụ trên:

Chúng tôi sử dụng lớp table, table-bordered và table-hover để tạo bảng với đường viền và hiệu ứng hover.
Chúng tôi sử dụng lớp table-responsive để làm cho bảng đáp ứng và có khả năng cuộn ngang trên các kích thước màn hình nhỏ.
Các lớp thead và tbody được sử dụng để xác định phần tiêu đề và phần thân của bảng.

Vui lòng lưu ý rằng bạn cần thêm liên kết đến tệp CSS và JavaScript của Bootstrap để chạy đúng cách.

Leave a Comment Cancel Reply