Үндсэн агуулга руу шилжих Docs навигаци руу алгасах
Check
in English

Анхааруулга

Боломжтой, уян хатан сэрэмжлүүлгийн мессежийн тусламжтайгаар хэрэглэгчийн ердийн үйлдлийн контексттэй холбоотой санал хүсэлтийг илгээнэ үү.

Энэ хуудсан дээр

Жишээ

Анхааруулга нь дурын урттай текст болон хаах товчлуурыг сонгох боломжтой. Зохих загварчлахын тулд шаардлагатай найман контекст ангиллын аль нэгийг ашиглана уу (жишээ нь, .alert-success). Дотор нь ажлаас халахын тулд дохионы JavaScript залгаасыг ашиглана уу .

html 
<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
Туслах технологид утгыг дамжуулах

Утга нэмэхийн тулд өнгийг ашиглах нь зөвхөн харааны заалтыг өгдөг бөгөөд энэ нь дэлгэц уншигч гэх мэт туслах технологийн хэрэглэгчдэд хүргэхгүй. Өнгөөөр тэмдэглэсэн мэдээлэл нь агуулгаасаа тодорхой (жишээ нь харагдах текст) эсвэл .visually-hiddenангид нуугдсан нэмэлт текст гэх мэт өөр хэрэгслээр орсон эсэхийг шалгаарай.

Амьд жишээ

Доорх товчлуур дээр дарж сэрэмжлүүлэг харуулах (эхлүүлэхийн тулд доторлогооны хэв маягаар нуугдаж), дараа нь суулгасан хаах товчлуураар үүнийг хааж (болон устгана уу).

html 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

Бид шууд дохиоллын демо-г идэвхжүүлэхийн тулд дараах JavaScript-г ашигладаг:

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (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', () => {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

Хэрэглээний .alert-linkангиудыг ашиглан ямар ч дохиололд тохирох өнгөт холбоосыг хурдан өгнө үү.

html 
<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Нэмэлт контент

Анхааруулга нь гарчиг, догол мөр, хуваагч зэрэг нэмэлт HTML элементүүдийг агуулж болно.

html 
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>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.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Дүрсүүд

Үүний нэгэн адил, та flexbox хэрэгслүүд болон Bootstrap Icons -ийг ашиглан дүрс бүхий анхааруулга үүсгэх боломжтой. Таны дүрс болон контентоос хамааран та илүү олон хэрэгсэл эсвэл тусгай загвар нэмэхийг хүсч болно.

html 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" 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>
    An example alert with an icon
  </div>
</div>

Таны анхааруулгад нэгээс олон дүрс хэрэгтэй байна уу? Илүү олон Bootstrap Icons ашиглаж, ижил дүрсүүдийг дахин дахин ашиглахын тулд орон нутгийн SVG спрайт хийх талаар бодож үзээрэй.

html 
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
    <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"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

Хасаж байна

Сэрэмжлүүлэг JavaScript залгаасыг ашигласнаар ямар ч дохиоллын шугамыг хаах боломжтой. Үүнд:

  • Та анхааруулах залгаас эсвэл хөрвүүлсэн Bootstrap JavaScript-г ачаалсан эсэхээ шалгаарай.
  • Сэрэмжлүүлэгийн баруун талд нэмэлт дэвсгэр нэмж, хаах товчлуурыг байрлуулдаг хаах товчлуур болон анги нэмнэ үү ..alert-dismissible
  • Хаах товчлуур дээр data-bs-dismiss="alert"JavaScript функцийг идэвхжүүлдэг атрибутыг нэмнэ үү. <button>Бүх төхөөрөмжид зөв ажиллахын тулд элементийг ашиглахаа мартуузай .
  • Сэрэмжлүүлгийг хэрэгсэхгүй болгохын тулд .fadeболон .showангиллыг нэмэхээ мартуузай.

Та үүнийг шууд үзүүлэнгээр харж болно:

html 
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Анхааруулга хаагдсан үед элемент нь хуудасны бүтцээс бүрэн хасагдана. Хэрэв гар хэрэглэгч хаах товчийг ашиглан сэрэмжлүүлгийг хэрэгсэхгүй болговол тэдний анхаарал гэнэт алдагдаж, хөтчөөс хамааран хуудас/баримт бичгийн эхлэл рүү буцах болно. Ийм учраас бид үйл явдлыг сонсож , хуудасны хамгийн тохиромжтой байршилд closed.bs.alertпрограммчлалаар тохируулдаг нэмэлт JavaScript оруулахыг зөвлөж байна. focus()Хэрэв та фокусыг ихэвчлэн фокус авдаггүй интерактив бус элемент рүү шилжүүлэхээр төлөвлөж байгаа бол tabindex="-1"тухайн элемент дээр нэмэхээ мартуузай.

CSS

Хувьсагч

5.2.0 хувилбар дээр нэмсэн

Bootstrap-ийн хөгжиж буй CSS хувьсагчийн арга барилын нэг хэсэг болгон дохиолол нь одоо .alertбодит цагийн сайжруулсан тохиргоонд локал CSS хувьсагчдыг ашигладаг. CSS хувьсагчийн утгыг Sass-ээр тохируулдаг тул Sass-н тохиргоог дэмжсэн хэвээр байна.

  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-padding-x: #{$alert-padding-x};
  --#{$prefix}alert-padding-y: #{$alert-padding-y};
  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  --#{$prefix}alert-border-radius: #{$alert-border-radius};

Sass хувьсагч

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Сасс холимог

$theme-colorsМанай сэрэмжлүүлэгт контекст өөрчлөх анги үүсгэхийн тулд хослуулан ашигладаг .

@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Сасс гогцоо

Холигчоор өөрчилсөн ангиудыг үүсгэдэг давталт alert-variant().

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);

  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

