Bootstrap - Bóng tải
Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ khám phá thế giới thú vị của các bóng tải Bootstrap. Là người giáo viên máy tính gần gũi của bạn, tôi ở đây để hướng dẫn bạn qua hành trình này, từng bước một. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau tìm hiểu về bóng tải trong hướng dẫn này!
Cách hoạt động
Bóng tải trong Bootstrap được sử dụng để chỉ ra trạng thái tải trong các ứng dụng web của bạn. Chúng giống như những vòng tròn quay nhỏ mà bạn thấy khi một trang web đang tải nội dung. Những thành phần nhỏ gọn này giúp cải thiện trải nghiệm người dùng bằng cách cung cấp phản hồi trực quan rằng có điều gì đó đang diễn ra phía sau màn hình.
Bóng tải Bootstrap được xây dựng với HTML, CSS và một chút phép màu JavaScript. Chúng sử dụng CSS tùy chỉnh để tạo hiệu ứng quay, đảm bảo một giao diện mượt mà và nhất quán trên các trình duyệt và thiết bị khác nhau.
Bóng tải viền
Hãy bắt đầu với bóng tải cơ bản nhất: bóng tải viền. Đây là phong cách bóng tải mặc định trong Bootstrap.
<div class="spinner-border" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>Trong ví dụ này, chúng ta có một phần tử div với hai lớp: spinner-border và role="status". Lớp spinner-border áp dụng hiệu ứng quay, trong khi role="status" giúp các trình đọc màn hình hiểu rằng đây là một chỉ báo trạng thái.
Bên trong div, chúng ta có một span với lớp visually-hidden. Văn bản này không hiển thị trên màn hình nhưng có thể được đọc bởi các trình đọc màn hình, cải thiện khả năng truy cập cho người dùng có khuyết tật thị giác.
Màu sắc
Giống như một con kỳ nhông thay đổi màu sắc, các bóng tải của chúng ta cũng có thể thích nghi với các chủ đề khác nhau! Bootstrap cho phép bạn tùy chỉnh màu sắc của bóng tải bằng cách sử dụng các công cụ màu sắc của văn bản.
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>Mỗi bóng tải trong ví dụ này có một lớp bổ sung như text-primary, text-secondary, v.v. Các lớp này thay đổi màu sắc của bóng tải để phù hợp với bảng màu của Bootstrap.
Bóng tải tăng trưởng
Nếu bóng tải viền không phải là lựa chọn của bạn, Bootstrap cung cấp một hương vị khác: bóng tải tăng trưởng. Bóng tải này tăng và giảm kích thước thay vì quay.
<div class="spinner-grow" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>Cấu trúc tương tự như bóng tải viền, nhưng chúng ta sử dụng lớp spinner-grow thay vì spinner-border.
Căn chỉnh
Căn chỉnh bóng tải rất dễ dàng với các công cụ flexbox của Bootstrap. Hãy xem một số ví dụ:
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Đang tải...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>Trong ví dụ đầu tiên, chúng ta sử dụng justify-content-center để căn giữa bóng tải theo chiều ngang. Trong ví dụ thứ hai, chúng ta căn giữa bóng tải theo chiều dọc với một đoạn văn bản bằng cách sử dụng align-items-center.
Lề
Nếu bạn cần một khoảng trống xung quanh bóng tải, các công cụ lề của Bootstrap sẽ giúp bạn!
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>Lớp m-5 thêm một lề kích thước 5 (thường là 3rem) xung quanh tất cả các bên của bóng tải.
Đặt vị trí
Bóng tải có thể được đặt trong nhiều phần tử khác nhau. Dưới đây là cách bạn có thể đặt một bóng tải bên trong một nút:
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Đang tải...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Đang tải...
</button>Trong các ví dụ này, chúng ta đặt bóng tải bên trong một nút và sử dụng spinner-border-sm để làm nhỏ hơn.
Flex
Các công cụ flexbox có thể giúp bạn tạo ra các bố cục phức tạp hơn với bóng tải:
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>
</div>Điều này căn giữa bóng tải theo chiều ngang trong container của nó.
Float
Khi bạn cần bóng tải nổi, các công cụ nổi của Bootstrap sẽ giúp bạn:
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>
</div>Lớp float-end làm cho bóng tải nổi bên phải của container.
Căn chỉnh văn bản
Các công cụ căn chỉnh văn bản cũng có thể được sử dụng với bóng tải:
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>
</div>Điều này căn giữa bóng tải trong container bằng cách sử dụng căn chỉnh văn bản.
Kích thước
Đôi khi, kích thước thực sự quan trọng! Bạn có thể điều chỉnh kích thước của bóng tải bằng cách sử dụng các lớp kích thước của Bootstrap:
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Đang tải...</span>
</div>Sử dụng spinner-border-sm hoặc spinner-grow-sm để tạo bóng tải nhỏ hơn. Để có kích thước tùy chỉnh, bạn có thể sử dụng các thuộc tính inline để đặt kích thước cụ thể.
Nút
Cuối cùng, hãy xem cách sử dụng bóng tải trong các nút:
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Đang tải...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Đang tải...
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Đang tải...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Đang tải...
</button>Các ví dụ này cho thấy cách tích hợp cả bóng tải viền và tăng trưởng vào các nút, có hoặc không có văn bản kèm theo.
Và đó là tất cả, các bạn! Bây giờ bạn đã trở thành một chuyên gia về bóng tải Bootstrap. Nhớ rằng, thực hành là cách tốt nhất để hoàn thiện, vì vậy đừng ngần ngại thử nghiệm các thành phần này trong các dự án của bạn. Chúc mừng coding, và mong rằng các trang web của bạn luôn quay một cách.style!
Credits: Image by storyset