Bootstrap - Dashboard Demo
Chào mừng các bạn đang học lập trình! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của Bootstrap và tạo một bản demo dashboard tuyệt vời. Là giáo viên khoa học máy tính hàng xóm thân thiện của bạn, tôi rất vui mừng được hướng dẫn bạn qua quá trình này, ngay cả khi bạn chưa từng viết một dòng mã trước đây. Vậy, hãy thắt dây an toàn và cùng nhau lặn sâu vào!
Bootstrap là gì?
Trước khi chúng ta bắt đầu xây dựng dashboard, hãy dành một chút thời gian để hiểu Bootstrap là gì. Hãy tưởng tượng bạn đang cố gắng xây dựng một ngôi nhà. Bootstrap giống như một bộ kit tiền제 đã có tường, cửa và cửa sổ đã thiết kế sẵn. Nó là một khung công tác front-end mạnh mẽ cung cấp các thành phần và phong cách tiền제, giúp dễ dàng tạo ra các trang web phản hồi và trực quan.
Thiết lập dự án của chúng ta
Bước 1: Bao gồm Bootstrap
Đầu tiên, chúng ta cần bao gồm Bootstrap vào dự án của mình. Chúng ta sẽ làm điều này bằng cách thêm các dòng sau vào phần <head> của tệp HTML:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>Những dòng này giống như mời Bootstrap đến tiệc lập trình của chúng ta. Chúng mang theo tất cả các phong cách và tính năng tương tác mà chúng ta sẽ cần.
Bước 2: Cấu trúc HTML cơ bản
Bây giờ, hãy thiết lập cấu trúc cơ bản của dashboard của chúng ta:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Tuyệt Vời Của Tôi</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<!-- Nội dung dashboard của chúng ta sẽ nằm ở đây -->
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Đây giống như việc lát nền cho ngôi nhà của chúng ta. Lớp container-fluid đảm bảo nội dung của chúng ta trải rộng toàn屏.
Xây dựng dashboard
Bước 3: Tạo thanh điều hướng
Hãy bắt đầu bằng cách thêm thanh điều hướng vào dashboard của chúng ta:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dashboard Của Tôi</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Trang chủ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Phân tích</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cài đặt</a>
</li>
</ul>
</div>
</div>
</nav>Mã này tạo ra một thanh điều hướng phản hồi. Nó giống như biển hiệu của dashboard của chúng ta, giúp người dùng điều hướng qua các phần khác nhau.
Bước 4: Thêm thanh bên
Tiếp theo, hãy thêm thanh bên cho các tùy chọn điều hướng bổ sung:
<div class="row">
<nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Đơn hàng
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Sản phẩm
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Khách hàng
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<!-- Nội dung chính sẽ nằm ở đây -->
</main>
</div>Thanh bên này hoạt động như một thực đơn trong một nhà hàng, cung cấp quyền truy cập nhanh vào các phần khác nhau của dashboard.
Bước 5: Tạo các widget của dashboard
Bây giờ, hãy thêm một số widget vào khu vực nội dung chính:
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
</div>
<div class="row">
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Doanh số Tổng cộng</h5>
<p class="card-text display-4">$15,000</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Khách hàng Mới</h5>
<p class="card-text display-4">250</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Đơn hàng Chờ xử lý</h5>
<p class="card-text display-4">18</p>
</div>
</div>
</div>
</div>
</main>Những widget này giống như các phòng trong ngôi nhà của dashboard, mỗi phòng phục vụ một mục đích cụ thể và hiển thị thông tin quan trọng.
Cải thiện dashboard
Bước 6: Thêm biểu đồ
Hãy thêm một biểu đồ để làm cho dashboard của chúng ta trở nên sống động hơn. Chúng ta sẽ sử dụng Chart.js, một thư viện đồ thị phổ biến:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="row mt-4">
<div class="col-md-8">
<canvas id="salesChart"></canvas>
</div>
</div>
<script>
var ctx = document.getElementById('salesChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6'],
datasets: [{
label: 'Doanh số',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>Biểu đồ này giống như một cửa sổ trong ngôi nhà của dashboard, cung cấp cái nhìn về xu hướng doanh số theo thời gian.
Bước 7: Thêm bảng
Cuối cùng, hãy thêm một bảng để hiển thị dữ liệu chi tiết:
<div class="row mt-4">
<div class="col-md-12">
<h3>Đơn hàng Gần đây</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Mã Đơn hàng</th>
<th>Khách hàng</th>
<th>Sản phẩm</th>
<th>Số lượng</th>
<th>Tình trạng</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>John Doe</td>
<td>Widget A</td>
<td>$100</td>
<td><span class="badge bg-success">Hoàn thành</span></td>
</tr>
<tr>
<td>002</td>
<td>Jane Smith</td>
<td>Widget B</td>
<td>$75</td>
<td><span class="badge bg-warning">Chờ xử lý</span></td>
</tr>
<!-- Thêm nhiều hàng hơn nếu cần -->
</tbody>
</table>
</div>
</div>Bảng này giống như một tủ hồ sơ trong dashboard, tổ chức và hiển thị dữ liệu quan trọng một cách ngăn nắp.
Kết luận
Chúc mừng! Bạn vừa xây dựng một dashboard Bootstrap tuyệt đẹp. Nhớ rằng, như bất kỳ kỹ năng nào khác, lập trình web sẽ cải thiện với sự gyak. Đừng nản lòng nếu mọi thứ không hoạt động hoàn hảo lần đầu - ngay cả những nhà phát triển có kinh nghiệm cũng dành thời gian gỡ lỗi và cải thiện mã của họ.
Dưới đây là bảng tham khảo nhanh các lớp Bootstrap chúng ta đã sử dụng:
| Lớp | Mục đích |
|---|---|
| container-fluid | Tạo một container toàn屏 |
| navbar | Tạo một thanh điều hướng |
| row | Tạo một nhóm cột水平的 |
| col-md-* | Tạo các cột phản hồi |
| card | Tạo một container nội dung linh hoạt |
| table | Định dạng một bảng HTML |
| badge | Tạo một thành phần nhỏ để đếm và nhãn |
Tiếp tục khám phá, tiếp tục lập trình, và quan trọng nhất, hãy vui vẻ! Hành trình lập trình web của bạn vừa mới bắt đầu, và có một thế giới đầy những khả năng thú vị đang chờ đón bạn.
Credits: Image by storyset