Kalo te përmbajtja kryesore Kalo te navigimi i dokumenteve
Check
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 heqjen nga puna në linjë, përdorni shtesën JavaScript të sinjalizimeve .

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

html 
<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ë:

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

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

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>

Përmbajtje shtesë

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

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>

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.

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>

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

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>

Duke përjashtuar

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

  • Sigurohuni që të keni ngarkuar shtojcën e alarmit ose JavaScript-in e përpiluar Bootstrap.
  • Shto një buton mbyllje 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ë:

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>
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 closed.bs.alertngjarjen dhe vendos focus()në mënyrë programore 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.

CSS

Variablat

Shtuar në v5.2.0

Si pjesë e qasjes në zhvillim të variablave CSS të Bootstrap, sinjalizimet tani përdorin variabla lokale CSS .alertpër personalizim të përmirësuar në kohë reale. Vlerat për variablat CSS vendosen nëpërmjet Sass, kështu që personalizimi i Sass mbështetet gjithashtu.

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

Variablat 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

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

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

Lak Sass

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

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => 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

Mund të krijoni një shembull alarmi me konstruktorin e alarmit, për shembull:

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

Kjo bën që një alarm të dëgjojë për ngjarjet e klikimeve në elementët pasardhës që kanë data-bs-dismiss="alert"atributin. (Nuk është e nevojshme kur përdorni inicializimin automatik të data-api.)

Metoda Përshkrim
close Mbyll një sinjalizim 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. Për shembull: 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).

Përdorimi bazë:

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

Ngjarjet

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

Ngjarje 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. 
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()
})