Skip to main content Skip ad navigationem soUicitudo
Check
in English

Alerts

Praebere contextuales feedback nuntios pro usuario actuum typicorum cum paucis nuntiis promptorum et flexibilium erectorum.

In hac pagina

Exempla

Artes in promptu sunt ad cuiuslibet textus longitudinis, necnon ad conjunctionem proximam libitum. Ad propriam phrasim, uti una ex octo classibus contextualis (eg, ) requiritur . .alert-successPro inline dimissione, utere in summis JavaScript plugin .

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>
Deferre significatio technologiae adiuvandae

Color usus ad significationem addere tantum praebet indicationem visualem, quae utentibus technologiarum adiuvantium - sicut lectorum tegumentum. Ut informationes colore notatae sint vel ex ipso contento perspicuae (exempli gratia textus visibilis), vel per medium includi alterum, sicut textus additus occultus cum .visually-hiddengenere.

Vivamus exemplum

Preme pyga infra ut stylum (abditum cum stylis inlineis incipere), dimitte (et destrue) eam cum constructo in proxima conjunctione.

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

Utimur in sequentibus JavaScript ad trigger intenti demo vivant nostram:

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

Classis utilitate utere .alert-linkut cito adaptare nexus coloratos in quibusvis intenti.

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>

Additional content

Alerts etiam elementa HTML additamenta continere possunt sicut capita, paragraphos et divisores.

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>

Icones

Similiter, flexbox utilitatibus uti potes et Icones Bootstrap ad summis cum iconibus creare. Secundum icones tuas et argumenta plus utilitatis vel styli consuetudinis addere velis.

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>

Plus quam una icon pro summis montibus opus est? Pluribus Bootstrap Iconibus adhibitis considera ac spiritu SVG locali similem fieri, ut facile easdem icones saepe referat.

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>

dimissis

Plugin utens intento JavaScript, possibile est aliquem intentum inlineare. Ecce quomodo:

  • Vide plugin intenti te onustum vel JavaScript Bootstrap compilavit.
  • Bullam arctam et genus adde .alert-dismissible, quod addit additamentum ad ius intenti et positionem clausulam bullam.
  • In proxima conjunctione, data-bs-dismiss="alert"attributum adde, quod JavaScript functionality efficit. Fac uti <button>elementum cum eo ad mores per omnes machinas.
  • Animas erectas dimittentes, certas .fadeac .showclasses addere.

Hoc in actu videre potes cum demo vivam:

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>
Cum acris dimittitur, elementum a paginae structura penitus removetur. Si usor tincidunt usor intenti utentem globulo clauso dimittit, focus subito amittetur et, secundum navigatrum, reset ad initium paginae/documenti. Quam ob rem commendamus etiam additamenta JavaScript qui closed.bs.alerteventum audit et programmatice focus()ad aptissimum locum in pagina ponit. Si vis movere focus ad elementum non-interactive quod normaliter umbilicum non recipit, fac tabindex="-1"elementum addere.

CSS

Variabilium

Additur in v5.2.0

Cum pars Bootstrap evolutionis CSS variabiles accedunt, summis nunc variantibus localibus utuntur CSS .alertad auctum real-time customizationem. Valores variabilium pro CSS per Sass positae sunt, ergo etiam adhuc Sass customization adiuvatur.

  --#{$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 variables

$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

Adhibetur in compositione cum $theme-colorscreare contextual modifier classes pro summis montibus nostris.

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

alert-variant()Loop, qui cum mixin generat determinatiuum asses.

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

Initialize

Initialize elementa in summis

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

Ad hoc solum propositum erecti dimittendi, necesse non est tincidunt elementum manuale per JS API initialize. Utendo data-bs-dismiss="alert", elementum automatice initialized et rite dimittatur.

Vide sectionem triggers pro magis details.

Triggers

Dimissio fieri potest cum dataattributo in pyga intra intenti ut infra demonstratum est:

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

aut in puga pyga extra intenti utendo, data-bs-targetut infra demonstratum est;

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

Nota quod clausula evigilans removebit a dom.

Methodi

Instantia acris efficere potes cum conditore erecto, exempli gratia:

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

Hoc facit audientiam erectam ad click eventus de elementis descendentibus quae data-bs-dismiss="alert"attributum habent. (Non necesse est cum usura notitia-api scriptoris auto- initializationis).

Methodus Descriptio
close Claudit erectum a dom. Si classes .fadeet partes .showinsunt, intenti deficiant antequam removeatur.
dispose Elementum destruit intentus. (Recondita removet data in dom elementum)
getInstance Methodus stabilis, quae te permittit ut instantia in elemento DOM coniungitur. Exempli gratia: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Methodus stabilis quae reddit instantiam erectam elemento DOM coniunctam vel novam creans in casu non initialized erat. Hoc uti potes: bootstrap.Alert.getOrCreateInstance(element).

Basic usus:

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

Events

Bootstrap plugin vigilans paucas eventus exponit pro hamo in ad functionem intenti.

Eventus Descriptio
close.bs.alert Ignes statim cum closeinstantia methodus appellatur.
closed.bs.alert Accensus est cum intentus clausus est et transitus CSS expleverunt. 
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()
})