Siirry pääsisältöön Siirry dokumenttien navigointiin
Check
in English

Hälytykset

Tarjoa asiayhteyteen liittyviä palauteviestejä tyypillisistä käyttäjän toimista kourallisen saatavilla olevien ja joustavien hälytysviestien avulla.

Tällä sivulla

Esimerkkejä

Hälytykset ovat saatavilla minkä tahansa pituisesta tekstistä sekä valinnainen sulkemispainike. Oikean tyylin saamiseksi käytä yhtä kahdeksasta vaaditusta kontekstuaalisesta luokasta (esim. .alert-success). Käytä ilmoitusten poistamiseen JavaScript-laajennusta .

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>
Tarkoituksen välittäminen avustaville tekniikoille

Värien käyttö merkityksen lisäämiseen antaa vain visuaalisen osoituksen, jota ei välitetä avustavien tekniikoiden, kuten näytönlukijoiden, käyttäjille. Varmista, että värillä merkitty tieto näkyy joko itsestään sisällöstä (esim. näkyvä teksti) tai sisällytetään vaihtoehtoisin keinoin, kuten .visually-hiddenluokan mukana piilotettu lisäteksti.

Elävä esimerkki

Napsauta alla olevaa painiketta näyttääksesi ilmoituksen (piilotettu rivin sisäisillä tyyleillä aloittaaksesi), hylkää (ja tuhoa) se sisäänrakennetulla sulkemispainikkeella.

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

Käytämme seuraavaa JavaScriptiä live-hälytysdemon käynnistämiseen:

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

Käytä .alert-linkhyödyllisyysluokkaa tarjotaksesi nopeasti vastaavia värillisiä linkkejä mihin tahansa hälytykseen.

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>

Lisäsisältö

Hälytykset voivat sisältää myös muita HTML-elementtejä, kuten otsikoita, kappaleita ja jakajia.

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>

Kuvakkeet

Samoin voit käyttää flexbox-apuohjelmia ja Bootstrap-kuvakkeita luodaksesi hälytyksiä kuvakkeilla. Kuvakkeistasi ja sisällöstäsi riippuen saatat haluta lisätä apuohjelmia tai mukautettuja tyylejä.

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>

Tarvitsetko useamman kuin yhden kuvakkeen hälytyksiä varten? Harkitse useampien Bootstrap-kuvakkeiden käyttöä ja paikallisen SVG-spraitin tekemistä, jotta voit viitata samoihin kuvakkeisiin toistuvasti.

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>

Hylkääminen

Alert JavaScript -laajennuksella on mahdollista hylätä kaikki ilmoitukset. Näin:

  • Varmista, että olet ladannut hälytyslaajennuksen tai käännetyn Bootstrap JavaScriptin.
  • Lisää sulkemispainike ja .alert-dismissibleluokka, joka lisää ylimääräistä täyttöä hälytyksen oikealle puolelle ja sijoittaa sulkemispainikkeen.
  • Lisää sulkemispainikkeeseen data-bs-dismiss="alert"attribuutti, joka käynnistää JavaScript-toiminnon. Muista käyttää <button>elementtiä sen kanssa, jotta se toimii oikein kaikissa laitteissa.
  • Jos haluat animoida hälytyksiä, kun hylkäät ne, muista lisätä .fadeja .showluokat.

Voit nähdä tämän toiminnassa live-demon avulla:

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>
Kun hälytys hylätään, elementti poistetaan kokonaan sivurakenteesta. Jos näppäimistön käyttäjä hylkää hälytyksen sulkemispainikkeella, hänen fokuksensa katoaa yhtäkkiä ja selaimesta riippuen palautuu sivun/asiakirjan alkuun. Tästä syystä suosittelemme lisäämään JavaScriptin, joka kuuntelee closed.bs.alerttapahtumaa ja asettaa ohjelmallisesti focus()sopivimman sijainnin sivulla. Jos aiot siirtää kohdistuksen ei-interaktiiviseen elementtiin, joka ei normaalisti saa tarkennusta, muista lisätä tabindex="-1"elementtiin.

CSS

Muuttujat

Lisätty versioon 5.2.0

Osana Bootstrapin kehittyvää CSS-muuttujien lähestymistapaa hälytykset käyttävät nyt paikallisia CSS-muuttujia .alerttehostaakseen reaaliaikaista räätälöintiä. CSS-muuttujien arvot asetetaan Sassin kautta, joten myös Sass-räätälöinti on edelleen tuettu.

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

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

Käytetään yhdessä $theme-colorsluomaan kontekstuaalisia muokkausluokkia hälytyksillemme.

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

Silmukka, joka luo modifiointiluokat alert-variant()mixinin kanssa.

// 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-käyttäytyminen

Alustaa

Alusta elementit hälytyksiksi

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

Ainoastaan ​​hälytyksen hylkäämistä varten komponenttia ei tarvitse alustaa manuaalisesti JS-sovellusliittymän kautta. Käytettäessä data-bs-dismiss="alert", komponentti alustetaan automaattisesti ja hylätään oikein.

Katso triggerit -osiosta lisätietoja.

Liipaisimet

Irtisanominen voidaan saavuttaa hälytyksendata painikkeen määritteellä, kuten alla on esitetty:

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

tai hälytyksen ulkopuolella olevalla painikkeella data-bs-targetalla kuvatulla tavalla:

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

Huomaa, että hälytyksen sulkeminen poistaa sen DOM:sta.

menetelmät

Voit luoda hälytysinstanssin hälytyskonstruktorilla, esimerkiksi:

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

Tämä saa hälytyksen kuuntelemaan napsautustapahtumia jälkeläisissä elementeissä, joilla on data-bs-dismiss="alert"attribuutti. (Ei välttämätöntä data-api:n automaattista alustusta käytettäessä.)

Menetelmä Kuvaus
close Sulkee hälytyksen poistamalla sen DOM:sta. Jos elementissä on luokat .fadeja .show, hälytys häviää ennen kuin se poistetaan.
dispose Tuhoaa elementin hälytyksen. (Poistaa DOM-elementtiin tallennetut tiedot)
getInstance Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän hälytysinstanssin. Esimerkiksi: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Staattinen menetelmä, joka palauttaa DOM-elementtiin liittyvän hälytysinstanssin tai luo uuden, jos sitä ei ole alustettu. Voit käyttää sitä näin: bootstrap.Alert.getOrCreateInstance(element).

Peruskäyttö:

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

Tapahtumat

Bootstrapin hälytyslaajennus paljastaa muutamia tapahtumia, jotka liittyvät hälytystoimintoihin.

Tapahtuma Kuvaus
close.bs.alert Käynnistyy välittömästi, kun closeinstanssimenetelmää kutsutaan.
closed.bs.alert Käynnistetään, kun hälytys on suljettu ja CSS-siirrot on suoritettu. 
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()
})