Esasy mazmuna geçiň Docs nawigasiýasyna geçiň
in English

Duýduryşlar

Elýeterli we çeýe duýduryş habarlary bilen adaty ulanyjy hereketleri üçin kontekstli jogap habarlaryny beriň.

Bu sahypada

Mysallar

Duýduryşlar tekstiň islendik uzynlygy, şeýle hem goşmaça ýapmak düwmesi üçin elýeterlidir. Dogry bezemek üçin zerur sekiz kontekst synpynyň birini ulanyň (mysal üçin .alert-success). Içerki işden çykarmak üçin duýduryşlary JavaScript pluginini ulanyň .

<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>
Kömekçi tehnologiýalara many bermek

Reňk ulanmak manysyny goşmak üçin diňe ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirip bolmajak wizual görkezme berýär. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden (meselem, görünýän tekstden) aç-açan ýa-da .visually-hiddensynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.

Göni mysal

Duýduryşy görkezmek üçin aşakdaky düwmä basyň (başlamak üçin içerki görnüşler bilen gizlenýär), soňra bolsa içindäki ýakyn düwme bilen işden çykaryň (we ýok ediň).

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

Göni duýduryş görkezişimizi açmak üçin aşakdaky JavaScript ulanýarys:

var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')

function alert(message, type) {
  var wrapper = document.createElement('div')
  wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

  alertPlaceholder.append(wrapper)
}

if (alertTrigger) {
  alertTrigger.addEventListener('click', function () {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

.alert-linkIslendik duýduryşyň içinde gabat gelýän reňkli baglanyşyklary çalt üpjün etmek üçin peýdaly synpy ulanyň .

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

Goşmaça mazmun

Duýduryşlarda sözbaşylar, abzaslar we bölüjiler ýaly goşmaça HTML elementleri hem bolup biler.

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

Nyşanlar

Şonuň ýaly-da, nyşanlary bilen duýduryş döretmek üçin flexbox kömekçi enjamlaryny we Bootstrap nyşanlaryny ulanyp bilersiňiz. Nyşanlaryňyza we mazmunyňyza baglylykda, has köp kömekçi ýa-da adaty stil goşmak isläp bilersiňiz.

<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>
    An example alert with an icon
  </div>
</div>

Duýduryşlaryňyz üçin birden köp nyşan gerekmi? Şol bir nyşanlary aňsatlyk bilen gaýtalamak üçin has köp “Bootstrap” nyşanlaryny ulanmagy we ýerli “SVG sprite” ýasamagy göz öňünde tutuň.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" fill="currentColor" 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" fill="currentColor" 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" fill="currentColor" 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" width="24" height="24" 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" width="24" height="24" 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" width="24" height="24" 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" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

Işden aýyrmak

Duýduryş JavaScript plaginini ulanyp, islendik duýduryş setirini ýatyryp bolýar. Ine:

  • Duýduryş plaginini ýa-da düzülen Bootstrap JavaScript-i ýükländigiňize göz ýetiriň.
  • Duýduryşyň sag tarapyna goşmaça gaplama goşýan we ýakyn düwmäni ýerleşdirýän ýakyn düwmäni we synpy goşuň ..alert-dismissible
  • Closeapmak düwmesine, data-bs-dismiss="alert"JavaScript-iň işlemegine itergi berýän atribut goşuň. <button>Elementi ähli enjamlarda dogry alyp barmak üçin ulanmagy unutmaň .
  • Işden aýrylanda duýduryşlary janlandyrmak üçin, .fadesapaklary .showgoşuň.

Muny göni efirde görüp bilersiňiz:

<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>
Duýduryş ýatyrylanda element sahypa gurluşyndan doly aýrylýar. Klawiatura ulanyjysy ýakyn düwmäni ulanyp duýduryşy ýatyrsa, ünsi birden ýitirer we brauzere baglylykda sahypa / resminamanyň başyna täzeden başlar. Şol sebäpli closed.bs.alertwakany diňleýän we programma focus()taýdan sahypanyň iň amatly ýerine düzülen goşmaça JavaScript-i goşmagy maslahat berýäris. Fokusy adatça ünsi almaýan interaktiw däl elemente geçirmekçi bolsaňyz tabindex="-1", elemente goşuň.

Sass

Üýtgeýjiler

$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

Wariant garyndysy

$theme-colorsDuýduryşlarymyz üçin kontekst üýtgediji synplary döretmek bilen bilelikde ulanylýar .

@mixin alert-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

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

Aýlaw

Mixin bilen üýtgediji synplary döredýän alert-variant()aýlaw.

// 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 häsiýeti

Başla

Elementleri duýduryş hökmünde başlaň

var alertList = document.querySelectorAll('.alert')
var alerts =  [].slice.call(alertList).map(function (element) {
  return new bootstrap.Alert(element)
})

Duýduryşy ýatyrmagyň ýeke-täk maksady üçin komponenti JS API arkaly el bilen başlamak hökman däl. Ulanylsa , data-bs-dismiss="alert"komponent awtomatiki usulda işe giriziler we dogry işden çykarylar.

Has giňişleýin maglumat üçin triggerler bölümine serediň.

Triggerler

Aşakda görkezilişi ýaly duýduryşyň içindäkidata düwmäniň atributy bilen işden aýrylyp bilner :

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

ýa-da aşakda görkezilişi ýaly duýduryşyň daşyndaky düwmede :data-bs-target

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

Duýduryşy ýapmak ony DOM-dan aýyrjakdygyna üns beriň.

Usullar

Usul Düşündiriş
close DOM-dan aýyrmak bilen duýduryşy ýapýar. Eger elementde .fadewe .showsynplar bar bolsa, duýduryş aýrylmazdan ozal öçer.
dispose Bir elementiň duýduryşyny ýok edýär. (DOM elementindäki saklanan maglumatlary aýyrýar)
getInstance DOM elementi bilen baglanyşykly duýduryş mysalyny almaga mümkinçilik berýän statiki usul, ony şeýle ulanyp bilersiňiz:bootstrap.Alert.getInstance(alert)
getOrCreateInstance DOM elementi bilen baglanyşykly duýduryş mysalyny ýa-da başlamadyk ýagdaýynda täzesini döredýän statiki usul. Muny şeýle ulanyp bilersiňiz:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Wakalar

“Bootstrap” -yň duýduryş plugin, duýduryş funksiýasyna girmek üçin birnäçe wakany paş edýär.

Waka Düşündiriş
close.bs.alert closeMysal usuly çagyrylanda derrew ýanýar .
closed.bs.alert Duýduryş ýapylanda we CSS geçişleri gutaranda işledildi. 
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
  // 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()
})