Neidio i'r prif gynnwys Neidio i lywio dogfennau
Check
in English

Tosts

Gwthiwch hysbysiadau i'ch ymwelwyr gyda llwncdestun, neges rybuddio ysgafn y gellir ei haddasu'n hawdd.

Ar y dudalen hon

Mae tosts yn hysbysiadau ysgafn sydd wedi'u cynllunio i ddynwared yr hysbysiadau gwthio sydd wedi'u poblogeiddio gan systemau gweithredu symudol a bwrdd gwaith. Maent wedi'u hadeiladu gyda flexbox, felly maent yn hawdd eu halinio a'u lleoli.

Trosolwg

Pethau i'w gwybod wrth ddefnyddio'r ategyn tost:

  • Mae tost yn optio i mewn am resymau perfformiad, felly mae'n rhaid i chi eu cychwyn eich hun .
  • Bydd toasts yn cuddio'n awtomatig os nad ydych yn nodi autohide: false.
Mae effaith animeiddio'r gydran hon yn dibynnu ar prefers-reduced-motionymholiad y cyfryngau. Gweler adran cynnig gostyngol ein dogfennaeth hygyrchedd .

Enghreifftiau

Syml

Er mwyn annog tostau estynadwy a rhagweladwy, rydym yn argymell pennawd a chorff. Mae penawdau tost yn defnyddio display: flex, gan ganiatáu aliniad hawdd o gynnwys diolch i'n cyfleustodau ymyl a flexbox.

Mae tostau mor hyblyg ag sydd eu hangen arnoch ac ychydig iawn o farcio gofynnol sydd ganddynt. O leiaf, mae angen un elfen arnom i gynnwys eich cynnwys “wedi'i dostio” ac rydym yn annog yn gryf botwm diswyddo.

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>
Yn flaenorol, roedd ein sgriptiau'n ychwanegu'r .hidedosbarth yn ddeinamig i guddio tost yn llwyr (gyda display:none, yn hytrach na dim ond gyda opacity:0). Nid yw hyn bellach yn angenrheidiol. Fodd bynnag, ar gyfer cydweddoldeb tuag yn ôl, bydd ein sgript yn parhau i doglo'r dosbarth (er nad oes angen ymarferol amdani) tan y fersiwn fawr nesaf.

Esiampl fyw

Cliciwch y botwm isod i ddangos tost (wedi'i leoli gyda'n cyfleustodau yn y gornel dde isaf) sydd wedi'i guddio yn ddiofyn.

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

Rydym yn defnyddio'r JavaScript canlynol i sbarduno ein demo tost byw:

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

    toast.show()
  })
}

Tryleu

Mae tost ychydig yn dryloyw i gyd-fynd â'r hyn sydd oddi tanynt.

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>

Pentyrru

Gallwch bentyrru tostau trwy eu lapio mewn cynhwysydd tost, a fydd yn ychwanegu rhywfaint o fylchau yn fertigol.

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>

Cynnwys personol

Addaswch eich llwncdestun trwy gael gwared ar is-gydrannau, eu tweacio â chyfleustodau , neu drwy ychwanegu eich marc eich hun. Yma rydym wedi creu tost symlach trwy gael gwared ar y rhagosodiad .toast-header, ychwanegu eicon cuddio arferol o Bootstrap Icons , a defnyddio rhai cyfleustodau flexbox i addasu'r cynllun.

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>

Fel arall, gallwch hefyd ychwanegu rheolyddion a chydrannau ychwanegol at dostau.

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>

Cynlluniau lliw

Gan adeiladu ar yr enghraifft uchod, gallwch greu gwahanol gynlluniau lliw tost gyda'n cyfleustodau lliw a chefndir . Yma rydym wedi ychwanegu .text-bg-primaryat y .toast, ac yna ychwanegu .btn-close-whiteat ein botwm cau. I gael ymyl crisp, rydyn ni'n dileu'r ffin ddiofyn gyda .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>

Lleoliad

Rhowch dostau gyda CSS personol yn ôl yr angen. Defnyddir y dde uchaf yn aml ar gyfer hysbysiadau, fel y mae'r canol uchaf. Os mai dim ond un llwncdestun y byddwch chi'n ei ddangos ar y tro, rhowch yr arddulliau lleoli yn gywir ar y .toast.

