Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
Check
in English

Izilumkiso

Nikezela ngemiyalezo yengxelo yomxholo kwiintshukumo eziqhelekileyo zabasebenzisi kunye nesandla semiyalezo efumanekayo neguqukayo yesilumkiso.

Kweli phepha

Imizekelo

Izivuseleli ziyafumaneka kulo naliphi na ubude bombhalo, kunye neqhosha lokuvala elikhethiweyo. Ukwenza isimbo esifanelekileyo, sebenzisa enye kwiiklasi ezisibhozo ezifunekayo.alert-success (umz., ). Xa ugxotha emgceni, sebenzisa iplagi yezaziso zeJavaScript .

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>
Ukuhambisa intsingiselo kwiiteknoloji ezincedisayo

Ukusebenzisa umbala ukongeza intsingiselo kubonelela kuphela ngesalathiso esibonakalayo, esingayi kuthunyelwa kubasebenzisi betekhnoloji encedisayo - njengezifundi zesikrini. Qinisekisa ukuba ulwazi olubonakaliswe ngumbala lucacile kumxholo ngokwawo (umzekelo, umbhalo obonakalayo), okanye luqukwe ngezinye iindlela, ezifana nesicatshulwa esongezelelweyo esifihlwe .visually-hiddeneklasini.

Umzekelo ophilayo

Nqakraza iqhosha elingezantsi ukubonisa isilumkiso (esifihliweyo ngezimbo zangaphakathi ukuqalisa), emva koko uyigxothe (kwaye uyitshabalalise) ngeqhosha elakhelwe-ngaphakathi lokuvala.

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

Sisebenzisa le JavaScript ilandelayo ukwenza idemo yethu yesilumkiso ephilayo:

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

Sebenzisa .alert-linkiklasi eluncedo ukubonelela ngokukhawuleza amakhonkco ahambelanayo anemibala ngaphakathi nasiphi na isivuseleli.

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>

Umxholo owongezelelweyo

Izivuseleli zinokuqulatha izinto ezongezelelweyo zeHTML njengezihloko, imihlathi kunye nezahluli.

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>

Iimpawu zomqondiso

Ngokukwanjalo, ungasebenzisa izixhobo ze -flexbox kunye nee- Icons zeBootstrap ukwenza izilumkiso ezinee-icon. Ngokuxhomekeke kwii-icon kunye nomxholo wakho, unokufuna ukongeza izinto eziluncedo okanye izitayile zesiko.

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>

Ngaba ufuna ngaphezulu kwe icon enye kwizilumkiso zakho? Cinga ukusebenzisa ii-Icons zeBootstrap ezininzi kunye nokwenza iSVG sprite yasekhaya njengaleyo ukubhekisa ngokulula ii-icon ezifanayo ngokuphindaphindiweyo.

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>

Ukugxotha

Usebenzisa isivuseleli seplagi yeJavaScript, kuyenzeka ukuba ugxothe nasiphi na isivuseleli emgceni. Nantsi indlela:

  • Qinisekisa ukuba ulayishile iplagi yesivuseleli, okanye i-JavaScript ye-Bootstrap ehlanganisiweyo.
  • Yongeza iqhosha lokuvala kunye .alert-dismissibleneklasi, eyongeza i-padding eyongezelelweyo ngasekunene kwesilumkiso kwaye ibeka iqhosha lokuvala.
  • Kwiqhosha lokuvala, yongeza data-bs-dismiss="alert"uphawu, olubangela ukusebenza kweJavaScript. Qinisekisa ukusebenzisa <button>ielementi kunye nayo ngokuziphatha okufanelekileyo kuzo zonke izixhobo.
  • Ukuvuselela izilumkiso xa uzigxotha, qiniseka ukuba wongeza .fadekunye .showneeklasi.

