Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
Check
in English

Perspėjimai

Pateikite kontekstinius grįžtamojo ryšio pranešimus apie tipiškus vartotojo veiksmus naudodami keletą galimų ir lanksčių įspėjimų pranešimų.

Šiame puslapyje

Pavyzdžiai

Galimi įspėjimai apie bet kokio ilgio tekstą, taip pat pasirenkamas uždarymo mygtukas. Norėdami sukurti tinkamą stilių, naudokite vieną iš aštuonių būtinų kontekstinių klasių (pvz., .alert-success). Jei norite atmesti, naudokite įspėjimų „JavaScript“ papildinį .

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>
Pagalbinių technologijų prasmės perteikimas

Spalvų naudojimas reikšmei pridėti suteikia tik vaizdinę nuorodą, kuri nebus perduota pagalbinių technologijų, pvz., ekrano skaitytuvų, naudotojams. Užtikrinkite, kad informacija, pažymėta spalva, būtų akivaizdi iš paties turinio (pvz., matomas tekstas), arba būtų įtraukta naudojant alternatyvias priemones, pvz., papildomą tekstą, paslėptą .visually-hiddenklasėje.

Gyvas pavyzdys

Spustelėkite toliau esantį mygtuką, kad būtų rodomas įspėjimas (paslėptas naudojant eilutinius stilius, kad pradėtumėte), tada atmeskite (ir sunaikinkite) jį naudodami integruotą uždarymo mygtuką.

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

Mes naudojame šią „JavaScript“, kad suaktyvintume tiesioginio įspėjimo demonstraciją:

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

Naudokite .alert-linknaudingumo klasę, kad greitai pateiktumėte atitinkamas spalvotas nuorodas bet kuriame įspėjime.

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>

Papildomas turinys

Įspėjimuose taip pat gali būti papildomų HTML elementų, tokių kaip antraštės, pastraipos ir skyrikliai.

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>

Piktogramos

Panašiai galite naudoti „flexbox“ paslaugų programas ir „ Bootstrap Icons “, kad sukurtumėte įspėjimus su piktogramomis. Atsižvelgiant į piktogramas ir turinį, galbūt norėsite pridėti daugiau paslaugų arba pasirinktinių stilių.

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>

Reikia daugiau nei vienos piktogramos įspėjimams? Apsvarstykite galimybę naudoti daugiau „Bootstrap“ piktogramų ir sukurti vietinį SVG „spraite“, kad galėtumėte pakartotinai naudoti tas pačias piktogramas.

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>

Atleidimas

Naudojant įspėjimo „JavaScript“ papildinį, galima atmesti bet kokį įspėjimą. Štai kaip:

  • Įsitikinkite, kad įkėlėte įspėjimo papildinį arba sukompiliuotą „Bootstrap JavaScript“.
  • Pridėkite uždarymo mygtuką ir .alert-dismissibleklasę, kuri prideda papildomo užpildymo įspėjimo dešinėje ir uždarykite mygtuką.
  • Uždaryti mygtuką pridėkite data-bs-dismiss="alert"atributą, kuris suaktyvina „JavaScript“ funkciją. Būtinai naudokite <button>elementą su juo, kad tinkamai veiktų visuose įrenginiuose.
  • Norėdami suaktyvinti įspėjimus, kai juos atsisakote, būtinai pridėkite .fadeir .showklases.

Galite pamatyti tai veikiant tiesioginėje demonstracijoje:

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>
Kai įspėjimas atmetamas, elementas visiškai pašalinamas iš puslapio struktūros. Jei klaviatūros naudotojas atmeta įspėjimą uždarymo mygtuku, jo dėmesys staiga prarandamas ir, atsižvelgiant į naršyklę, bus iš naujo nustatytas į puslapio / dokumento pradžią. Dėl šios priežasties rekomenduojame įtraukti papildomą JavaScript, kuris išklauso closed.bs.alertįvykį ir programiškai nustato focus()tinkamiausią puslapio vietą. Jei planuojate perkelti fokusą į neinteraktyvų elementą, kuris paprastai nesufokusuojamas, būtinai pridėkite tabindex="-1"elementą.

CSS

Kintamieji

Pridėta 5.2.0 versijoje

Kaip „Bootstrap“ besivystančio CSS kintamųjų metodo dalis, įspėjimuose dabar naudojami vietiniai CSS kintamieji, .alertkad būtų galima patobulinti tinkinimą realiuoju laiku. CSS kintamųjų reikšmės nustatomos naudojant Sass, todėl Sass tinkinimas vis dar palaikomas.

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

$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

Naudojamas kartu su $theme-colorsmūsų įspėjimų kontekstinio modifikavimo klasėms sukurti.

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

Ciklas, generuojantis modifikatorių klases su 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 elgesys

Inicijuoti

Inicijuoti elementus kaip įspėjimus

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

Vien tik norint atmesti įspėjimą, nebūtina inicijuoti komponento rankiniu būdu naudojant JS API. Naudojant data-bs-dismiss="alert", komponentas bus inicijuotas automatiškai ir tinkamai atmestas.

Daugiau informacijos rasite trigerių skyriuje.

Trigeriai

Atleisti galima naudojant įspėjimodata mygtuko atributą, kaip parodyta toliau:

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

arba ant perspėjimo ribų esančiame mygtuke, naudojant data-bs-targetkaip parodyta toliau:

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

Atminkite, kad uždarius įspėjimą jis bus pašalintas iš DOM.

Metodai

Galite sukurti įspėjimo egzempliorių naudodami įspėjimo konstruktorių, pavyzdžiui:

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

Tai priverčia perspėjimą įsiklausyti į palikuonių elementų, turinčių data-bs-dismiss="alert"atributą, paspaudimų įvykius. (Nebūtina, kai naudojamas duomenų API automatinis inicijavimas.)

Metodas apibūdinimas
close Perspėjimas uždaromas pašalinus jį iš DOM. Jei elemente yra .fadeir .showklasės, įspėjimas išnyks prieš jį pašalinant.
dispose Sunaikina elemento įspėjimą. (Pašalina saugomus duomenis DOM elemente)
getInstance Statinis metodas, leidžiantis gauti įspėjimo egzempliorių, susietą su DOM elementu. Pavyzdžiui bootstrap.Alert.getInstance(alert):.
getOrCreateInstance Statinis metodas, kuris grąžina įspėjimo egzempliorių, susietą su DOM elementu, arba sukuria naują, jei jis nebuvo inicijuotas. Galite naudoti taip: bootstrap.Alert.getOrCreateInstance(element).

Pagrindinis naudojimas:

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

Renginiai

„Bootstrap“ įspėjimo papildinys atskleidžia keletą įvykių, kad būtų galima prisijungti prie įspėjimo funkcijų.

Renginys apibūdinimas
close.bs.alert Suveikia iš karto, kai closeiškviečiamas egzemplioriaus metodas.
closed.bs.alert Suaktyvinama, kai įspėjimas buvo uždarytas ir CSS perėjimai baigti. 
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()
})