Tiếng Việt

Hướng dẫn Bootstrap

Bố cục Bootstrap

Nội dung Bootstrap

Thành phần Bootstrap

Bootstrap Forms

Trợ giúp Bootstrap

Tiện ích Bootstrap

Demos Bootstrap

Bootstrap - Dashboard RTL Demo

Giới thiệu về Bootstrap Dashboard RTL

Xin chào các nhà phát triển web tương lai! 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 Dashboard RTL. Là giáo viên 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 chủ đề này, ngay cả khi bạn chưa bao giờ viết một dòng mã nào trước đây. Đừng lo lắng; chúng ta sẽ học từ từ, và trước khi bạn biết, bạn sẽ tạo ra những dashboard đẹp mắt và tương ứng!

Bootstrap-Dashboard RTL Demo

Bootstrap Dashboard RTL là gì?

Trước khi chúng ta đi sâu vào, hãy phân tích nghĩa của các thuật ngữ này:

  1. Bootstrap: Một khung công tác front-end phổ biến giúp làm cho việc phát triển web nhanh chóng và dễ dàng hơn.
  2. Dashboard: Một giao diện người dùng hiển thị thông tin quan trọng chỉ với một cái nhìn.
  3. RTL: Đứng cho "Right-to-Left", là hướng văn bản được sử dụng trong các ngôn ngữ như Arabic và Hebrew.

Kết hợp tất cả lại, một Bootstrap Dashboard RTL là một mẫu thiết kế sẵn có để tạo dashboard hỗ trợ ngôn ngữ phải-trái sử dụng khung công tác Bootstrap.

Bắt đầu với Bootstrap Dashboard RTL

Thiết lập Môi trường Phát triển

Trước hết, hãy thiết lập môi trường phát triển của chúng ta. Đừng lo lắng; nó dễ dàng hơn bạn nghĩ!

  1. Tạo một thư mục mới trên máy tính của bạn cho dự án của bạn.
  2. Trong thư mục này, tạo một tệp HTML có tên index.html.
  3. Mở tệp này trong trình soạn thảo văn bản yêu thích của bạn (tôi khuyên bạn nên sử dụng Visual Studio Code cho người mới bắt đầu).

Bây giờ, hãy thêm cấu trúc HTML cơ bản:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My RTL Dashboard</title>
<!-- Bootstrap RTL CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css">
</head>
<body>
<h1>مرحبا بالعالم!</h1>

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

Hãy phân tích điều này:

  • <html lang="ar" dir="rtl">: Đặt ngôn ngữ là Arabic và hướng văn bản là phải-trái.
  • Chúng ta liên kết tệp CSS Bootstrap RTL trong phần <head>.
  • Chúng ta thêm một câu "Hello World" bằng Arabic (مرحبا بالعالم!) để kiểm tra cài đặt RTL của chúng ta.
  • Ở cuối, chúng ta bao gồm bộ JavaScript Bootstrap.

Xây dựng Cấu trúc Dashboard

Bây giờ chúng ta có cài đặt cơ bản, hãy bắt đầu xây dựng dashboard của chúng ta!

Tạo Thanh Điều hướng

Mỗi dashboard tốt cần một thanh điều hướng. Hãy thêm một thanh điều hướng:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">لوحة التحكم</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<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" aria-current="page" href="#">الرئيسية</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">التقارير</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">الإعدادات</a>
</li>
</ul>
</div>
</div>
</nav>

Mã này tạo ra một thanh điều hướng tương ứng với tên thương hiệu và ba mục menu. Lưu ý cách chúng ta sử dụng văn bản阿拉伯 để duy trì bản chất RTL của dashboard.

Thêm các Widget Dashboard

Bây giờ, hãy thêm một số widget vào dashboard của chúng ta. Chúng ta sẽ tạo một bố cục đơn giản với hai hàng thẻ:

<div class="container mt-4">
<div class="row">
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">المبيعات</h5>
<p class="card-text">إجمالي المبيعات: 10,000 دولار</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">الزوار</h5>
<p class="card-text">عدد الزوار اليوم: 1,234</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">الطلبات</h5>
<p class="card-text">الطلبات الجديدة: 56</p>
</div>
</div>
</div>
</div>
</div>

Mã này tạo ra ba thẻ hiển thị thông tin về doanh số, khách truy cập và đơn hàng. Class col-md-4 đảm bảo rằng trên màn hình trung bình và lớn hơn, các thẻ này sẽ nằm cạnh nhau trong một hàng ba.

Cải thiện Dashboard

Thêm một Bảng Đồ

Không có dashboard nào hoàn chỉnh nếu thiếu một biểu đồ! Hãy thêm một biểu đồ cột đơn giản sử dụng Chart.js:

Trước hết, thêm thư viện Chart.js vào tệp HTML của bạn, ngay trước thẻ đóng </body>:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Bây giờ, hãy thêm một canvas cho biểu đồ của chúng ta và mã JavaScript để tạo nó:

<div class="container mt-4">
<div class="row">
<div class="col-md-8 offset-md-2">
<canvas id="myChart"></canvas>
</div>
</div>
</div>

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو'],
datasets: [{
label: 'المبيعات الشهرية',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>

Mã này tạo ra một biểu đồ cột hiển thị dữ liệu doanh số hàng tháng. Các nhãn là bằng Arabic để duy trì chủ đề RTL.

Kết luận

Chúc mừng! Bạn vừa tạo ra dashboard Bootstrap RTL đầu tiên của mình. Chúng ta đã bao gồm các bước cơ bản để thiết lập một bố cục RTL, tạo thanh điều hướng, thêm các widget và thậm chí là bao gồm một biểu đồ. Đây chỉ là bắt đầu - có rất nhiều điều bạn có thể làm với Bootstrap và dashboard!

Nhớ rằng, chìa khóa để thành thạo phát triển web là thực hành. Hãy thử sửa đổi dashboard này, thêm các tính năng mới hoặc tạo bố cục hoàn toàn mới. Các khả năng là vô tận!

Dưới đây là bảng tóm tắt các thành phần chính chúng ta đã sử dụng:

Thành phần Mục đích
Navbar Điều hướng và thương hiệu
Cards Hiển thị thông tin quan trọng
Chart Trực quan hóa dữ liệu
Bootstrap Grid Cấu trúc bố cục
RTL CSS Hướng văn bản phải-trái

Tiếp tục khám phá, tiếp tục mã hóa, và quan trọng nhất, hãy vui vẻ! Chúc mừng các nhà phát triển web tương lai!

Credits: Image by storyset

Hướng Dẫn Trước:
Demo Blog Bootstrap RTL