Ungayibona le nto isebenza ngedemo ephilayo:

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>
Xa isivuseleli sikhutshiwe, isiqalelo sisuswa ngokupheleleyo kulwakhiwo lwephepha. Ukuba umsebenzisi wekhibhodi ugxotha isilumkiso usebenzisa iqhosha lokuvala, ugxininiso lwabo luya kulahleka ngokukhawuleza kwaye, kuxhomekeke kwisikhangeli, cwangcisa kwakhona ekuqaleni kwephepha / idokhumenti. Ngesi sizathu, sicebisa ukuquka iJavaScript eyongezelelweyo emamela closed.bs.alertumsitho kwaye isete focus()ngokwenkqubo eyona ndawo ifanelekileyo kwiphepha. Ukuba uceba ukuhambisa ugxininiso ukuya kwinto engasebenziyo eqhele ukungafumani ngqwalasela, qiniseka ukuba uyongeza tabindex="-1"kwinto.

CSS

Izinto eziguquguqukayo

Ifakwe kwi-v5.2.0

Njengenxalenye yendlela yokuguquguquka kwe-Bootstrap ye-CSS, izilumkiso ngoku zisebenzisa iiguquguquko ze-CSS zasekhaya .alertukuze kuphuculwe ukwenziwa ngokwezifiso kwexesha lokwenyani. Amaxabiso okuguquguquka kweCSS asetwe ngeSass, ngoko ke ukwenziwa ngokwezifiso kweSass kusaxhaswa, nako.

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

Iinguqu zeSass

$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

Isetyenziswa ngokudityaniswayo $theme-colorsnokwenza iiklasi zesilungisi somxholo kwizilumkiso zethu.

@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

I-Loop eyenza iiklasi zesilungisi kunye alert-variant()nomxube.

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

Ukuziphatha kweJavaScript

Qalisa

Qalisa izinto njengezilumkiso

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

Ngenjongo eyodwa yokugxotha isivuseleli, akuyomfuneko ukuqala inxalenye ngokwenza nge-JS API. Ngokusebenzisa data-bs-dismiss="alert"i-, icandelo liya kuqaliswa ngokuzenzekelayo kwaye likhutshwe ngokufanelekileyo.

Bona icandelo lezitshisi ngeenkcukacha ezithe vetshe.

Izichukumisi

Ukugxothwa kunokufezekiswa datangophawu olukwiqhosha elingaphakathi kwesi silumkiso njengoko kubonisiwe ngezantsi:

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

okanye kwiqhosha elingaphandle kwesivuseleli usebenzisa oku data-bs-targetkubonisiwe ngezantsi:

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

Qaphela ukuba ukuvala isilumkiso kuya kusisusa kwi-DOM.

Iindlela

Unokwenza umzekelo wesilumkiso kunye nomakhi wesilumkiso, umzekelo:

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

Oku kwenza isivuseleli simamele ukwenzela unqakrazo lweziganeko kwizinto eziphumayo data-bs-dismiss="alert"ezinophawu. (Akuyomfuneko xa usebenzisa idatha-api's auto-initialization.)

Indlela Inkcazo
close Ivala isilumkiso ngokusisusa kwiDOM. Ukuba i .fadekunye .showneeklasi zikhona kwinto, isivuseleli siya kuphelelwa phambi kokuba sisuswe.
dispose Itshabalalisa isilumkiso sento. (Isusa idatha egciniweyo kwisiqalelo seDOM)
getInstance Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo wesilumkiso oyanyaniswa nento yeDOM. Umzekelo: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Indlela engatshintshiyo ebuyisela umzekelo wesilumkiso onxulunyaniswa nento yeDOM okanye yenze entsha ukuba ayikhange iqalwe. Ungayisebenzisa ngolu hlobo bootstrap.Alert.getOrCreateInstance(element):.

Usetyenziso olusisiseko:

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

Iziganeko

Iplagi yesilumkiso ye-Bootstrap iveza iminyhadala embalwa yokuqhagamshelwa kusetyenziso lwesilumkiso.

Isiganeko Inkcazo
close.bs.alert Imililo ngokukhawuleza xa closekubizwa indlela yomzekelo.
closed.bs.alert Ikhutshwe xa isilumkiso sivaliwe kwaye iinguqulelo zeCSS zigqityiwe. 
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()
})