Treci la conținutul principal Treceți la navigarea documentelor
Check
in English

Alerte

Furnizați mesaje de feedback contextual pentru acțiunile tipice ale utilizatorului cu câteva mesaje de alertă disponibile și flexibile.

Pe aceasta pagina

Exemple

Alertele sunt disponibile pentru orice lungime de text, precum și un buton de închidere opțional. Pentru un stil adecvat, utilizați una dintre cele opt clase contextuale necesare.alert-success (de exemplu, ). Pentru concedierea inline, utilizați pluginul JavaScript alerte .

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>
Transmiterea sensului tehnologiilor de asistență

Folosirea culorii pentru a adăuga sens oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile notate de culoare sunt fie evidente din conținutul în sine (de exemplu, textul vizibil), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .visually-hiddenclasa.

Exemplu viu

Faceți clic pe butonul de mai jos pentru a afișa o alertă (ascunsă cu stiluri inline pentru a începe), apoi închideți-o (și distrugeți-o) cu butonul de închidere încorporat.

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

Utilizăm următorul JavaScript pentru a declanșa demonstrația noastră de alertă live:

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

Utilizați .alert-linkclasa de utilitate pentru a furniza rapid link-uri colorate potrivite în orice alertă.

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>

Conținut suplimentar

Alertele pot conține, de asemenea, elemente HTML suplimentare, cum ar fi titluri, paragrafe și separatoare.

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>

Pictograme

În mod similar, puteți utiliza utilitarele flexbox și pictogramele Bootstrap pentru a crea alerte cu pictograme. În funcție de pictogramele și conținutul dvs., este posibil să doriți să adăugați mai multe utilități sau stiluri personalizate.

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>

Aveți nevoie de mai mult de o pictogramă pentru alertele dvs.? Luați în considerare utilizarea mai multor pictograme Bootstrap și crearea unui sprite SVG local ca astfel pentru a face referire cu ușurință la aceleași pictograme în mod repetat.

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>

Demisia

Folosind pluginul JavaScript de alertă, este posibil să respingi orice alertă în linie. Iată cum:

  • Asigurați-vă că ați încărcat pluginul de alertă sau JavaScript Bootstrap compilat.
  • Adăugați un buton de închidere și .alert-dismissibleclasa, care adaugă umplutură suplimentară în partea dreaptă a alertei și poziționează butonul de închidere.
  • Pe butonul de închidere, adăugați data-bs-dismiss="alert"atributul, care declanșează funcționalitatea JavaScript. Asigurați-vă că utilizați <button>elementul cu acesta pentru un comportament adecvat pe toate dispozitivele.
  • Pentru a anima alertele atunci când le închideți, asigurați-vă că adăugați clasele .fadeși ..show

Puteți vedea acest lucru în acțiune cu o demonstrație live:

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>
Când o alertă este respinsă, elementul este complet eliminat din structura paginii. Dacă un utilizator de tastatură respinge alerta folosind butonul de închidere, focalizarea acestuia se va pierde brusc și, în funcție de browser, se va reseta la începutul paginii/documentului. Din acest motiv, vă recomandăm să includeți JavaScript suplimentar care ascultă closed.bs.alertevenimentul și se setează programatic focus()la cea mai potrivită locație din pagină. Dacă intenționați să mutați focalizarea pe un element non-interactiv care în mod normal nu primește focalizare, asigurați-vă că adăugați tabindex="-1"elementului.

CSS

Variabile

Adăugat în v5.2.0

Ca parte a abordării în evoluție a variabilelor CSS a Bootstrap, alertele folosesc acum variabile CSS locale activate .alertpentru personalizare îmbunătățită în timp real. Valorile pentru variabilele CSS sunt setate prin Sass, astfel încât personalizarea Sass este încă acceptată.

  --#{$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};

Variabile 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

Sass mixin

Folosit în combinație cu $theme-colorspentru a crea clase de modificatori contextuali pentru alertele noastre.

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

Buclă care generează clasele modificatoare cu alert-variant()mixin-ul.

// 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);
  }
}

Comportamentul JavaScript

Inițializați

Inițializați elementele ca alerte

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

În scopul exclusiv de a respinge o alertă, nu este necesară inițializarea manuală a componentei prin API-ul JS. Folosind data-bs-dismiss="alert", componenta va fi inițializată automat și eliminată corespunzător.

Consultați secțiunea declanșatoare pentru mai multe detalii.

Declanșatoare

Demiterea poate fi realizată cu dataatributul de pe un buton din alertă , după cum se arată mai jos:

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

sau pe un buton din afara alertei utilizând după data-bs-targetcum se arată mai jos:

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

Rețineți că închiderea unei alerte o va elimina din DOM.

Metode

Puteți crea o instanță de alertă cu constructorul de alertă, de exemplu:

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

Acest lucru face ca o alertă să asculte evenimentele de clic pe elementele descendente care au data-bs-dismiss="alert"atributul. (Nu este necesar atunci când utilizați auto-inițializarea aplicației de date.)

Metodă Descriere
close Închide o alertă eliminând-o din DOM. Dacă clasele .fadeși .showsunt prezente pe element, alerta va dispărea înainte de a fi eliminată.
dispose Distruge alerta unui element. (Elimină datele stocate pe elementul DOM)
getInstance Metodă statică care vă permite să obțineți instanța de alertă asociată unui element DOM. De exemplu: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Metodă statică care returnează o instanță de alertă asociată unui element DOM sau creează una nouă în cazul în care nu a fost inițializată. Îl poți folosi astfel: bootstrap.Alert.getOrCreateInstance(element).

Utilizare de bază:

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

Evenimente

Pluginul de alertă Bootstrap expune câteva evenimente pentru conectarea la funcționalitatea de alertă.

Eveniment Descriere
close.bs.alert Se declanșează imediat când closeeste apelată metoda instanței.
closed.bs.alert Declanșat când alerta a fost închisă și tranzițiile CSS s-au încheiat. 
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()
})