Mandehana any amin'ny votoaty fototra Mandehana any amin'ny docs navigation
Check
in English

fanairana

Manomeza hafatra tamberin'andraikitra amin'ny teny manodidina ho an'ny hetsika mahazatra ataon'ny mpampiasa miaraka amin'ireo hafatra fanairana azo ampiasaina sy mora azo.

Amin'ity pejy ity

OHATRA

Ny fanairana dia misy amin'ny halavan'ny lahatsoratra rehetra, ary koa ny bokotra akaiky. Mba hanaovana endrika araka ny tokony ho izy dia ampiasao ny iray amin'ireo kilasy valo ilaina.alert-success amin'ny teny manodidina (oh, ). Ho an'ny fandroahana an-tserasera, ampiasao ny plugin JavaScript fanairana .

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>
Fampitaovana ny dikan'ny teknôlôjia manampy

Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary amin'ny atiny (ohatra ny lahatsoratra hita maso), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .visually-hiddenkilasy.

Ohatra mivantana

Kitiho ny bokotra etsy ambany raha te hampiseho fanairana (nafenina miaraka amin'ny fomba an-tsipika hanombohana), dia esory (ary ravao) izany miaraka amin'ny bokotra akaiky.

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

Mampiasa ity JavaScript manaraka ity izahay hanetsika ny fihetsiketsehana fanairana mivantana:

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

Ampiasao ny .alert-linkkilasin'ny utility mba hanomezana rohy miloko mifanandrify haingana ao anatin'ny fanairana rehetra.

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>

Votoaty fanampiny

Ny fampandrenesana dia mety ahitana singa HTML fanampiny toy ny lohateny, fehintsoratra ary fizarana.

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>

sary Masina

Toy izany koa, azonao atao ny mampiasa fitaovana flexbox sy kisary Bootstrap mba hamoronana fanairana miaraka amin'ny kisary. Miankina amin'ny kisary sy ny atiny, azonao atao ny manampy fitaovana fanampiny na fomba fanao mahazatra.

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>

Mila kisary mihoatra ny iray ho an'ny fanairanao? Eritrereto ny fampiasana kisary Bootstrap bebe kokoa ary manao sprite SVG eo an-toerana toy izany mba hanondro mora foana ireo kisary mitovy.

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>

nandefa

Amin'ny alàlan'ny plugin JavaScript alert, azo atao ny manilika ny fampandrenesana rehetra. Toy izao ny fomba:

  • Ataovy azo antoka fa nampiditra ny plugin fanairana ianao, na ny JavaScript Bootstrap natambatra.
  • Manampia bokotra akaiky sy ny .alert-dismissiblekilasy, izay manampy padding fanampiny eo ankavanan'ny fanairana ary mametraka ny bokotra akaiky.
  • Ao amin'ny bokotra akaiky, ampio ny data-bs-dismiss="alert"toetra, izay miteraka ny fampiasa JavaScript. Ataovy azo antoka ny fampiasana ilay <button>singa miaraka aminy mba hahazoana fitondran-tena mety amin'ny fitaovana rehetra.
  • Mba hanamafisana ny fanairana rehefa manilika azy ireo, ataovy azo antoka fa ampio ny .fadesy .showkilasy.

Azonao atao ny mahita an'ity hetsika ity miaraka amin'ny demo mivantana:

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>
Rehefa esorina ny fanairana dia esorina tanteraka amin'ny firafitry ny pejy ilay singa. Raha manilika ny fampandrenesana amin'ny alalan'ny bokotra akaiky ny mpampiasa kitendry, dia ho very tampoka ny fifantohany ary, miankina amin'ny navigateur, dia averina any amin'ny fiandohan'ny pejy/rakitra. Noho izany antony izany dia manoro hevitra izahay ny hampiditra JavaScript fanampiny izay mihaino ny closed.bs.alerthetsika ary mametraka focus()amin'ny programa amin'ny toerana mety indrindra amin'ny pejy. Raha mikasa ny hamindra ny fifantohana amin'ny singa iray tsy mifanentana izay matetika tsy mahazo fifantohana ianao, dia ataovy izay hanampiana tabindex="-1"ilay singa.

CSS

hiovaova

Nampiana v5.2.0

Ao anatin'ny fomba fiovaovan'ny CSS mivoatra ao amin'ny Bootstrap, ny fampandrenesana izao dia mampiasa ny fari-piadidiana CSS eo an .alert-toerana ho an'ny fanamboarana amin'ny fotoana tena izy. Ny soatoavina ho an'ny fari-piainan'ny CSS dia apetraka amin'ny alàlan'ny Sass, noho izany dia mbola tohanana ihany koa ny fanamboarana Sass.

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

Sass variables

$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

Ampiasaina miaraka amin'ny $theme-colorsfamoronana kilasy modifier contextual ho an'ny fanairanay.

@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

Loop izay mamorona kilasy modifier miaraka amin'ny 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);
  }
}

Fihetsika JavaScript

Initialize

Ampidiro ny singa ho fanairana

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

Ho an'ny tanjona tokana hanilihana fanairana dia tsy ilaina ny manomboka amin'ny tanana amin'ny alàlan'ny JS API. Amin'ny alàlan'ny fampiasana ny data-bs-dismiss="alert", ny singa dia hatomboka ho azy ary esorina araka ny tokony ho izy.

Jereo ny fizarana trigger raha mila fanazavana fanampiny.

Niteraka

Ny fandroahana dia azo atao amin'ny datatoetra amin'ny bokotra iray ao anatin'ny fanairana araka ny aseho eto ambany:

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

na amin'ny bokotra iray ivelan'ny fanairana amin'ny fampiasana ny data-bs-targetaseho eto ambany:

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

Mariho fa ny fanakatonana fanairana dia hanala azy amin'ny DOM.

fomba

Azonao atao ny mamorona ohatra fanairana miaraka amin'ny mpanamboatra fanairana, ohatra:

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

Izany dia mahatonga ny fanairana mihaino ny hetsika kitihina amin'ny singa taranaka manana ny data-bs-dismiss="alert"toetra. (Tsy ilaina amin'ny fampiasana ny fanombohana mandeha ho azy ny data-api.)

FOMBA Description
close Manakatona fanairana amin'ny fanesorana azy amin'ny DOM. Raha misy ny .fadeand .showclasses ao amin'ilay singa, dia hanjavona ny fanairana alohan'ny hanesorana azy.
dispose Manimba ny fanairana singa iray. (Esory ny angona voatahiry amin'ny singa DOM)
getInstance Fomba static izay ahafahanao mahazo ny ohatra fanairana mifandray amin'ny singa DOM. Ohatra: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Fomba static izay mamerina ohatra fanairana mifandray amin'ny singa DOM na mamorona vaovao raha toa ka tsy natomboka izany. Azonao ampiasaina toy izao: bootstrap.Alert.getOrCreateInstance(element).

Fampiasana fototra:

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

zava-mitranga

Ny plugin fanairana an'ny Bootstrap dia mampiseho hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fampiasa mailo.

Event Description
close.bs.alert Mirehitra avy hatrany rehefa closeantsoina ny fomba fiasa.
closed.bs.alert Voaroaka rehefa nakatona ny fanairana ary vita ny fifindrana CSS. 
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()
})