Téigh ar aghaidh chuig an bpríomhábhar Scipeáil chuig nascleanúint docs
Check
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 .

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

Sampla beo

Cliceáil ar an gcnaipe thíos chun foláireamh a thaispeáint (i bhfolach le stíleanna inlíne chun tús a chur leis), ansin díbhe (agus scrios) é leis an gcnaipe gar ionsuite.

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

Bainimid úsáid as an JavaScript seo a leanas chun ár dtaispeántas beo foláirimh a spreagadh:

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

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.

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>

Ábhar breise

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

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>

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.

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>

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.

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>

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í thar 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:

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

CSS

Athróga

Curtha leis in v5.2.0

Mar chuid de chur chuige athróg CSS Bootstrap atá ag teacht chun cinn, úsáideann foláirimh athróga áitiúla CSS anois .alertchun saincheaptha feabhsaithe fíor-ama a dhéanamh. Socraítear luachanna na n-athróg CSS trí Sass, mar sin tacaítear le saincheaptha Sass fós freisin.

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

Athróga 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 meascadh

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

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

Lúb Sass

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

Tosaigh

Tús a chur le heilimintí mar fholáirimh

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

Ar mhaithe le foláireamh a dhíbhe amháin, ní gá an chomhpháirt a thúsú de láimh tríd an JS API. Trí úsáid a bhaint as data-bs-dismiss="alert", cuirfear tús leis an gcomhpháirt go huathoibríoch agus déanfar é a dhíbhe i gceart.

Féach an rannán truicear chun tuilleadh sonraí a fháil.

Truicear

Is féidir dífhostú a bhaint amach leis an datatréith ar chnaipe laistigh den foláireamh mar a léirítear thíos:

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

nó ar chnaipe lasmuigh den foláireamh ag baint úsáide as an data-bs-targetméid a léirítear thíos:

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

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

Modhanna

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

const 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á nuair a bhíonn uath-thionscnamh an data-api in ú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 cheadaíonn duit an cás foláirimh a bhaineann le heilimint DOM a fháil. Mar shampla: 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 dtosófaí é. Is féidir leat é a úsáid mar seo: bootstrap.Alert.getOrCreateInstance(element).

Bunúsáid:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
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. 
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()
})