Перайсці да асноўнага зместу Перайсці да навігацыі па дакументах
Check
in English

Тосты

Націскныя апавяшчэнні для вашых наведвальнікаў з тостам, лёгкім і лёгка наладжвальным папярэджаннем.

На гэтай старонцы

Тосты - гэта лёгкія апавяшчэнні, створаныя для імітацыі push-апавяшчэнняў, якія папулярызавалі мабільныя і настольныя аперацыйныя сістэмы. Яны зроблены з дапамогай flexbox, таму іх лёгка выраўнаваць і размясціць.

Агляд

Што трэба ведаць пры выкарыстанні плагіна toast:

  • Тосты падключаюцца з меркаванняў прадукцыйнасці, таму вы павінны ініцыялізаваць іх самастойна .
  • Тосты будуць аўтаматычна схаваны, калі вы не пазначыце autohide: false.
Анімацыйны эфект гэтага кампанента залежыць ад prefers-reduced-motionмедыя-запыту. Глядзіце раздзел аб паменшаным руху нашай дакументацыі па спецыяльных магчымасцях .

Прыклады

Базавы

Каб стымуляваць пашыраемыя і прадказальныя тосты, мы рэкамендуем загаловак і тэкст. У загалоўках Toast выкарыстоўваецца display: flex, што дазваляе лёгка выраўноўваць кантэнт дзякуючы нашым утылітам margin і flexbox.

Тосты настолькі гнуткія, наколькі вам трэба, і маюць вельмі невялікую патрабаваную разметку. Як мінімум, мы патрабуем, каб ваш «падсмажаны» кантэнт утрымліваў як мінімум адзін элемент, і мы настойліва рэкамендуем кнопку закрыцця.

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>
Раней нашы скрыпты дынамічна дадавалі .hideклас, каб цалкам схаваць тост (з display:none, а не толькі з opacity:0). Цяпер у гэтым больш няма неабходнасці. Аднак для зваротнай сумяшчальнасці наш скрыпт будзе працягваць пераключаць клас (нават калі ў гэтым няма практычнай неабходнасці) да наступнай асноўнай версіі.

Жывы прыклад

Націсніце кнопку ніжэй, каб паказаць тост (размешчаны разам з нашымі ўтылітамі ў правым ніжнім куце), які быў схаваны па змаўчанні.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Мы выкарыстоўваем наступны JavaScript, каб запусціць нашу дэманстрацыю тостаў:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Напаўпразрысты

Тосты злёгку празрыстыя, каб злівацца з тым, што знаходзіцца пад імі.

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Укладванне

Вы можаце скласці тосты, загарнуўшы іх у кантэйнер для тостаў, што вертыкальна дадасць адлегласць.

html 
<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Індывідуальны кантэнт

Наладзьце свае тосты, выдаліўшы падкампаненты, наладзіўшы іх з дапамогай утыліт або дадаўшы ўласную разметку. Тут мы стварылі больш просты тост, выдаліўшы па змаўчанні .toast-header, дадаўшы карыстальніцкі значок схавання з Bootstrap Icons і выкарыстоўваючы некаторыя ўтыліты flexbox для карэкціроўкі макета.

html 
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Акрамя таго, вы таксама можаце дадаць дадатковыя элементы кіравання і кампаненты ў тосты.

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Каляровыя схемы

Абапіраючыся на прыведзены вышэй прыклад, вы можаце ствараць розныя каляровыя схемы тостаў з дапамогай нашых утыліт колеру і фону . Тут мы дадалі .text-bg-primaryда .toast, а затым дадалі .btn-close-whiteда нашай кнопкі закрыцця. Для выразнасці краю мы выдаляем рамку па змаўчанні з дапамогай .border-0.

html 
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Размяшчэнне

Размясціце тосты з карыстальніцкім CSS па меры неабходнасці. Верхні правы часта выкарыстоўваецца для апавяшчэнняў, як і верхні сярэдні. Калі вы збіраецеся паказваць толькі адзін тост за раз, змясціце стылі пазіцыянавання прама на .toast.

Бутстрап 11 хвілін таму
Прывітанне Сусвет! Гэта паведамленне з тостам.
html 
<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

Для сістэм, якія ствараюць больш апавяшчэнняў, разгледзьце магчымасць выкарыстання элемента абгорткі, каб іх можна было лёгка складаць.

html 
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

Вы таксама можаце пацешыць утыліты flexbox для выраўноўвання тостаў па гарызанталі і/або вертыкалі.

html 
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Даступнасць

Тосты прызначаны для таго, каб невялікае перапыненне вашых наведвальнікаў або карыстальнікаў, таму, каб дапамагчы тым, хто мае праграмы чытання з экрана і падобныя дапаможныя тэхналогіі, вы павінны абгарнуць свае тосты ў aria-liveрэгіён . Змены ў жывых рэгіёнах (напрыклад, увядзенне/абнаўленне кампанента тоста) аўтаматычна абвяшчаюцца праграмамі чытання з экрана без неабходнасці перамяшчаць фокус карыстальніка або іншым чынам перапыняць яго. Акрамя таго, уключыце, aria-atomic="true"каб пераканацца, што ўвесь тост заўсёды абвяшчаецца як адзіная (атамарная) адзінка, а не проста абвяшчае тое, што было зменена (што можа прывесці да праблем, калі вы абнаўляеце толькі частку змесціва тоста або калі адлюстроўваецца аднолькавы змест тоста у больш позні момант часу). Калі патрэбная інфармацыя важная для працэсу, напрыклад, для спісу памылак у форме, выкарыстоўвайце кампанент папярэджаннязамест тостаў.

