Bootstrap - Thanh Tiến Trình: Hướng Dẫn Toàn Diện Cho Người Mới Bắt Đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của thanh tiến trình trong Bootstrap. Là người thầy thân thiện trong khu phố, tôi ở đây để hướng dẫn các bạn trong hành trình thú vị này. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu bạn thích), và chúng ta cùng bắt đầu nhé!

Thanh Tiến Trình Là Gì?

Trước khi chúng ta nhảy vào mã, hãy cùng thảo luận về thanh tiến trình và tại sao chúng lại quan trọng. Hãy tưởng tượng bạn đang tải xuống một tệp lớn và không biết nó sẽ mất bao lâu. Đáng frustrating phải không? Đó là lúc thanh tiến trình xuất hiện! Chúng là các chỉ báo trực quan cho thấy mức độ hoàn thành của một quá trình, giúp người dùng có cảm giác về thời gian chờ đợi còn lại.

Trong thế giới thiết kế web, thanh tiến trình rất hữu ích cho:

• Hiển thị trạng thái tải
• Hiển thị hoàn thành các form nhiều bước
• Chỉ thị mức độ kỹ năng hoặc xếp hạng
• Và nhiều hơn nữa!

Bây giờ, hãy c rolled up our sleeves và bắt đầu mã hóa!

Thanh Tiến Trình Cơ Bản

Hãy bắt đầu với hình thức đơn giản nhất của thanh tiến trình trong Bootstrap. Đây là cách nó trông như thế nào:

<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Đang xảy ra điều gì ở đây? Hãy cùng phân tích:

1. Chúng ta có một <div> ngoài với lớp progress. Điều này tạo ra container cho thanh tiến trình của chúng ta.
2. Bên trong, chúng ta có một <div> khác với lớp progress-bar. Đây là thanh thực tế sẽ được.fill up.
3. Chúng ta đặt width là 25% bằng CSS inline. Điều này xác định mức độ đầy của thanh.
4. Các thuộc tính aria-* là cho khả năng truy cập, giúp các trình đọc màn hình hiểu trạng thái của thanh.

Đ調 Gi尺 Thanh

Bây giờ, hãy thảo luận về việc điều chỉnh kích thước thanh tiến trình. Bootstrap cung cấp cho chúng ta hai cách chính để kiểm soát kích thước: chiều rộng và chiều cao.

Chiều Rộng

Chiều rộng của thanh tiến trình đại diện cho mức độ hoàn thành của quá trình. Chúng ta có thể đặt này bằng phần trăm:

<div class="progress">
<div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 100%"></div>
</div>

Mã này sẽ tạo ra năm thanh tiến trình, mỗi thanh đầy ở mức độ khác nhau. Nó giống như đổ nước vào năm ly với mức độ khác nhau!

Chiều Cao

Theo mặc định, thanh tiến trình trong Bootstrap rất mỏng. Nhưng giả sử chúng ta muốn một thanh dày hơn? Chúng ta có thể điều chỉnh chiều cao:

<div class="progress" style="height: 1px;">
<div class="progress-bar" style="width: 50%;"></div>
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" style="width: 50%;"></div>
</div>

Ở đây, chúng ta đang tạo ra hai thanh tiến trình: một rất mỏng (1px) và một rất dày (20px). Nó giống như so sánh một sợi mì với một miếng bánh mì dày!

nhãn

Đôi khi, việc thêm văn bản bên trong thanh tiến trình rất hữu ích. Đây là cách chúng ta làm:

<div class="progress">
<div class="progress-bar" style="width: 25%;">25%</div>
</div>

Đơn giản phải không? Chỉ cần thêm văn bản bên trong <div> progress-bar. Nó giống như viết trực tiếp trên thanh!

Nền

Muốn làm thanh tiến trình của bạn thêm sống động? Bootstrap cung cấp một số lớp màu sắc được xác định trước:

<div class="progress">
<div class="progress-bar bg-success" style="width: 25%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" style="width: 50%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width: 100%"></div>
</div>

Các lớp (bg-success, bg-info, bg-warning, bg-danger) cho chúng ta thanh màu xanh lá, xanh dương, vàng và đỏ tương ứng. Nó giống như có một chiếc cầu vồng của thanh tiến trình!

Nhiều Thanh

Đôi khi, một thanh không đủ. Có lẽ bạn muốn hiển thị tiến trình trong nhiều danh mục tất cả trong một thanh. Bootstrap cho phép chúng ta chồng nhiều thanh:

<div class="progress">
<div class="progress-bar" style="width: 15%">15%</div>
<div class="progress-bar bg-success" style="width: 30%">30%</div>
<div class="progress-bar bg-info" style="width: 20%">20%</div>
</div>

Điều này tạo ra một thanh tiến trình duy nhất với ba đoạn, mỗi đoạn có màu và chiều rộng khác nhau. Nó giống như một chiếc bánh sandwich nhiều màu của tiến trình!

Thanh Gạch

Muốn thêm một chút phong cách cho thanh tiến trình của bạn? Hãy thử thêm gạch chéo:

<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 40%"></div>
</div>

Lớp progress-bar-striped thêm các gạch chéo斜线 vào thanh. Nó giống như thanh tiến trình của bạn mặc một chiếc áo pinstriped sang trọng!

Gạch Đ动

Nhưng tại sao dừng lại ở các gạch tĩnh khi chúng ta có thể làm chúng di chuyển? Hãy xem điều này:

<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
</div>

Thêm lớp progress-bar-animated làm cho các gạch di chuyển từ phải sang trái. Nó giống như thanh tiến trình của bạn đang nhảy một điệu nhảy!

Kết Hợp Tất Cả

Bây giờ chúng ta đã học được tất cả các tính năng này, hãy kết hợp chúng thành một thanh tiến trình siêu đẳng:

<div class="progress" style="height: 30px;">
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 40%">40% Complete</div>
</div>

Điều này tạo ra một thanh tiến trình cao, xanh lá, có gạch chéo và di động, đầy 40% với nhãn. Nó giống như một cây kéo đa năng của thanh tiến trình!

Kết Luận

Và thế là xong, các bạn! Bây giờ bạn đã trở thành một chuyên gia thanh tiến trình Bootstrap. Hãy nhớ, những thanh này không chỉ là những hình ảnh đẹp mà còn là cách để giao tiếp với người dùng, giữ cho họ được thông tin và tham gia.

Trong hành trình lập mã của bạn, đừng quên thử nghiệm và vui chơi. Có lẽ bạn sẽ tạo ra một thanh tiến trình đầy lên khi bạn cuộn xuống trang, hoặc một thanh cho thấy bạn đã gần như đánh bại kỷ lục cao nhất của mình trong một trò chơi. Các khả năng là vô tận!

Tiếp tục mã hóa, tiếp tục học hỏi, và quan trọng nhất, tiếp tục tiến hóa. Đến gặp lại các bạn vào lần sau, này là người thầy máy tính thân thiện của bạn tạm biệt!

Credits: Image by storyset