Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
Check
in English

ceeb toom

Muab cov ntsiab lus tawm tswv yim tawm tswv yim rau cov neeg siv ib txwm ua nrog cov lus ceeb toom muaj thiab hloov pauv tau.

Ntawm nplooj ntawv no

Piv txwv

Cov ntawv ceeb toom muaj nyob rau txhua qhov ntev ntawm cov ntawv nyeem, nrog rau qhov xaiv kaw khawm. Rau styling kom tsim nyog, siv ib qho ntawm yim yam uas yuav tsum tau muaj cov chav kawm (piv txwv li, .alert-success). Rau inline tshem tawm, siv cov lus ceeb toom JavaScript plugin .

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>
Qhia lub ntsiab lus rau kev pab technologies

Siv cov xim los ntxiv cov ntsiab lus tsuas yog muab qhov pom kev pom, uas yuav tsis raug xa mus rau cov neeg siv cov thev naus laus zis pab - xws li cov ntawv nyeem. Xyuas kom meej tias cov ntaub ntawv qhia los ntawm cov xim yog pom tseeb los ntawm cov ntsiab lus nws tus kheej (xws li cov ntawv pom), lossis suav nrog lwm txoj kev, xws li cov ntawv ntxiv zais nrog cov .visually-hiddenchav kawm.

Nyob ua piv txwv

Nias lub pob hauv qab no kom pom kev ceeb toom (ntxiv nrog cov qauv hauv kab pib), tom qab ntawd tso tseg (thiab rhuav tshem) nws nrog lub pob kaw.

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

Peb siv JavaScript hauv qab no los ua rau peb qhov kev ceeb toom nyob deb:

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

Siv cov .alert-linkchav kawm siv hluav taws xob kom sai muab cov xim sib xws hauv ib qho kev ceeb toom.

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>

Cov ntsiab lus ntxiv

Cov lus ceeb toom tuaj yeem muaj cov ntsiab lus HTML ntxiv xws li kab lus, kab lus thiab cov kab sib faib.

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>

Icons

Ib yam li ntawd, koj tuaj yeem siv cov khoom siv flexbox thiab Bootstrap Icons los tsim kev ceeb toom nrog cov cim. Nyob ntawm koj lub cim thiab cov ntsiab lus, koj tuaj yeem xav ntxiv cov khoom siv hluav taws xob lossis cov qauv kev cai.

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>

Xav tau ntau tshaj ib lub cim rau koj cov lus ceeb toom? Xav txog siv ntau Bootstrap Icons thiab ua ib lub zos SVG sprite zoo li kom yooj yim siv tib lub cim dua.

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>

Tso tseg

Siv lub ceeb toom JavaScript plugin, nws muaj peev xwm tso tseg ib qho kev ceeb toom hauv kab. Nov yog li cas:

  • Nco ntsoov tias koj tau thauj khoom ceeb toom plugin, lossis suav nrog Bootstrap JavaScript.
  • Ntxiv khawm kaw thiab .alert-dismissiblechav kawm, uas ntxiv padding ntxiv rau sab xis ntawm kev ceeb toom thiab tso lub khawm kaw.
  • Ntawm lub pob kaw, ntxiv tus data-bs-dismiss="alert"cwj pwm, uas ua rau JavaScript ua haujlwm. Nco ntsoov siv lub <button>caij nrog nws rau kev coj tus cwj pwm zoo thoob plaws txhua yam khoom siv.
  • Txhawm rau ua kom muaj kev ceeb toom thaum tso tawm lawv, nco ntsoov ntxiv cov chav kawm .fadethiab .showcov chav kawm.

Koj tuaj yeem pom qhov no hauv kev nqis tes ua nrog qhov demo nyob:

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>
Thaum qhov kev ceeb toom raug tso tseg, lub ntsiab lus raug tshem tawm tag nrho ntawm nplooj ntawv qauv. Yog tias tus neeg siv cov keyboard tso tseg qhov kev ceeb toom uas siv lub khawm kaw, lawv lub hom phiaj yuav poob sai sai thiab, nyob ntawm qhov browser, rov pib dua rau qhov pib ntawm nplooj ntawv / ntawv. Vim li no, peb pom zoo kom suav nrog JavaScript ntxiv uas mloog rau qhov closed.bs.alertkev tshwm sim thiab programmatically teem focus()rau qhov chaw tsim nyog tshaj plaws hauv nplooj ntawv. Yog tias koj tab tom npaj txav kev tsom mus rau qhov tsis muaj kev sib cuam tshuam uas ib txwm tsis tau txais kev tsom xam, nco ntsoov ntxiv tabindex="-1"rau lub caij.