JavaScript-ийн үйлдэл

Эхлүүлэх

Элементүүдийг сэрэмжлүүлэг болгон эхлүүлэх

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

Зөвхөн анхааруулгыг хаах зорилгоор бүрэлдэхүүн хэсгийг JS API-ээр гараар эхлүүлэх шаардлагагүй. -ийг ашигласнаар data-bs-dismiss="alert"бүрэлдэхүүн хэсэг нь автоматаар эхэлж, зохих ёсоор хаагдах болно.

Дэлгэрэнгүй мэдээллийг триггер хэсгээс үзнэ үү.

Өдөөгч

Доор үзүүлсэн шиг сэрэмжлүүлэг доторхdata товчлуур дээрх шинж чанарыг ашиглан ажлаас халах боломжтой .

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

эсвэл сэрэмжлүүлгийн гаднах товчлуур дээр data-bs-targetдоор үзүүлсэн шиг :

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>

Анхааруулгыг хааснаар DOM-аас устгана гэдгийг анхаарна уу.

Арга зүй

Та анхааруулга үүсгэгчээр сэрэмжлүүлгийн жишээ үүсгэж болно, жишээлбэл:

const bsAlert = new bootstrap.Alert('#myAlert')

Энэ нь data-bs-dismiss="alert"атрибуттай удам угсааны элементүүд дээр товших үйл явдлуудыг сонсдог. (Data-api-г автоматаар эхлүүлэхийг ашиглах үед шаардлагагүй.)

Арга Тодорхойлолт
close DOM-ээс устгаснаар дохиог хаадаг. Хэрэв элемент дээр .fadeболон .showангиуд байгаа бол сэрэмжлүүлэг нь устгахаас өмнө алга болно.
dispose Элементийн сэрэмжлүүлэгийг устгадаг. (DOM элемент дээр хадгалагдсан өгөгдлийг устгана)
getInstance DOM элементтэй холбоотой анхааруулга авах боломжийг олгодог статик арга. Жишээ нь: bootstrap.Alert.getInstance(alert).
getOrCreateInstance DOM элементтэй холбоотой сэрэмжлүүлгийн жишээг буцаадаг статик арга эсвэл үүнийг эхлүүлээгүй тохиолдолд шинээр үүсгэх. Та үүнийг дараах байдлаар ашиглаж болно: bootstrap.Alert.getOrCreateInstance(element).

Үндсэн хэрэглээ:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

Үйл явдал

Bootstrap-ийн дохиоллын залгаас нь дохиоллын функцэд холбогдох хэд хэдэн үйл явдлыг илчилдэг.

Үйл явдал Тодорхойлолт
close.bs.alert closeИнстанцийн аргыг дуудах үед шууд гал асаана .
closed.bs.alert Сэрэмжлүүлэг хаагдаж, CSS-ийн шилжилтүүд дуусмагц халагдсан. 
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})