Bootstrap 11 munud yn ôl
Helo Byd! Neges dost yw hon.
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>

Ar gyfer systemau sy'n cynhyrchu mwy o hysbysiadau, ystyriwch ddefnyddio elfen lapio fel y gallant bentyrru'n hawdd.

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>

Gallwch hefyd ddod yn ffansi gyda chyfleustodau flexbox i alinio tostau yn llorweddol a / neu'n fertigol.

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>

Hygyrchedd

Bwriedir i dostau fod yn ymyriadau bach i’ch ymwelwyr neu ddefnyddwyr, felly i helpu’r rhai sydd â darllenwyr sgrin a thechnolegau cynorthwyol tebyg, dylech lapio’ch llwncdestun mewn aria-liverhanbarth . Mae newidiadau i ranbarthau byw (fel chwistrellu/diweddaru cydran tost) yn cael eu cyhoeddi'n awtomatig gan ddarllenwyr sgrin heb fod angen symud ffocws y defnyddiwr neu dorri ar draws y defnyddiwr fel arall. Yn ogystal, cynhwyswch aria-atomic="true"er mwyn sicrhau bod y tost cyfan bob amser yn cael ei gyhoeddi fel un uned (atomig), yn hytrach na dim ond cyhoeddi'r hyn a newidiwyd (a allai arwain at broblemau os mai dim ond rhan o gynnwys y tost rydych chi'n ei ddiweddaru, neu os ydych chi'n arddangos yr un cynnwys tost yn nes ymlaen). Os yw'r wybodaeth sydd ei hangen yn bwysig ar gyfer y broses, ee ar gyfer rhestr o wallau ar ffurf, yna defnyddiwch y gydran rhybuddioyn lle tost.

Sylwch fod angen i'r rhanbarth byw fod yn bresennol yn y marcio cyn i'r tost gael ei gynhyrchu neu ei ddiweddaru. Os ydych chi'n cynhyrchu'r ddau yn ddeinamig ar yr un pryd ac yn eu chwistrellu i'r dudalen, yn gyffredinol ni fyddant yn cael eu cyhoeddi gan dechnolegau cynorthwyol.

Mae angen i chi hefyd addasu'r lefel rolea'r aria-livelefel yn dibynnu ar y cynnwys. Os yw'n neges bwysig fel gwall, defnyddiwch role="alert" aria-live="assertive", fel arall defnyddiwch role="status" aria-live="polite"briodoleddau.

Wrth i'r cynnwys rydych chi'n ei arddangos newid, gwnewch yn siŵr eich bod chi'n diweddaru'r delayterfyn amser fel bod gan ddefnyddwyr ddigon o amser i ddarllen y llwncdestun.

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

Wrth ddefnyddio autohide: false, rhaid i chi ychwanegu botwm cau i ganiatáu i ddefnyddwyr ddiystyru'r tost.

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>

Er ei bod yn dechnegol yn bosibl ychwanegu rheolyddion ffocws/gweithredu (fel botymau neu ddolenni ychwanegol) yn eich tost, dylech osgoi gwneud hyn ar gyfer cuddio tost yn awtomatig. Hyd yn oed os byddwch yn rhoi seibiant hir i'r delayllwncdestun , efallai y bydd defnyddwyr bysellfwrdd a thechnoleg gynorthwyol yn ei chael hi'n anodd cyrraedd y llwncdestun mewn pryd i weithredu (gan nad yw llwncdestun yn cael ffocws pan gânt eu harddangos). Os oes rhaid i chi gael rheolyddion pellach, rydym yn argymell defnyddio tost gyda autohide: false.

CSS

Newidynnau

Ychwanegwyd yn v5.2.0

Fel rhan o ddull newidynnau CSS esblygol Bootstrap, mae tostiaid bellach yn defnyddio newidynnau CSS lleol ymlaen ar .toastgyfer addasu amser real gwell. Mae gwerthoedd ar gyfer y newidynnau CSS yn cael eu gosod trwy Sass, felly mae addasu Sass yn dal i gael ei gefnogi hefyd.

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

Newidynnau 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);

Defnydd

