Bootstrap - Alerts: Hướng dẫn thân thiện về thông báo bắt mắt

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới tuyệt vời của Bootstrap Alerts. Là giáo viên máy tính hàng xóm của bạn, tôi rất háo hức dẫn bạn đi qua hành trình này. tin tôi đi, đến cuối bài hướng dẫn này, bạn sẽ có thể tạo ra những thông báo làm cho website của bạn nổi bật!

Alerts là gì?

Trước khi chúng ta bắt đầu, hãy nói về alerts là gì. Hãy tưởng tượng bạn đang đi trên phố, và bỗng nhiên bạn thấy một biển báo vàng sáng với dòng chữ "Cẩn thận: Sàn ướt". Đó là một thông báo trong thế giới thực! Trong thiết kế web, alerts có mục đích tương tự - chúng thu hút sự chú ý của người dùng và cung cấp thông tin quan trọng.

Bootstrap, công cụ thiết kế web đáng tin cậy của chúng ta, giúp tạo ra những thông báo này một cách dễ dàng. Vậy, hãy cởi bỏ áo và bắt đầu nào!

Alerts đơn giản: Những khối xây dựng cơ bản

Cấu trúc cơ bản

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

<div class="alert alert-primary" role="alert">
Đây là một thông báo chính - hãy kiểm tra nó nhé!
</div>

Bây giờ, hãy phân tích nó:

1. Chúng ta bắt đầu với một phần tử <div>. Hãy nghĩ về này như một hộp sẽ chứa thông báo của chúng ta.
2. class="alert" cho biết với Bootstrap rằng div này là một thông báo.
3. alert-primary thiết lập màu sắc. Trong trường hợp này, nó là màu chính (thường là xanh dương trong Bootstrap).
4. role="alert" là cho khả năng tiếp cận. Nó giúp các máy đọc màn hình hiểu rằng đây là một thông báo.

Màu sắc đa dạng cho alerts

Bootstrap cung cấp cho chúng ta nhiều màu sắc để chọn. Hãy nhìn qua tất cả các tùy chọn:

Class	Mục đích
alert-primary	Màu chính của chủ đề
alert-secondary	Màu phụ của chủ đề
alert-success	Chỉ thị thành công
alert-danger	Chỉ thị nguy hiểm hoặc lỗi
alert-warning	Chỉ thị cảnh báo
alert-info	Cung cấp thông tin
alert-light	Nền sáng với chữ tối
alert-dark	Nền tối với chữ sáng

Thử thay thế alert-primary trong ví dụ của chúng ta với các lớp khác. Nó như thể bạn có một hộp crayon cho alerts của mình!

Ví dụ thông báo sống: Làm sống alerts

Bây giờ, hãy xem cách chúng ta có thể làm cho alerts phản ứng với hành động của người dùng. Đây là một tuyệt chiêu:

<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Hiển thị thông báo sống</button>

<script>
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const appendAlert = (message, type) => {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
`   <div>${message}</div>`,
'   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
'</div>'
].join('')

alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
alertTrigger.addEventListener('click', () => {
appendAlert('Tuyệt vời, bạn đã kích hoạt thông báo này!', 'success')
})
}
</script>

Wow, đó là rất nhiều! Hãy phân tích nó:

1. Chúng ta có một placeholder <div> nơi thông báo của chúng ta sẽ xuất hiện.
2. Có một nút khi được nhấp sẽ hiển thị thông báo.
3. Mã JavaScript lắng nghe sự kiện nhấp vào nút.
4. Khi được nhấp, nó tạo ra một thông báo mới và thêm nó vào trang.

Đây như phép thuật - bạn nhấp vào một nút, và voilà! Một thông báo xuất hiện!

Màu sắc cho liên kết: Làm cho liên kết nổi bật

Đôi khi, bạn muốn thêm liên kết vào thông báo. Bootstrap đảm bảo rằng các liên kết này nổi bật:

<div class="alert alert-primary" role="alert">
Đây là một thông báo chính với <a href="#" class="alert-link">liên kết ví dụ</a>. Hãy nhấp vào nó nếu bạn thích.
</div>

Lớp alert-link đảm bảo rằng màu sắc của liên kết phù hợp với chủ đề của thông báo. Nó như thể bạn đang phối đồ - mọi thứ đều match hoàn hảo!

Nội dung bổ sung: Tăng cường thông báo của bạn

Muốn làm cho thông báo của bạn nhiều thông tin hơn? Bạn có thể thêm tiêu đề, đoạn văn và thậm chí là các phân cách:

<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Xuất sắc!</h4>
<p>Ồ yeah, bạn đã đọc thành công thông báo quan trọng này. Văn bản ví dụ này sẽ chạy dài hơn một chút để bạn có thể thấy cách khoảng cách trong thông báo hoạt động với loại nội dung này.</p>
<hr>
<p class="mb-0">Khi nào bạn cần, hãy chắc chắn sử dụng các công cụ margin để giữ mọi thứ ngăn nắp.</p>
</div>

Đây như thể bạn đang biến thông báo của mình thành một bài viết mini. Hoàn hảo cho khi bạn có nhiều điều để nói!

Alerts với biểu tượng: Thêm yếu tố trực quan

Biểu tượng có thể làm cho alerts của bạn nổi bật hơn. Đây là cách bạn thêm chúng:

<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
<div>
Một ví dụ thông báo với biểu tượng
</div>
</div>

Mã SVG ở đây tạo ra một hình tam giác cảnh báo nhỏ. Nó như thể thêm emoji vào tin nhắn của bạn - nó giúp truyền tải cảm xúc!

Cho phép đóng alerts: Cho phép người dùng关闭 alerts

Đôi khi, bạn muốn cho người dùng tùy chọn đóng thông báo. Đây là cách:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Ôi guacamole!</strong> Bạn nên kiểm tra một số lĩnh vực bên dưới.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Lớp alert-dismissible và nút <button> với data-bs-dismiss="alert" làm cho thông báo này có thể đóng. Nó như thể bạn đang cho người dùng một remote điều khiển cho alerts của mình!

Alerts với动画: Thêm một chút linh hoạt

Cuối cùng, hãy nói về việc thêm动画 vào alerts. Bootstrap sử dụng các lớp fade và show cho điều này:

<div class="alert alert-primary alert-dismissible fade show" role="alert">
Thông báo này sẽ mờ vào và mờ ra!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Lớp fade thêm hiệu ứng chuyển đổi mượt mà, trong khi show làm cho thông báo hiển thị. Khi thông báo bị đóng, nó sẽ mờ ra một cách nhẹ nhàng. Nó như thể thông báo của bạn đang bow trước khi rời sân khấu!

Và thế là bạn đã hoàn thành một chuyến đi nhanh qua Bootstrap Alerts. Nhớ rằng, thực hành là cách tốt nhất để trở thành người thợ giỏi, vì vậy đừng ngần ngại thử nghiệm với các ví dụ này. Trước khi bạn biết điều đó, bạn sẽ có thể tạo ra các thông báo không chỉ thông báo cho người dùng mà còn làm họ thích thú với phong cách và chức năng của chúng. Chúc các bạn may mắn và alerts của bạn luôn thu hút sự chú ý (một cách tốt)!

Credits: Image by storyset