Cảnh báo Bootstrap ví dụ

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}
 Nội dung chính Show
 
Ví dụ trực tiếp
Màu sắc liên kết
Nội dung bổ sung
Biểu tượng
hành vi JavaScript
Khởi tạo
phương pháp
Sự kiện
tùy chỉnh
biến SASS
biến thể SASS
Làm cách nào để hiển thị cảnh báo trong Bootstrap?
Cảnh báo bootstrap là gì và bạn sẽ tạo chúng như thế nào?
Lớp Bootstrap 4 nào có thể được sử dụng để tạo cảnh báo thành công?
Làm cách nào để sử dụng cảnh báo Bootstrap trong Angular?
 
`,
    '   ',
    '
'
  ].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áo

Cả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')
  })
}

3

Ví 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

  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')
    })
  }
  

  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út

  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')
    })
  }
  

  6
• Trên nút đóng, hãy thêm 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 để 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ị
• Để 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

  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

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!

5

Khi 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!

9

Vớ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ách

Xem 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ưới

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

hoặ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ưới

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

Lư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.

4

sử dụng cơ bản

Show live alert

2

Sự 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

3

tù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

4

biến SASS

Show live alert

5

biế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

Làm cách nào để hiển thị cảnh báo trong Bootstrap?

Cảnh báo bootstrap là gì và bạn sẽ tạo chúng như thế nào?

Lớp Bootstrap 4 nào có thể được sử dụng để tạo cảnh báo thành công?

Làm cách nào để sử dụng cảnh báo Bootstrap trong Angular?