Cychwyn llwncdestun trwy JavaScript:

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

Sbardunau

Gellir cyflawni diswyddiad gyda'r datapriodoledd ar fotwm o fewn y tost fel y dangosir isod:

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

neu ar fotwm y tu allan i'r tost gan ddefnyddio'r hyn a data-bs-targetddangosir isod:

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

Opsiynau

Gan y gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript, gallwch atodi enw opsiwn i data-bs-, fel yn data-bs-animation="{value}". Gwnewch yn siŵr eich bod yn newid math achos yr enw opsiwn o “ camelCase ” i “ kebab-case ” wrth basio'r opsiynau trwy briodoleddau data. Er enghraifft, defnyddiwch data-bs-custom-class="beautifier"yn lle data-bs-customClass="beautifier".

O Bootstrap 5.2.0, mae'r holl gydrannau'n cefnogi priodoledd data neilltuedig arbrofoldata-bs-config a all gynnwys cyfluniad cydran syml fel llinyn JSON. Pan fydd gan elfen data-bs-config='{"delay":0, "title":123}'a data-bs-title="456"phriodoleddau, y gwerth terfynol titlefydd 456a bydd y priodoleddau data ar wahân yn diystyru'r gwerthoedd a roddir ar data-bs-config. Yn ogystal, mae priodoleddau data presennol yn gallu cynnwys gwerthoedd JSON fel data-bs-delay='{"show":0,"hide":150}'.

Enw Math Diofyn Disgrifiad
animation boolaidd true Cymhwyso trawsnewidiad pylu CSS i'r tost.
autohide boolaidd true Cuddiwch y tost yn awtomatig ar ôl yr oedi.
delay rhif 5000 Oedi mewn milieiliadau cyn cuddio'r tost.

Dulliau

Dulliau a thrawsnewidiadau anghydamserol

Mae pob dull API yn asyncronaidd ac yn dechrau cyfnod pontio . Maen nhw'n dychwelyd at y galwr cyn gynted ag y bydd y cyfnod pontio wedi dechrau ond cyn iddo ddod i ben . Yn ogystal, bydd galwad dull ar gydran trawsnewid yn cael ei anwybyddu .

Gweler ein dogfennaeth JavaScript am ragor o wybodaeth .

Dull Disgrifiad
dispose Yn cuddio tost elfen. Bydd eich tost yn aros ar y DOM ond ni fydd yn dangos mwyach.
getInstance Dull statig sy'n eich galluogi i gael yr enghraifft dost sy'n gysylltiedig ag elfen DOM.
Er enghraifft: Yn const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)dychwelyd enghraifft tost Bootstrap.
getOrCreateInstance Dull statig sy'n eich galluogi i gael yr enghraifft dost yn gysylltiedig ag elfen DOM, neu greu un newydd, rhag ofn na chafodd ei gychwyn.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Yn dychwelyd enghraifft tost Bootstrap.
hide Yn cuddio tost elfen. Yn dychwelyd at y galwr cyn i'r tost gael ei guddio (hy cyn i'r hidden.bs.toastdigwyddiad ddigwydd). Mae'n rhaid i chi ffonio'r dull hwn â llaw os gwnaethoch wneud autohidehynny false.
isShown Yn dychwelyd boolean yn ôl cyflwr gwelededd tost.
show Yn datgelu llwncdestun elfen. Yn dychwelyd at y galwr cyn i'r tost gael ei ddangos (hy cyn i'r shown.bs.toastdigwyddiad ddigwydd). Mae'n rhaid i chi alw'r dull hwn â llaw, yn lle hynny ni fydd eich tost yn dangos.

Digwyddiadau

Digwyddiad Disgrifiad
hide.bs.toast Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hidedull enghraifft wedi'i alw.
hidden.bs.toast Mae'r digwyddiad hwn yn cael ei danio pan fydd y tost wedi gorffen cael ei guddio rhag y defnyddiwr.
show.bs.toast Mae'r digwyddiad hwn yn tanio ar unwaith pan showelwir y dull enghraifft.
shown.bs.toast Mae'r digwyddiad hwn yn cael ei danio pan fydd y tost wedi'i wneud yn weladwy i'r defnyddiwr. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})