Téigh ar aghaidh chuig an bpríomhábhar Scipeáil chuig nascleanúint docs
in English

Foláirimh

Teachtaireachtaí aiseolais comhthéacsúla a sholáthar do ghnáthghníomhartha úsáideoirí leis an dornán de theachtaireachtaí foláirimh solúbtha atá ar fáil.

Ar an leathanach seo

Samplaí

Tá foláirimh ar fáil d’aon fhad téacs, chomh maith le cnaipe dúnta roghnach. Chun stíleáil chuí a dhéanamh, bain úsáid as ceann amháin de na hocht n- aicme comhthéacsúla a theastaíonn (m.sh., .alert-success). Le dífhostú inlíne, bain úsáid as an breiseán foláirimh JavaScript .

<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>
Brí a chur in iúl do theicneolaíochtaí cúnta

Ní thugann úsáid dath chun brí a chur leis ach tásc amhairc, nach gcuirfear in iúl d’úsáideoirí na dteicneolaíochtaí cúnta – mar léitheoirí scáileáin. Cinntigh go bhfuil an t-eolas atá sainaitheanta leis an dath soiléir ón ábhar féin (m.sh. an téacs infheicthe), nó go n-áirítear í ar mhodhanna eile, mar théacs breise i bhfolach leis an .visually-hiddenrang.

Bain úsáid as an .alert-linkrang áirgiúlachta chun naisc dhaite meaitseála a sholáthar go tapa laistigh d'fholáireamh ar bith.

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

Ábhar breise

Is féidir eilimintí HTML breise cosúil le ceannteidil, ailt agus roinnteoirí a bheith i bhfoláirimh freisin.

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

Deilbhíní

Mar an gcéanna, is féidir leat fóntais flexbox agus Deilbhíní Bootstrap a úsáid chun foláirimh a chruthú le deilbhíní. Ag brath ar do chuid deilbhíní agus ábhar, b'fhéidir gur mhaith leat níos mó fóntais nó stíleanna saincheaptha a chur leis.

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

An dteastaíonn níos mó ná deilbhín amháin le haghaidh do chuid foláirimh? Smaoinigh ar níos mó Deilbhíní Bootstrap a úsáid agus sprite SVG áitiúil mar sin a dhéanamh chun tagairt a dhéanamh go héasca arís agus arís eile do na deilbhíní céanna.

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

Ag díbhe

Ag baint úsáide as an breiseán foláirimh JavaScript, is féidir aon líne foláirimh a dhíbhe. Seo conas:

  • Bí cinnte go bhfuil an breiseán foláirimh luchtaithe agat, nó an Bootstrap JavaScript tiomsaithe.
  • Cuir cnaipe gar leis agus an .alert-dismissiblerang, a chuireann stuáil bhreise ar thaobh na láimhe deise den airdeall agus a shuíonn an cnaipe gar.
  • Ar an gcnaipe dúnta, cuir an data-bs-dismiss="alert"tréith, rud a spreagann feidhmiúlacht JavaScript. Bí cinnte an <button>eilimint a úsáid leis le haghaidh iompar cuí ar fud gach feiste.
  • Chun foláirimh a bheochan agus iad á ndíbhe, bí cinnte na ranganna .fadeagus na .showranganna a chur leis.

Is féidir leat é seo a fheiceáil i ngníomh le taispeántas beo:

<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>
Nuair a dhíbhe foláireamh, baintear an eilimint go hiomlán as struchtúr an leathanaigh. Má dhéanann úsáideoir méarchláir an foláireamh a dhíbhe ag baint úsáide as an gcnaipe dúnta, caillfear a bhfócas go tobann agus, ag brath ar an mbrabhsálaí, athshocróidh sé go dtí tús an leathanaigh/doiciméid. Ar an gcúis seo, molaimid go n-áireofaí JavaScript breise a éisteann don closed.bs.alertimeacht agus a shocraíonn go cláir focus()go dtí an suíomh is oiriúnaí ar an leathanach. Má tá sé beartaithe agat fócas a aistriú go dtí eilimint neamh-idirghníomhach nach bhfaigheann fócas de ghnáth, déan cinnte go gcuirfidh tú tabindex="-1"leis an eilimint.

Sass

Athróga

$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

Meascán athraitheach

Úsáidtear é i gcomhar le $theme-colorsranganna mionathraithe comhthéacsúla a chruthú dár bhfoláirimh.

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

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

Lúb

Lúb a ghineann na ranganna mionathraithe leis an 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);
  }
}

Iompar javascript

Truicear

Cumasaigh dífhostú foláirimh trí JavaScript:

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

Nó le datatréithe ar chnaipe laistigh den foláireamh , mar a léirítear thuas:

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

Tabhair faoi deara go mbainfidh dúnadh foláireamh den DOM é.

Modhanna

Is féidir leat sampla foláirimh a chruthú leis an cruthaitheoir foláirimh, mar shampla:

var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)

Fágann sé seo go n-éistear foláireamh le haghaidh imeachtaí cliceáil ar ghnéithe sliocht a bhfuil an data-bs-dismiss="alert"tréith acu. (Ní gá agus uath-thionscnamh an data-api á n-úsáid.)

Modh Cur síos
close Dúnann foláireamh trína bhaint den DOM. Má tá an .fadeagus .showranganna i láthair ar an eilimint, beidh an foláireamh céimnithe amach sula mbainfear é.
dispose Scriosann foláireamh eilimint. (Baintear sonraí stóráilte ar an eilimint DOM)
getInstance Modh statach a ligeann duit an t-ús foláireamh a bhaineann le heilimint DOM a fháil, is féidir leat é a úsáid mar seo:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Modh statach a thugann cás foláirimh a bhaineann le heilimint DOM ar ais nó a chruthaíonn ceann nua ar eagla nach gcuirfí inisealaithe é. Is féidir leat é a úsáid mar seo:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Imeachtaí

Nochtann breiseán foláirimh Bootstrap roinnt imeachtaí chun dul i ngleic le feidhmiúlacht foláirimh.

Imeacht Cur síos
close.bs.alert Tinte láithreach nuair a bhíonn an closemodh ásc ar a dtugtar.
closed.bs.alert Lasadh nuair a bhíonn an foláireamh dúnta agus aistrithe CSS curtha i gcrích. 
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()
})