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.

Helo Byd! Neges dost yw hon.

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

Byw

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

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

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" 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>

Tryleu

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

Helo Byd! Neges dost yw hon.

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

Gweler? Yn union fel hyn.

Ar y blaen, bydd tostiaid yn pentyrru'n awtomatig

<div class="toast-container">
  <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.

Helo Byd! Neges dost yw hon.

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

Helo Byd! Neges dost yw hon.

<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 .bg-primaryac .text-whiteat 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.

Helo Byd! Neges dost yw hon.

<div class="toast align-items-center text-white 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.

Helo Byd! Neges dost yw hon.

<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 position-absolute 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.

Gweler? Yn union fel hyn.

Ar y blaen, bydd tostiaid yn pentyrru'n awtomatig

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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.

Helo Byd! Neges dost yw hon.

<!-- 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 tost.

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

Helo Byd! Neges dost yw hon.

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

Sass

Newidynnau

$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:                1px;
$toast-border-color:                rgba(0, 0, 0, .1);
$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(0, 0, 0, .05);

Defnydd

Cychwyn llwncdestun trwy JavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-bs-, fel yn data-bs-animation="".

Enw	Math	Diofyn	Disgrifiad
`animation`	boolaidd	`true`	Cymhwyso trawsnewidiad pylu CSS i'r tost
`autohide`	boolaidd	`true`	Cuddiwch y tost yn awtomatig
`delay`	rhif	`5000`	Oedi cuddio'r tost (ms)

Dulliau

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

show

Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show.

toast.show()

hide

Hides an element’s toast. Returns to the caller before the toast has actually been hidden (i.e. before the hidden.bs.toast event occurs). You have to manually call this method if you made autohide to false.

toast.hide()

dispose

Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore.

toast.dispose()

getInstance

Static method which allows you to get the scrollspy instance associated with a DOM element

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Static method which allows you to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn’t initialised

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Events

Event type	Description
`show.bs.toast`	This event fires immediately when the `show` instance method is called.
`shown.bs.toast`	This event is fired when the toast has been made visible to the user.
`hide.bs.toast`	Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y `hide`dull 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.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})