CSS

Hloov pauv

Ntxiv hauv v5.2.0

Raws li ib feem ntawm Bootstrap txoj kev hloov pauv CSS hloov pauv mus kom ze, cov lus ceeb toom tam sim no siv cov CSS hauv zos .alertrau kev hloov kho lub sijhawm tiag tiag. Cov txiaj ntsig rau CSS qhov sib txawv tau teeb tsa ntawm Sass, yog li Sass customization tseem txhawb nqa, ib yam nkaus.

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

Sib tov

Siv ua ke nrog $theme-colorslos tsim cov ntsiab lus hloov kho cov chav kawm rau peb cov lus ceeb toom.

@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 lub voj

Loop uas tsim cov chav kawm hloov kho nrog cov 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);
  }
}

JavaScript cwj pwm

Pib pib

Pib cov ntsiab lus raws li kev ceeb toom

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

Rau lub hom phiaj nkaus xwb ntawm kev tso tseg qhov kev ceeb toom, nws tsis yog qhov tsim nyog los pib cov khoom siv los ntawm JS API. Los ntawm kev siv data-bs-dismiss="alert", cov khoom siv yuav pib ua haujlwm tau zoo thiab raug tso tseg.

Saib cov lus qhia ntxiv kom paub meej ntxiv.

Ua rau

Kev tshem tawm tuaj yeem ua tiav nrog tus datacwj pwm ntawm lub pob hauv kev ceeb toom raws li qhia hauv qab no:

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

los yog ntawm ib lub pob sab nraum lub ceeb toom siv data-bs-targetraws li qhia hauv qab no:

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

Nco ntsoov tias kaw qhov kev ceeb toom yuav tshem tawm ntawm DOM.

Cov txheej txheem

Koj muaj peev xwm tsim ib qho kev ceeb toom piv txwv nrog lub alert constructor, piv txwv li:

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

Qhov no ua rau kev ceeb toom mloog rau cov xwm txheej nyem ntawm cov xeeb leej xeeb ntxwv uas muaj tus data-bs-dismiss="alert"cwj pwm. (Tsis tsim nyog thaum siv data-api's auto-initialization.)

Txoj kev Kev piav qhia
close Kaw ib qho kev ceeb toom los ntawm kev tshem tawm ntawm DOM. Yog hais tias cov .fadethiab .showcov chav kawm muaj nyob rau ntawm lub caij, lub ceeb toom yuav ploj mus ua ntej nws yuav raug tshem tawm.
dispose Ua kom puas lub ntsiab lus ceeb toom. (Tshem cov ntaub ntawv khaws cia ntawm DOM lub caij)
getInstance Txoj kev zoo li qub uas tso cai rau koj kom tau txais qhov xwm txheej ceeb toom cuam tshuam rau DOM lub caij. Piv txwv li bootstrap.Alert.getInstance(alert):.
getOrCreateInstance Txoj kev zoo li qub uas xa rov qab qhov xwm txheej ceeb toom cuam tshuam rau DOM lub caij lossis tsim ib qho tshiab yog tias nws tsis tau pib. Koj tuaj yeem siv nws li no: bootstrap.Alert.getOrCreateInstance(element).

Basic siv:

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

Cov xwm txheej

Bootstrap's alert plugin nthuav tawm ob peb txheej xwm rau hooking rau hauv kev ceeb toom ua haujlwm.

Kev tshwm sim Kev piav qhia
close.bs.alert Hluav taws kub tam sim ntawd thaum closehu ua piv txwv.
closed.bs.alert Raug rho tawm haujlwm thaum qhov kev ceeb toom tau raug kaw thiab kev hloov CSS tau ua tiav. 
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()
})