Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
in English

Izilumkiso

Nikela ngemiyalezo yengxelo yomxholo kwiintshukumo eziqhelekileyo zabasebenzisi kunye nesandla semiyalezo yesilumkiso ekhoyo neguqukayo.

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 .

<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 (umz. umbhalo obonakalayo), okanye lubandakanyiwe ngezinye iindlela, ezifana nesicatshulwa esongezelelweyo esifihlwe .visually-hiddeneklasini.

Sebenzisa .alert-linkiklasi eluncedo ukubonelela ngokukhawuleza amakhonkco ahambelanayo anemibala ngaphakathi nakwesiphi na isilumkiso.

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

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

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

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.

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

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:

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

Sass

Izinto eziguquguqukayo

$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

Umxube ohlukileyo

Isetyenziswa ngokudibeneyo $theme-colorsukwenza iiklasi zesilungisi somxholo kwizilumkiso zethu.

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

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

Umjikelo

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

Izichukumisi

Vula ukugxothwa kwesivuseleli ngeJavaScript:

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
  new bootstrap.Alert(alert)
})

Okanye ngeempawu datakwiqhosha elingaphakathi kwesivuseleli , njengoko kubonisiwe ngasentla:

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

Qaphela ukuba ukuvala isilumkiso kuya kusisusa kwi-DOM.

Iindlela

Unokwenza umzekelo wesilumkiso kunye nomakhi wesilumkiso, umzekelo:

var myAlert = document.getElementById('myAlert')
var 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 onxulunyaniswa nento yeDOM, ungayisebenzisa ngolu hlobo: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) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
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 iinguqu zeCSS zigqityiwe. 
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()
})