Quay lại-
0
-
0
-
FacebookGiới thiệu sản phẩm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!--
pagination: kích hoạt giao diện phân trang
page-item: đại diện cho từng nút bấm
page-link: phần mà người dùng click vào
active: cho biết vị trí trang hiện tại
pagination-sm,pagination-lg: kích thước nút phân trang
justify-content-center: căn giữa
justify-content-end: căn phải
-->
<ul class ="pagination pagination-lg justify-content-center">
<li class = "page-item disabled ">
<a href="" class = "page-link">Trước</a>
</li>
<li class = "page-item active">
<a href="" class = "page-link">1</a>
</li>
<li class = "page-item">
<a href="" class = "page-link">2</a>
</li>
<li class = "page-item">
<a href="" class = "page-link">Sau</a>
</li>
</ul>
<!--progress-->
<!--
progress : khung chứa màu xám bên ngoài
progress-bar : phần tiến độ được tô màu
progress-bar-striped : phần tiến độ sọc
progress-bar-animated : thanh sọc chuyển động
-->
<div class = "container">
<div class = "progress ">
<div class = "progress-bar progress-bar-striped progress-bar-animated bg-danger" style = "width: 80%;">
80/100
</div>
</div>
</div>
<div class = "container mt-3">
<div class = "progress">
<div class = "progress-bar progress-bar-striped bg-primary" style = "width: 50%">
50/100
</div>
</div>
</div>
<!--
Toast
position-fixed: cố định vị trí thông báo trên màn hình
-->
<div class = "toast-container position-fixed top-0 end-0 m-2">
<div class = "toast" id = "mytoast" data-bs-delay = "7000">
<div class = "toast-header">Thông báo</div>
<div class = "toast-item">Lưu thành công</div>
</div>
</div>
<!--Spinner -->
<div class = "spinner-border"></div>
<script>
const toast = new bootstrap.Toast(
document.getElementById("mytoast")
)
toast.show()
</script>
</body>
</html>
Hãy bình luận để nhặt 100 thóc nhé
Sản phẩm cùng tác giả
-
Nhà sáng tạo Nguyễn Trung Dũngbuổi 12 -
Nhà sáng tạo Nguyễn Trung Dũngbuổi 6 -
Nhà sáng tạo Nguyễn Trung DũngBuổi 4
Đăng nhập để tham gia bình luận