Kalo te përmbajtja kryesore Kalo te navigimi i dokumenteve
in English

Alarmet

Siguroni mesazhe reagimi kontekstual për veprimet tipike të përdoruesit me një numër të vogël mesazhesh alarmi të disponueshme dhe fleksibël.

Në këtë faqe

Shembuj

Alarmet janë të disponueshme për çdo gjatësi të tekstit, si dhe një buton opsional mbylljeje. Për stilimin e duhur, përdorni një nga tetë klasat e kërkuara kontekstuale (p.sh., .alert-success). Për largim nga puna, përdorni shtesën JavaScript të sinjalizimeve .

<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>
Përcjellja e kuptimit tek teknologjitë ndihmëse

Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .visually-hiddenklasën.

Shembull i gjallë

Klikoni butonin më poshtë për të shfaqur një sinjalizim (të fshehur me stile inline për të filluar), më pas hiqeni (dhe shkatërrojeni) atë me butonin e integruar të mbylljes.

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

Ne përdorim JavaScript-in e mëposhtëm për të aktivizuar demonstrimin tonë të sinjalizimit të drejtpërdrejtë:

var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')

function alert(message, type) {
  var wrapper = document.createElement('div')
  wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

  alertPlaceholder.append(wrapper)
}

if (alertTrigger) {
  alertTrigger.addEventListener('click', function () {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

Përdorni .alert-linkklasën e shërbimeve për të siguruar shpejt lidhjet me ngjyra që përputhen brenda çdo sinjalizimi.

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

Përmbajtje shtesë

Alarmet mund të përmbajnë gjithashtu elementë shtesë HTML si tituj, paragrafë dhe ndarës.

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

Ikonat

Në mënyrë të ngjashme, mund të përdorni shërbimet flexbox dhe Bootstrap Icons për të krijuar sinjalizime me ikona. Në varësi të ikonave dhe përmbajtjes suaj, mund të dëshironi të shtoni më shumë shërbime ose stile të personalizuara.

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" 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>

Keni nevojë për më shumë se një ikonë për sinjalizimet tuaja? Konsideroni të përdorni më shumë ikona Bootstrap dhe të krijoni një sprite lokale SVG si kjo për t'iu referuar lehtësisht të njëjtave ikona në mënyrë të përsëritur.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" fill="currentColor" 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" fill="currentColor" 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" fill="currentColor" 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" width="24" height="24" 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" width="24" height="24" 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" width="24" height="24" 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" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

Duke hedhur poshtë

Duke përdorur shtojcën JavaScript të alarmit, është e mundur të anuloni çdo sinjalizim në linjë. Ja se si:

  • Sigurohuni që të keni ngarkuar shtojcën e alarmit ose JavaScript të përpiluar Bootstrap.
  • Shto një buton mbylljeje dhe .alert-dismissibleklasën, e cila shton mbushje shtesë në të djathtë të sinjalizimit dhe pozicionon butonin e mbylljes.
  • Në butonin e mbylljes, shtoni data-bs-dismiss="alert"atributin, i cili aktivizon funksionalitetin JavaScript. Sigurohuni që të përdorni <button>elementin me të për sjelljen e duhur në të gjitha pajisjet.
  • Për të animuar sinjalizimet kur i hiqni ato, sigurohuni që të shtoni klasat .fadedhe ..show

Ju mund ta shihni këtë në veprim me një demonstrim të drejtpërdrejtë:

<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>
Kur një sinjalizim hiqet, elementi hiqet plotësisht nga struktura e faqes. Nëse një përdorues i tastierës e refuzon sinjalizimin duke përdorur butonin e mbylljes, fokusi i tij do të humbet papritur dhe, në varësi të shfletuesit, do të rivendoset në fillim të faqes/dokumentit. Për këtë arsye, ne rekomandojmë përfshirjen e JavaScript shtesë që dëgjon për closed.bs.alertngjarjen dhe vendos programatikisht focus()në vendndodhjen më të përshtatshme në faqe. Nëse po planifikoni të zhvendosni fokusin në një element jointeraktiv që normalisht nuk merr fokus, sigurohuni që ta shtoni tabindex="-1"në element.

Sass

Variablat

$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

Varianti i përzierjes

Përdoret në kombinim me $theme-colorspër të krijuar klasa modifikuese kontekstuale për sinjalizimet tona.

@mixin alert-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Lak

Lak që gjeneron klasat e modifikuesve me alert-variant()miksin.

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

Sjellja JavaScript

Inicializoj

Inicializoni elementet si sinjalizime

var alertList = document.querySelectorAll('.alert')
var alerts =  [].slice.call(alertList).map(function (element) {
  return new bootstrap.Alert(element)
})

Me qëllimin e vetëm të heqjes së një sinjalizimi, nuk është e nevojshme të inicializohet komponenti manualisht nëpërmjet JS API. Duke përdorur data-bs-dismiss="alert", komponenti do të inicializohet automatikisht dhe do të hiqet siç duhet.

Shikoni seksionin e nxitësve për më shumë detaje.

Shkaqet

Largimi mund të arrihet me dataatributin në një buton brenda sinjalizimit siç tregohet më poshtë:

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

ose në një buton jashtë sinjalizimit duke përdorur data-bs-targetsiç tregohet më poshtë:

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

Vini re se mbyllja e një sinjalizimi do ta heqë atë nga DOM.

Metodat

Metoda Përshkrim
close Mbyll një alarm duke e hequr atë nga DOM. Nëse klasat .fadedhe .showjanë të pranishme në element, sinjalizimi do të shuhet përpara se të hiqet.
dispose Shkatërron alarmin e një elementi. (Heq të dhënat e ruajtura në elementin DOM)
getInstance Metoda statike e cila ju lejon të merrni shembullin e alarmit të lidhur me një element DOM, mund ta përdorni si kjo:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Metoda statike e cila kthen një shembull alarmi të lidhur me një element DOM ose krijon një të ri në rast se nuk ishte inicializuar. Mund ta përdorni si kjo:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Ngjarjet

Shtojca e alarmit të Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin e alarmit.

Ngjarja Përshkrim
close.bs.alert Ndizet menjëherë kur closethirret metoda e shembullit.
closed.bs.alert Aktivizohet kur sinjalizimi është mbyllur dhe kalimet CSS kanë përfunduar. 
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
  // 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()
})