Звярніце ўвагу, што жывы рэгіён павінен прысутнічаць у разметцы перад тым, як будзе створаны або абноўлены тост. Калі вы дынамічна ствараеце абодва адначасова і ўстаўляеце іх на старонку, яны звычайна не будуць аб'яўляцца дапаможнымі тэхналогіямі.

Вам таксама трэба адаптаваць roleі aria-liveўзровень у залежнасці ад зместу. Калі гэта важнае паведамленне, напрыклад, памылка, выкарыстоўвайце role="alert" aria-live="assertive", у адваротным выпадку выкарыстоўвайце role="status" aria-live="polite"атрыбуты.

Па меры змены змесціва, якое вы паказваеце, не забудзьцеся абнавіць час delayчакання , каб у карыстальнікаў было дастаткова часу, каб прачытаць тост.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

Пры выкарыстанні autohide: falseвы павінны дадаць кнопку закрыцця, каб карыстальнікі маглі адхіляць тост.

html 
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Нягледзячы на ​​тое, што тэхнічна магчыма дадаць у ваш тост элементы кіравання, якія можна сфакусаваць/выканаць (напрыклад, дадатковыя кнопкі або спасылкі), вам варта пазбягаць гэтага для аўтаматычнага схавання тостаў. Нават калі вы дасце тосту доўгі delayтайм -аўт , карыстальнікам клавіятуры і дапаможных тэхналогій можа быць цяжка дабрацца да тоста своечасова, каб прыняць меры (паколькі тосты не атрымліваюць фокусу, калі яны адлюстроўваюцца). Калі вам абавязкова патрэбны дадатковыя элементы кіравання, мы рэкамендуем выкарыстоўваць тост з autohide: false.

CSS

Пераменныя

Дададзена ў v5.2.0

У рамках развіцця падыходу Bootstrap да зменных CSS, тосты цяпер выкарыстоўваюць лакальныя зменныя CSS .toastдля палепшанай налады ў рэжыме рэальнага часу. Значэнні для зменных CSS задаюцца праз Sass, таму налада Sass па-ранейшаму падтрымліваецца.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Зменныя Sass

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

Выкарыстанне

Ініцыялізаваць тосты праз JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Трыгеры

Звальненне можа быць дасягнута з дапамогай dataатрыбута на кнопцы ў тосце , як паказана ніжэй:

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

або на кнопцы па-за тостам , выкарыстоўваючы, data-bs-targetяк паказана ніжэй:

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

Параметры

Паколькі параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript, вы можаце дадаць імя параметра да data-bs-, як у data-bs-animation="{value}". Не забудзьцеся змяніць тып рэгістра назвы опцыі з « camelCase » на « kebab-case » пры перадачы опцый праз атрыбуты даных. Напрыклад, выкарыстоўвайце data-bs-custom-class="beautifier"замест data-bs-customClass="beautifier".

Пачынаючы з Bootstrap 5.2.0, усе кампаненты падтрымліваюць эксперыментальны атрыбут зарэзерваваных даных data-bs-config, які можа змяшчаць простую канфігурацыю кампанента ў выглядзе радка JSON. Калі элемент мае атрыбуты data-bs-config='{"delay":0, "title":123}'і data-bs-title="456", канчатковае titleзначэнне будзе , 456а асобныя атрыбуты даных будуць перавызначаць значэнні, зададзеныя на data-bs-config. Акрамя таго, існуючыя атрыбуты даных могуць змяшчаць такія значэнні JSON, як data-bs-delay='{"show":0,"hide":150}'.

Імя Тып Па змаўчанні Апісанне
animation лагічны true Прымяніце да тоста знікненне CSS.
autohide лагічны true Аўтаматычна хаваць тост пасля затрымкі.
delay лік 5000 Затрымка ў мілісекундах, перш чым схаваць тост.

Метады

Асінхронныя метады і пераходы

Усе метады API асінхронныя і пачынаюць пераход . Яны вяртаюцца да абанента, як толькі пачынаецца пераход, але да яго заканчэння . Акрамя таго, выклік метаду пераходнага кампанента будзе ігнаравацца .

Для атрымання дадатковай інфармацыі глядзіце нашу дакументацыю па JavaScript .

Метад Апісанне
dispose Хавае тост элемента. Ваш тост застанецца ў DOM, але больш не будзе паказвацца.
getInstance Статычны метад, які дазваляе атрымаць экзэмпляр тоста, звязаны з элементам DOM.
Напрыклад: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)вяртае экзэмпляр тоста Bootstrap.
getOrCreateInstance Статычны метад, які дазваляе вам атрымаць экзэмпляр тоста, звязаны з элементам DOM, або стварыць новы, калі ён не быў ініцыялізаваны.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Вяртае асобнік тоста Bootstrap.
hide Хавае тост элемента. Вяртаецца да абанента да таго, як тост быў фактычна схаваны (г.зн. да таго , як hidden.bs.toastадбудзецца падзея). Вы павінны ўручную выклікаць гэты метад, калі вы зрабілі autohideгэта false.
isShown Вяртае лагічнае значэнне ў адпаведнасці са станам бачнасці тоста.
show Выяўляе тост элемента. Вяртаецца да абанента да таго, як тост быў фактычна паказаны (г.зн. да таго , як shown.bs.toastадбудзецца падзея). Вы павінны ўручную выклікаць гэты метад, замест гэтага ваш тост не будзе адлюстроўвацца.

Падзеі

Падзея Апісанне
hide.bs.toast Гэта падзея запускаецца неадкладна, калі hideбыў выкліканы метад асобніка.
hidden.bs.toast Гэта падзея запускаецца, калі тост перастае быць схаваным ад карыстальніка.
show.bs.toast Гэта падзея запускаецца неадкладна пры showвыкліку метаду асобніка.
shown.bs.toast Гэта падзея запускаецца, калі тост становіцца бачным для карыстальніка. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})