Tlolela go diteng tše kgolo Tlolela go docs navigation
Check
in English

Ditemošo

Fana ka melaetša ya ditshwaotshwao tša seemo bakeng sa ditiro tše di tlwaelegilego tša modiriši ka seatla sa melaetša ya temošo ye e lego gona le ye e fetofetogago.

Letlakaleng le

Mehlala

Ditemošo di hwetšagala bakeng sa botelele bjo bongwe le bjo bongwe bja sengwalwa, gammogo le konope ya go tswalela ya boikhethelo. Bakeng sa setaele se se swanetšego, šomiša e nngwe ya diklase tše seswai tše di nyakegago tša diteng (mohlala, .alert-success). Bakeng sa go rakwa ka gare ga mothaladi, diriša ditemošo tša 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>
Go fetišetša tlhalošo go theknolotši ya go thuša

Go šomiša mmala go oketša tlhalošo go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (mohlala, sengwalwa se se bonagalago), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .visually-hiddensehlopha.

Mohlala o phelang

Tobetsa konopo ye e lego ka mo tlase go bontšha temošo (yeo e utilwego ka mekgwa ya ka gare ga mothaladi go thoma), ke moka o e lahle (le go e senya) ka konope ya go tswalela yeo e agetšwego ka gare.

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

Re diriša JavaScript ye e latelago go hlohleletša demo ya rena ya temošo ye e phelago:

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

Šomiša .alert-linksehlopha sa utility go fa ka pela dikgokagano tša mebala ye e swanago ka gare ga temošo efe goba efe.

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>

Diteng tša tlaleletšo

Ditemošo di ka ba le gape le dielemente tša tlaleletšo tša HTML go swana le dihlogo, ditemana le dikarolwana.

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>

Diaekhone

Ka mo go swanago, o ka šomiša didirišwa tša flexbox le Diaekhone tša Bootstrap go hlama ditemošo ka diaekhone. Go ya ka diaekhone tša gago le diteng, o ka nyaka go oketša didirišwa tše dingwe goba mekgwa ya tlwaelo.

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>

O nyaka maswao a go feta a tee bakeng sa ditemošo tša gago? Nagana ka go šomiša Diaekhone tše dingwe tša Bootstrap le go dira sprite ya SVG ya selegae go swana le bjalo go šupa gabonolo diaekhone tše di swanago kgafetšakgafetša.

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>

Go raka mošomong

Ka go diriša plugin ya JavaScript ya temošo, go a kgonega go lahla temošo efe goba efe ka gare ga mothaladi. Ke kamoo:

  • Kgonthiša gore o laeditše plugin ya temošo, goba JavaScript ya Bootstrap yeo e kgobokeditšwego.
  • Oketša konope ya go tswalela le .alert-dismissiblesehlopha, seo se tlaleletšago ka go tlatša mo go oketšegilego ka go le letona la temošo gomme se bea konope ya go tswalela.
  • Go konope ya go tswalela, oketša data-bs-dismiss="alert"seka, seo se hlohleletšago mošomo wa JavaScript. Kgonthiša gore o šomiša <button>elemente le yona bakeng sa boitshwaro bjo bo swanetšego go ralala le didirišwa ka moka.
  • Go phediša ditemošo ge o di raka, kgonthišetša gore o tlaleletša ka .fadele .showdiklase.

O ka bona se se šoma ka demo ya go phela:

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>
Ge temošo e lahlwa, elemente e tlošwa ka botlalo go tšwa go sebopego sa letlakala. Ge e ba modiriši wa khiiboto a nyatša temošo a diriša konope ya go tswalela, go tsepamiša kgopolo ga bona go tla lahlega gatee-tee gomme, go ya ka sephephediši, go beakanya gape mathomong a letlakala/tokomane. Ka lebaka le, re kgothaletša go akaretša JavaScript ya tlaleletšo yeo e theeletšago closed.bs.alerttiragalo gomme e beakanya ka lenaneo focus()lefelong le le swanetšego kudu letlakaleng. Ge e le gore o rulaganya go šuthišetša tsepamiso go elemente yeo e sego ya tirišano yeo ka tlwaelo e sa amogelego tsepamiso, kgonthiša gore o tlaleletša tabindex="-1"go elemente.

CSS

Diphetogo

E okeditšwe ka go v5.2.0

Bjalo ka karolo ya mokgwa wa go fetoga wa diphetogo tša CSS wa Bootstrap, ditemošo bjale di šomiša diphetogo tša CSS tša selegae godimo .alertbakeng sa go tlwaetša nako ya nnete ye e kaonafetšego. Ditekanyetšo tša diphetogo tša CSS di beakantšwe ka Sass, ka fao go tlwaetša Sass go sa thekgwa, le gona.

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

Diphetogo tša 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 ya go tswalela

E šomišwa ka kopanyo le $theme-colorsgo hlama diklase tša sefetoši sa seemo bakeng sa ditemošo tša rena.

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

Loop yeo e tšweletšago dihlopha tša sefetoši ka 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);
  }
}

Boitshwaro bja JavaScript

Thoma go thoma

Thoma dielemente bjalo ka ditemošo

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

Bakeng sa morero o nnoši wa go lahla temošo, ga go nyakege gore o thome karolo ka seatla ka JS API. Ka go diriša data-bs-dismiss="alert", karolo e tla thongwa ka go itiragalela gomme ya lahlwa ka tshwanelo.

Bona karolo ya dihlohleletši bakeng sa dintlha tše dingwe.

Dihlohleletši

Go rakwa go ka fihlelelwa ka dataseka godimo ga konope ka gare ga temošo bjalo ka ge go bontšhitšwe ka mo tlase:

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

goba go konope ka ntle ga temošo o diriša data-bs-targetbjalo ka ge go bontšhitšwe ka mo tlase:

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

Hlokomela gore go tswalela temošo go tla e tloša go DOM.

Mekgwa ya go šoma

O ka hlama mohlala wa temošo ka mohlami wa temošo, mohlala:

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

Se se dira gore temošo e theeletša ditiragalo tša go klika go dielemente tša setlogolo tšeo di nago le data-bs-dismiss="alert"seka. (Ga go nyakege ge o diriša go thoma ga go itiriša ga data-api.)

Mokgwa Tlhalošo
close E tswalela temošo ka go e tloša go DOM. Ge e .fadele gore .showdiklase tša le di gona godimo ga elemente, temošo e tla fifala pele e tlošwa.
dispose E senya temošo ya elemente. (E tloša ya data ye e bolokilwego go elemente ya DOM)
getInstance Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa temošo wo o amanago le elemente ya DOM. Ka mohlala: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Mokgwa wa go se fetoge wo o bušetšago mohlala wa temošo wo o amanago le elemente ya DOM goba go hlama ye mpsha ge go ka direga gore e se ya thongwa. O ka e diriša ka tsela ye: bootstrap.Alert.getOrCreateInstance(element).

Tšhomišo ya motheo: .

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

Ditiragalo

Bootstrap o temošo plugin pepentšha ditiragalo tše mmalwa bakeng sa hooking ka temošo tshebetso.

Tiragalo Tlhalošo
close.bs.alert E thunya ka pela ge closemokgwa wa mohlala o bitšwa.
closed.bs.alert E thuntšhwa ge temošo e tswaletšwe gomme diphetogo tša CSS di phethilwe. 
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()
})