Salá koleka na makambo ya ntina Salta na navigation ya docs
Check
in English

Ba alertes

Pesa ba messages ya réaction contextuel pona ba actions typiques ya usager na loboko ya ba messages ya alerte oyo ezali pe flexible.

Na lokasa oyo

Bandakisa

Ba alertes ezali mpo na bolai nyonso ya makomi, mpe lisusu bouton ya kokanga oyo okoki kopona. Mpo na kosala lolenge malamu, salelá moko ya bakelasi mwambe oyo esengeli.alert-success na makambo oyo ezali na kati (ndakisa, ). Mpo na bolongolami na kati ya molongo, salelá plugin ya JavaScript ya makebisi .

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>
Kopesa ndimbola na ba technologies ya kosunga

Kosalela langi mpo na kobakisa ndimbola epesaka kaka elembo ya komona, oyo ekopesama te na basaleli ya mayele ya kosunga – lokola batángi ya écran. Sala ete sango oyo elakisami na langi ezala polele uta na makambo yango moko (ndakisa makomi oyo ezali komonana), to ekotisama na nzela ya mayele mosusu, lokola makomi ya kobakisa oyo ebombami elongo na .visually-hiddenkelasi.

Ndakisa ya bomoi

Finá na butɔ oyo ezali awa na nse mpo na kolakisa likebisi (ebombami na mitindo ya kati mpo na kobanda), na nsima longola (mpe bebisa) yango na bouton ya kokanga oyo etongami na kati.

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

Tosalelaka JavaScript oyo elandi mpo na kobanda démonstration na biso ya alerte en direct:

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

Salelá .alert-linkkelasi ya utilitaire mpo na kopesa nokinoki ba liens ya langi oyo ekokani na kati ya likebisi nyonso.

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>

Makambo mosusu oyo ezali na kati

Ba alertes ekoki pe kozala na ba éléments HTML ya kobakisa lokola ba têtes, ba paragraphes na ba diviseur.

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>

Ba icons

Ndenge moko mpe, okoki kosalela ba utilitaires flexbox mpe ba Icons ya Bootstrap mpo na kosala ba alertes na ba icônes. Na kotalela bilembo na yo mpe makambo oyo ezali na kati, okoki kobakisa ba utilitaires mosusu to ba styles personnalisés.

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>

Ozali na mposa ya bilembo koleka moko mpo na makebisi na yo? Tala kosalela ba Icônes ya Bootstrap mingi mpe kosala sprite ya SVG ya esika lokola bongo mpo na kosala référence na pete na ba icônes moko mbala na mbala.

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>

Kobengana na mosala

Na kosalelaka plugin ya JavaScript ya alerte, ezali possible ya koboya alerte nionso na kati ya ligne. Talá ndenge oyo:

  • Sala makasi o charger plugin ya alerte, to JavaScript ya Bootstrap oyo e compilé.
  • Bakisa bouton ya kokanga mpe .alert-dismissiblekelasi, oyo ebakisi padding ya kobakisa na loboko ya mobali ya alerte mpe etie bouton ya kokanga.
  • Na bouton ya kokanga, bakisa data-bs-dismiss="alert"attribut, oyo ebandisaka fonctionnement ya JavaScript. Bozala sûr ya kosalela <button>élément na yango pona comportement propre na kati ya ba appareils nionso.
  • Pona ko animer ba alertes tango ozali ko rejeter yango, sala makasi obakisa ba .fadeclasses na .show.

Okoki komona yango na action na démonstration en direct:

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>
Ntango likebisi elongolami, eloko yango elongolamaka mobimba na ebongiseli ya lokasa. Soki mosaleli ya klaviatware aboyi likebisi yango na kosaleláká bouton ya kokanga, likebi na bango ekobunga na mbalakaka mpe, na kotalela navigateur, bakozongisa yango na ebandeli ya lokasa/mokanda. Mpo na ntina oyo, tozali kopesa toli ya kotya JavaScript mosusu oyo eyokaka closed.bs.alertlikambo yango mpe etyaka focus()na programɛ na esika oyo ebongi mpenza na lokasa. Soki ozali kokana kokende na focus na élément non interactif oyo normalement ezuaka focus te, sala makasi obakisa tabindex="-1"na élément.

CSS

Ba variables oyo ezali

Ebakisami na v5.2.0

Lokola eteni ya approche ya ba variables CSS oyo ezali ko évoluer ya Bootstrap, ba alertes esalela sikoyo ba variables CSS locales on .alertpona personnalisation en temps réel améliorée. Ba valeurs pona ba variables ya CSS etiamaki na nzela ya Sass, yango wana personnalisation ya Sass ezali kaka kosungama, pe.

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

Ba variables ya 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 ya kosala mixin

Esalemi na bosangani na $theme-colorsmpo na kosala ba classes ya modificateur contextuel mpo na ba alertes na biso.

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

Boucle ya Sass

Boucle oyo ebimisaka ba classes ya modificateur na alert-variant()mixin.

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

Etamboli ya JavaScript

Kosala na ebandeli

Initialiser ba éléments lokola ba alertes

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

Pona tina seul ya ko rejeter alerte, ezali na besoin te ya ko initialiser composant manuellement na nzela ya API JS. Na kosalelaka data-bs-dismiss="alert", composant eko initialiser automatiquement mpe eko rejeter malamu.

Tala eteni ya ba déclencheur mpo na koyeba makambo mosusu.

Ba déclencheur

Kolongolama ekoki kosalema na dataattribut oyo ezali na bouton moko na kati ya alerte ndenge emonisami awa na nse:

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

to na bouton moko oyo ezali na libándá ya likebisi na kosaleláká data-bs-targetndenge emonisami awa na nse:

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

Yeba ete kokanga alerte ekolongola yango na DOM.

Ba méthodes ya kosala

Okoki kosala instance ya alerte na constructeur ya alerte, ndakisa:

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

Yango esalaka que alerte eyoka ba événements ya clic na ba éléments descendants oyo ezali na data-bs-dismiss="alert"attribut. (Ezali na ntina te ntango ozali kosalela auto-initialisation ya data-api.)

Metode Ndimbola
close Ekangaka alerte na kolongola yango na DOM. Soki ba classes .fadempe .showezali na élément, alerte ekosila liboso ya kolongola yango.
dispose Ebebisaka alerte ya élément moko. (Elongolaka ba données oyo ebombami na élément DOM)
getInstance Méthode statique oyo e permettre yo ozua instance ya alerte associé na élément DOM. Na ndakisa: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Méthode statique oyo ezongisaka instance ya alerte oyo ezo sangana na élément DOM to ezo sala ya sika au cas où ezalaki initialisé te. Okoki kosalela yango boye: bootstrap.Alert.getOrCreateInstance(element).

Bosaleli ya moboko:

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

Makambo oyo esalemaki

Plugin ya alerte ya Bootstrap e exposer mua ba événements pona ko crochet na fonctionnalité ya alerte.

Likambo Ndimbola
close.bs.alert Ezo benga mbala moko tango closeméthode ya instance ebengami.
closed.bs.alert Elongolami tango alerte ekangami mpe ba transitions ya CSS esili. 
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()
})