Buzz
Bootstrap 4 giới thiệu thành phần mới là Spinner, để hiển thị trạng thái đang tải. Hãy đọc tiếp để hiểu rõ hơn về Vòng quay trong Bootstrap.
Khám phá Spinner trong Bootstrap
1. Xây dựng Spinner trong Bootstrap
Spinner là biểu tượng thường được sử dụng để hiển thị trạng thái đang tải, chẳng hạn như khi ứng dụng hoặc trang web đang tải dữ liệu. Chúng được phát triển dựa trên HTML và CSS. Tuy nhiên, để hiển thị hoặc ẩn spinner trên trang web, chúng ta cần sử dụng JavaScript tùy chỉnh.
Ngoài ra, chúng ta có thể dễ dàng tùy chỉnh giao diện, kích thước và căn chỉnh các spinner bằng cách sử dụng các lớp tiện ích được định nghĩa sẵn.
Để tạo một spinner, chúng ta sử dụng lớp .spinner-border như ví dụ sau:
Kết quả xuất ra sẽ giống như sau:
Dùng lớp .sr-only để ẩn một phần tử trên tất cả các thiết bị, trừ trình đọc màn hình.
2. Tạo Spinner với các màu sắc khác nhau
Sử dụng các lớp tiện ích màu sắc để tùy chỉnh màu sắc cho spinner như trong ví dụ sau:
Kết quả xuất ra sẽ có dạng như sau:
3. Tạo Spinner động
Bên cạnh đó, chúng ta cũng có thể tạo ra các spinner động, là các biểu tượng xuất hiện và sau đó mờ dần đi.
Ví dụ: Dưới đây là một ví dụ minh họa về cách tạo spinner động trong Bootstrap:
Kết quả xuất ra sẽ giống như sau:
Tương tự, chúng ta có thể tuỳ chỉnh màu sắc của các spinner động bằng cách sử dụng các lớp tiện ích màu sắc như trong ví dụ dưới đây:
Kết quả xuất ra sẽ có dạng như sau:
4. Kích thước của Spinner
Bằng cách sử dụng lớp .spinner-border-sm và lớp .spinner-grow-sm để tạo spinner có kích thước nhỏ hơn, phù hợp cho việc tích hợp vào các thành phần như nút bấm.
Ví dụ: Trong ví dụ dưới đây là cách thay đổi kích thước của spinner trong Bootstrap:
Kết quả xuất ra sẽ có dạng như sau:
Hoặc chúng ta cũng có thể sử dụng CSS tùy chỉnh để điều chỉnh kích thước của spinner.
Kết quả xuất ra sẽ như sau:
5. Thêm Spinner vào các nút trong Bootstrap
Thêm spinner vào các nút giúp người dùng dễ dàng nhận biết hành động hoặc tác vụ đang được thực hiện.
Ví dụ: Trong ví dụ dưới đây là minh họa thêm các spinner vào các nút bị vô hiệu hóa:
Kết quả xuất ra sẽ có dạng như sau:
6. Căn chỉnh Spinner trong Bootstrap
Để căn chỉnh các spinner trong Bootstrap sang trái, phải hoặc chính giữa, chúng ta có thể sử dụng các lớp căn chỉnh văn bản, lớp flexbox hoặc lớp float.
Ví dụ: Dưới đây là một ví dụ minh họa về cách căn chỉnh spinner trong Bootstrap:
Kết quả xuất ra sẽ như sau:
Trong bài học Bootstrap này, Mytour đã giới thiệu về Spinner trong Bootstrap. Trong bài học tiếp theo, Mytour sẽ tiếp tục giới thiệu về Jumbotron trong Bootstrap.
Ngoài ra, bạn đọc cũng có thể tham khảo một số bài viết khác trên Mytour để hiểu rõ hơn về Pagination trong Bootstrap.
