Xây dựng Dashboard quản trị với Bootstrap

Trong bài học này, chúng ta sẽ tìm hiểu cách xây dựng một giao diện Admin Dashboard sử dụng Bootstrap. Chúng ta sẽ sử dụng các thành phần như Sidebar, Navbar, Cards, Tables để hiển thị dữ liệu, đồng thời tối ưu hóa giao diện cho các thiết bị khác nhau.

1. Thiết kế giao diện Admin Dashboard

Cấu trúc cơ bản

Một Admin Dashboard thường có các thành phần chính sau:

• Sidebar (Thanh điều hướng bên trái): Chứa menu chuyển trang.
• Navbar (Thanh điều hướng trên): Hiển thị thông tin người dùng, thông báo.
• Cards (Thẻ thông tin): Hiển thị số liệu tổng quan.
• Tables (Bảng dữ liệu): Quản lý danh sách thông tin.

2. Sử dụng Bootstrap để xây dựng Dashboard

Sidebar (Thanh điều hướng)

Sử dụng d-flex, flex-column để tạo thanh điều hướng dọc.

<div class="d-flex flex-column p-3 bg-dark text-white" style="width: 250px; height: 100vh;">
    <h4>Dashboard</h4>
    <ul class="nav flex-column">
        <li class="nav-item"><a href="#" class="nav-link text-white">Trang chủ</a></li>
        <li class="nav-item"><a href="#" class="nav-link text-white">Báo cáo</a></li>
        <li class="nav-item"><a href="#" class="nav-link text-white">Cài đặt</a></li>
    </ul>
</div>

Navbar (Thanh điều hướng trên cùng)

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Admin</a>
    <div class="ml-auto">
        <span class="mr-3">Xin chào, User</span>
        <button class="btn btn-outline-danger">Đăng xuất</button>
    </div>
</nav>

Cards (Thẻ thông tin tổng quan)

<div class="row">
    <div class="col-md-4">
        <div class="card text-white bg-primary mb-3">
            <div class="card-header">Doanh thu</div>
            <div class="card-body">
                <h5 class="card-title">$50,000</h5>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-white bg-success mb-3">
            <div class="card-header">Người dùng</div>
            <div class="card-body">
                <h5 class="card-title">1,200</h5>
            </div>
        </div>
    </div>
</div>

Tables (Bảng dữ liệu người dùng)

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>Tên</th>
            <th>Email</th>
            <th>Vai trò</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Nguyễn Văn A</td>
            <td>a@example.com</td>
            <td>Admin</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Trần Thị B</td>
            <td>b@example.com</td>
            <td>Người dùng</td>
        </tr>
    </tbody>
</table>

3. Responsive và tối ưu hiển thị trên mobile

• Sử dụng Bootstrap Grid System (col-md-*, col-lg-*) để tối ưu bố cục.
• Ẩn/hiện Sidebar trên màn hình nhỏ bằng cách dùng .d-none .d-md-block.

Ví dụ: Ẩn Sidebar trên màn hình nhỏ

<div class="d-none d-md-block">Thanh điều hướng</div>

4. Bài tập thực hành

Hãy tạo một giao diện Admin Dashboard với các thành phần:

• Sidebar chứa menu điều hướng.
• Navbar hiển thị thông tin người dùng.
• Cards hiển thị số liệu thống kê.
• Table hiển thị danh sách người dùng.

5. Kết luận

Qua bài học này, bạn đã biết cách xây dựng một giao diện Admin Dashboard bằng Bootstrap. Hãy thử tùy chỉnh và bổ sung thêm các tính năng để hoàn thiện hơn!