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>Buổi 7</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>
<!--
Modal
modal-dialog-centerd: thông báo hiển thị giữa màn hình
modal-fullscreen: thông báo hiển thị chiếm toàn màn hình
modal-sm,modal-lg,modal-xl: kích thước hộp thoại
-->
<button class = "btn btn-primary " data-bs-toggle = "modal" data-bs-target = "#thongbao">
Mở modal
</button>
<div class = "modal face" id = "thongbao">
<div class = "modal-dialog modal-dialog-centered">
<div class = "modal-content">
<div class = "modal-header">
Tiêu đề
</div>
<div class = "modal-body">
Nội dung
</div>
<div class = "modal-footer">
<button class = "btn btn-danger" data-bs-dismiss = "modal">
ĐÓNG
</button>
</div>
</div>
</div>
</div>
<!--Display-->
<!--
d-inline-block: nằm ngang hàng với nhau
và có thể chỉnh kích thước được
-->
<p class = "d-inline-block">Hello</p>
<p class = "d-inline-block">World</p>
<h1 class = "display-1 text-center">Hello</h1>
<h1 class = "display-2 text-center">Hi</h1>
<h1 class = "display-3 text-center">Xin chào</h1>
<!--Popover-->
<button class = "btn btn-success" data-bs-toggle = "popover" data-bs-title = "Tiêu đề "
data-bs-content = "Nội dung thông báo" data-bs-placement = "end"
data-bs-trigger = "hover">
Nhấn vào đây
</button>
<div class = "container">
<div class = "row">
<input type="text" placeholder = "Tên đăng nhập" data-bs-toggle = "popover" data-bs-title = "Lưu ý "
data-bs-content = "Nhập ít nhất 14 ký tự " data-bs-trigger = "focus">
<input type="text" placeholder = "Vị trí ứng tuyển" data-bs-toggle = "popover" data-bs-title = "Lưu ý "
data-bs-content = "Chỉ nhập chữ" data-bs-trigger = "focus">
<input type="number" placeholder = "Số điện thoại" data-bs-toggle = "popover" data-bs-title = "Lưu ý "
data-bs-content = "Chỉ nhập số" data-bs-trigger = "focus">
<input type="email" placeholder = "Email" data-bs-toggle = "popover" data-bs-title = "Lưu ý "
data-bs-content = "" data-bs-trigger = "focus">
</div>
</div>
<script>
const popoverTriggerList =
document.querySelectorAll(
'[data-bs-toggle="popover"]'
)
const popoverList =
[...popoverTriggerList].map(
popoverTrigger =>
new bootstrap.Popover(
popoverTrigger
))
</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 5
Đăng nhập để tham gia bình luận