Cảnh báo Bootstrap được chuẩn bị cho bất kỳ độ dài văn bản nào, cũng như nút đóng tùy chọn. Để tạo kiểu, hãy sử dụng một trong các lớp ngữ cảnh bắt buộc [e. g. ,
const alertPlaceholder = document.getElementById['liveAlertPlaceholder']
const alert = [message, type] => {
const wrapper = document.createElement['div']
wrapper.innerHTML = [
``,
`
${message}
`,
' ',
''
].join['']
alertPlaceholder.append[wrapper]
}
const alertTrigger = document.getElementById['liveAlertBtn']
if [alertTrigger] {
alertTrigger.addEventListener['click', [] => {
alert['Nice, you triggered this alert message!', 'success']
}]
}
2]. Để loại bỏ nội tuyến, hãy sử dụng plugin JavaScript cảnh báoCảnh báo chính đơn giản—hãy kiểm tra
Một cảnh báo phụ đơn giản—hãy kiểm tra
Một cảnh báo thành công đơn giản—hãy kiểm tra
Cảnh báo nguy hiểm đơn giản—hãy kiểm tra
Cảnh báo cảnh báo đơn giản—hãy kiểm tra
Cảnh báo thông tin đơn giản—hãy kiểm tra
Một cảnh báo ánh sáng đơn giản—hãy kiểm tra
Cảnh báo tối đơn giản—hãy kiểm tra
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
Truyền đạt ý nghĩa cho các công nghệ hỗ trợ
Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp dấu hiệu trực quan, dấu hiệu này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ – chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc rõ ràng từ chính nội dung [e. g. văn bản hiển thị], hoặc được bao gồm thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung ẩn với lớp
const alertPlaceholder = document.getElementById['liveAlertPlaceholder']
const alert = [message, type] => {
const wrapper = document.createElement['div']
wrapper.innerHTML = [
``,
`
${message}
`,
' ',
''
].join['']
alertPlaceholder.append[wrapper]
}
const alertTrigger = document.getElementById['liveAlertBtn']
if [alertTrigger] {
alertTrigger.addEventListener['click', [] => {
alert['Nice, you triggered this alert message!', 'success']
}]
}
3Ví dụ trực tiếp
Nhấp vào nút bên dưới để hiển thị cảnh báo [ẩn với kiểu nội tuyến để bắt đầu], sau đó loại bỏ [và hủy] cảnh báo đó bằng nút đóng tích hợp
Show live alert
Chúng tôi sử dụng JavaScript sau để kích hoạt bản trình diễn cảnh báo trực tiếp của mình
const alertPlaceholder = document.getElementById['liveAlertPlaceholder']
const alert = [message, type] => {
const wrapper = document.createElement['div']
wrapper.innerHTML = [
``,
`
${message}
`,
' ',
''
].join['']
alertPlaceholder.append[wrapper]
}
const alertTrigger = document.getElementById['liveAlertBtn']
if [alertTrigger] {
alertTrigger.addEventListener['click', [] => {
alert['Nice, you triggered this alert message!', 'success']
}]
}
Màu sắc liên kết
Sử dụng lớp tiện ích
const alertPlaceholder = document.getElementById['liveAlertPlaceholder']
const alert = [message, type] => {
const wrapper = document.createElement['div']
wrapper.innerHTML = [
``,
`
${message}
`,
' ',
''
].join['']
alertPlaceholder.append[wrapper]
}
const alertTrigger = document.getElementById['liveAlertBtn']
if [alertTrigger] {
alertTrigger.addEventListener['click', [] => {
alert['Nice, you triggered this alert message!', 'success']
}]
}
4 để ngay lập tức cung cấp các liên kết có màu phù hợp bên trong bất kỳ cảnh báo nào
A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.
Nội dung bổ sung
Cảnh báo cũng có thể kết hợp các phần tử HTML bổ sung như tiêu đề, đoạn văn và dải phân cách
Tốt lắm
Aww yeah, bạn đã đọc thành công thông báo cảnh báo quan trọng này. Văn bản ví dụ này sẽ chạy lâu hơn một chút để bạn có thể thấy khoảng cách trong cảnh báo hoạt động như thế nào với loại nội dung này
Bất cứ khi nào bạn cần, hãy nhớ sử dụng các tiện ích ký quỹ để giữ mọi thứ gọn gàng và ngăn nắp
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Biểu tượng
Tương tự, bạn có thể sử dụng tiện ích flexbox và Biểu tượng Bootstrap để tạo cảnh báo bằng biểu tượng. Tùy thuộc vào biểu tượng và nội dung của bạn, bạn có thể muốn thêm nhiều tiện ích hoặc kiểu tùy chỉnh
Một ví dụ cảnh báo với một biểu tượng
________số 8
Cần nhiều hơn một biểu tượng cho cảnh báo của bạn?
Một ví dụ cảnh báo với một biểu tượng
Một cảnh báo thành công ví dụ với một biểu tượng
Một ví dụ cảnh báo cảnh báo với một biểu tượng
Một ví dụ về cảnh báo nguy hiểm với một biểu tượng
An example alert with an icon
An example success alert with an icon
An example warning alert with an icon
An example danger alert with an icon
sa thải
Sử dụng plugin JavaScript, có thể xóa mọi cảnh báo
- Đảm bảo bạn đã tải plugin cảnh báo bootstrap hoặc JavaScript CoreUI đã biên dịch
- Thêm một nút đóng và lớp
5, thêm một số phần đệm bổ sung vào bên phải của thành phần cảnh báo và đặt nútconst alertPlaceholder = document.getElementById['liveAlertPlaceholder'] const alert = [message, type] => { const wrapper = document.createElement['div'] wrapper.innerHTML = [ `
`, `
${message}
`, ' ', '' ].join[''] alertPlaceholder.append[wrapper] } const alertTrigger = document.getElementById['liveAlertBtn'] if [alertTrigger] { alertTrigger.addEventListener['click', [] => { alert['Nice, you triggered this alert message!', 'success'] }] }
6const alertPlaceholder = document.getElementById['liveAlertPlaceholder'] const alert = [message, type] => { const wrapper = document.createElement['div'] wrapper.innerHTML = [ `
`, `
${message}
`, ' ', '' ].join[''] alertPlaceholder.append[wrapper] } const alertTrigger = document.getElementById['liveAlertBtn'] if [alertTrigger] { alertTrigger.addEventListener['click', [] => { alert['Nice, you triggered this alert message!', 'success'] }] } - Trên nút đóng, hãy thêm thuộc tính
7 để kích hoạt chức năng JavaScript. Bạn phải sử dụng phần tử với nó để có hành vi phù hợp trên tất cả các thiết bịconst alertPlaceholder = document.getElementById['liveAlertPlaceholder'] const alert = [message, type] => { const wrapper = document.createElement['div'] wrapper.innerHTML = [ `
`, `
${message}
`, ' ', '' ].join[''] alertPlaceholder.append[wrapper] } const alertTrigger = document.getElementById['liveAlertBtn'] if [alertTrigger] { alertTrigger.addEventListener['click', [] => { alert['Nice, you triggered this alert message!', 'success'] }] } - Để làm động các cảnh báo khi loại bỏ chúng, bạn phải thêm các lớp
8 vàconst alertPlaceholder = document.getElementById['liveAlertPlaceholder'] const alert = [message, type] => { const wrapper = document.createElement['div'] wrapper.innerHTML = [ `
`, `
${message}
`, ' ', '' ].join[''] alertPlaceholder.append[wrapper] } const alertTrigger = document.getElementById['liveAlertBtn'] if [alertTrigger] { alertTrigger.addEventListener['click', [] => { alert['Nice, you triggered this alert message!', 'success'] }] }
9const alertPlaceholder = document.getElementById['liveAlertPlaceholder'] const alert = [message, type] => { const wrapper = document.createElement['div'] wrapper.innerHTML = [ `
`, `
${message}
`, ' ', '' ].join[''] alertPlaceholder.append[wrapper] } const alertTrigger = document.getElementById['liveAlertBtn'] if [alertTrigger] { alertTrigger.addEventListener['click', [] => { alert['Nice, you triggered this alert message!', 'success'] }] }
Bạn có thể thấy điều này đang hoạt động với một bản demo trực tiếp
Guacamole thánh. Bạn nên kiểm tra một số lĩnh vực dưới đây
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
5Khi cảnh báo bị loại bỏ, phần tử sẽ bị xóa hoàn toàn khỏi cấu trúc trang. Nếu người dùng bàn phím loại bỏ cảnh báo bằng nút đóng, tiêu điểm của họ sẽ đột ngột bị mất và tùy thuộc vào trình duyệt, được đặt lại về đầu trang/tài liệu. Vì lý do này, chúng tôi khuyên bạn nên bao gồm JavaScript bổ sung lắng nghe sự kiện
A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.
0 và đặt
A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.
1 theo chương trình vào vị trí thích hợp nhất trong trang. Nếu bạn định chuyển tiêu điểm sang một phần tử không tương tác thường không nhận được tiêu điểm, hãy đảm bảo thêm
A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.
2 vào phần tử đóhành vi JavaScript
Khởi tạo
Khởi tạo các phần tử dưới dạng cảnh báo
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
9Với mục đích duy nhất là loại bỏ cảnh báo, không cần thiết phải khởi tạo thành phần theo cách thủ công thông qua API JS. Bằng cách sử dụng
const alertPlaceholder = document.getElementById['liveAlertPlaceholder']
const alert = [message, type] => {
const wrapper = document.createElement['div']
wrapper.innerHTML = [
``,
`
${message}
`,
' ',
''
].join['']
alertPlaceholder.append[wrapper]
}
const alertTrigger = document.getElementById['liveAlertBtn']
if [alertTrigger] {
alertTrigger.addEventListener['click', [] => {
alert['Nice, you triggered this alert message!', 'success']
}]
}
7, thành phần sẽ được khởi tạo tự động và loại bỏ đúng cáchXem phần kích hoạt để biết thêm chi tiết
Gây nên
Có thể loại bỏ bằng thuộc tính
A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.
4 trên một nút trong cảnh báo như minh họa bên dướiconst alertPlaceholder = document.getElementById['liveAlertPlaceholder']
const alert = [message, type] => {
const wrapper = document.createElement['div']
wrapper.innerHTML = [
``,
`
${message}
`,
' ',
''
].join['']
alertPlaceholder.append[wrapper]
}
const alertTrigger = document.getElementById['liveAlertBtn']
if [alertTrigger] {
alertTrigger.addEventListener['click', [] => {
alert['Nice, you triggered this alert message!', 'success']
}]
}
2hoặc trên một nút bên ngoài cảnh báo bằng cách sử dụng
A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.
5 như minh họa bên dướiconst alertPlaceholder = document.getElementById['liveAlertPlaceholder']
const alert = [message, type] => {
const wrapper = document.createElement['div']
wrapper.innerHTML = [
``,
`
${message}
`,
' ',
''
].join['']
alertPlaceholder.append[wrapper]
}
const alertTrigger = document.getElementById['liveAlertBtn']
if [alertTrigger] {
alertTrigger.addEventListener['click', [] => {
alert['Nice, you triggered this alert message!', 'success']
}]
}
2Lưu ý rằng việc đóng cảnh báo sẽ xóa cảnh báo đó khỏi DOM
phương pháp
Ví dụ, bạn có thể tạo một thể hiện cảnh báo bằng hàm tạo cảnh báo
Show live alert
1Điều này làm cho một cảnh báo lắng nghe các sự kiện nhấp chuột trên các phần tử hậu duệ có thuộc tính
const alertPlaceholder = document.getElementById['liveAlertPlaceholder']
const alert = [message, type] => {
const wrapper = document.createElement['div']
wrapper.innerHTML = [
``,
`
${message}
`,
' ',
''
].join['']
alertPlaceholder.append[wrapper]
}
const alertTrigger = document.getElementById['liveAlertBtn']
if [alertTrigger] {
alertTrigger.addEventListener['click', [] => {
alert['Nice, you triggered this alert message!', 'success']
}]
}
7. [Không cần thiết khi sử dụng tính năng khởi tạo tự động của data-api. ]MethodDescription
A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.
7Đóng một cảnh báo bằng cách xóa nó khỏi DOM. Nếu các lớp const alertPlaceholder = document.getElementById['liveAlertPlaceholder']
const alert = [message, type] => {
const wrapper = document.createElement['div']
wrapper.innerHTML = [
``,
`
${message}
`,
' ',
''
].join['']
alertPlaceholder.append[wrapper]
}
const alertTrigger = document.getElementById['liveAlertBtn']
if [alertTrigger] {
alertTrigger.addEventListener['click', [] => {
alert['Nice, you triggered this alert message!', 'success']
}]
}
8 và const alertPlaceholder = document.getElementById['liveAlertPlaceholder']
const alert = [message, type] => {
const wrapper = document.createElement['div']
wrapper.innerHTML = [
``,
`
${message}
`,
' ',
''
].join['']
alertPlaceholder.append[wrapper]
}
const alertTrigger = document.getElementById['liveAlertBtn']
if [alertTrigger] {
alertTrigger.addEventListener['click', [] => {
alert['Nice, you triggered this alert message!', 'success']
}]
}
9 xuất hiện trên phần tử, cảnh báo sẽ mờ dần trước khi nó bị xóa.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
0Hủy bỏ cảnh báo của một phần tử. [Xóa dữ liệu được lưu trữ trên phần tử DOM]
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
1Phương thức tĩnh cho phép bạn nhận phiên bản cảnh báo được liên kết với phần tử DOM. Ví dụ.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
2.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
3Phương thức tĩnh trả về một thể hiện cảnh báo được liên kết với một phần tử DOM hoặc tạo một phần tử mới trong trường hợp nó không được khởi tạo. Bạn có thể sử dụng nó như thế này.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
4sử dụng cơ bản
Show live alert
2Sự kiện
Plugin cảnh báo của CoreUI cho Bootstrap hiển thị một vài sự kiện để nối vào chức năng cảnh báo
EventDescription
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
5Cháy ngay lập tức khi phương thức đối tượng
A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.
7 được gọi.
A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.
0Được kích hoạt khi cảnh báo đã đóng và quá trình chuyển đổi CSS đã hoàn tất
Show live alert
3tùy chỉnh
Biến CSS
Cảnh báo sử dụng các biến CSS cục bộ trên
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
8 để tùy chỉnh nâng cao theo thời gian thực. Các giá trị cho các biến CSS được đặt thông qua Sass, do đó tùy chỉnh Sass cũng vẫn được hỗ trợ
Show live alert
4biến SASS
Show live alert
5biến thể SASS
CoreUI cho phép xác định các màu biến thể theo hai cách
Xem tài liệu về vòng lặp và bản đồ Sass của chúng tôi để biết cách tùy chỉnh các vòng lặp này và mở rộng cách tiếp cận công cụ sửa đổi cơ sở của CoreUI cho mã của riêng bạn