Esasy mazmuna geçiň Docs nawigasiýasyna geçiň
Check
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 sany kontekst synpynyň birini ulanyň (meselem .alert-success). Içerki işden çykarmak üçin duýduryşlary JavaScript pluginini ulanyň .

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>
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ň).

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

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-linkIslendik duýduryşyň içinde gabat gelýän reňkli baglanyşyklary çalt üpjün etmek üçin peýdaly synpy ulanyň .

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>

Goşmaça mazmun

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

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>

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.

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>

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

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>

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:

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>
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çirmegi meýilleşdirýän bolsaňyz, tabindex="-1"elemente goşuň.

CSS

Üýtgeýjiler

V5.2.0 goşuldy

“Bootstrap” -yň ösýän CSS üýtgeýjiler çemeleşmesiniň bir bölegi hökmünde duýduryşlar .alerthakyky wagtlaýyn özleşdirmek üçin ýerli CSS üýtgeýjileri ulanýarlar. CSS üýtgeýjileriniň bahalary Sass arkaly kesgitlenýär, şonuň üçin Sass sazlamasy henizem goldanýar.

  --#{$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 üýtgeýjileri

$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

Sass garyndysy

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

@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%);
  }
}

Sass aýlawy

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ň

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => 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

Duýduryş konstruktory bilen duýduryş mysalyny döredip bilersiňiz, mysal üçin:

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

data-bs-dismiss="alert"Bu häsiýeti bolan nesil elementlerine basmak hadysalaryny duýduryş diňleýär . (Data-api-iň awtomatiki başlangyjy ulanylanda hökman däl.)

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. Mysal üçin : 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).

Esasy ulanylyşy:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
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. 
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()
})