Kalo te përmbajtja kryesore Kalo te navigimi i dokumenteve
Check
in English

Dollitë

Shtypni njoftimet për vizitorët tuaj me një dolli, një mesazh alarmi të lehtë dhe lehtësisht të personalizueshëm.

Në këtë faqe

Dollitë janë njoftime të lehta të krijuara për të imituar njoftimet shtytëse që janë popullarizuar nga sistemet operative celulare dhe desktop. Ato janë ndërtuar me flexbox, kështu që ato janë të lehta për t'u lidhur dhe pozicionuar.

Vështrim i përgjithshëm

Gjërat që duhet të dini kur përdorni shtojcën e dolli:

  • Dollitë janë të zgjedhura për arsye të performancës, ndaj duhet t'i inicializoni vetë .
  • Dollitë do të fshihen automatikisht nëse nuk e specifikoni autohide: false.
Efekti i animacionit të këtij komponenti varet nga prefers-reduced-motionpyetja e medias. Shikoni seksionin e lëvizjes së reduktuar të dokumentacionit tonë të aksesueshmërisë .

Shembuj

bazë

Për të inkurajuar dolli të zgjatura dhe të parashikueshme, ne rekomandojmë një kokë dhe një trup. Përdorimi i titujve të dolli display: flex, duke lejuar përafrimin e lehtë të përmbajtjes falë shërbimeve tona të marzhit dhe flexbox.

Dollitë janë aq fleksibël sa ju nevojitet dhe kanë shumë pak markup të kërkuar. Së paku, ne kërkojmë që një element i vetëm të përmbajë përmbajtjen tuaj "të thekur" dhe të inkurajojmë fuqimisht një buton heqjeje.

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>
Më parë, skriptet tona e shtuan në mënyrë dinamike .hideklasën për të fshehur plotësisht një dolli (me display:none, dhe jo vetëm me opacity:0). Kjo tani nuk është më e nevojshme. Megjithatë, për pajtueshmërinë e pasme, skripti ynë do të vazhdojë të ndërrojë klasën (edhe pse nuk ka nevojë praktike për të) deri në versionin tjetër kryesor.

Shembull i gjallë

Klikoni butonin më poshtë për të shfaqur një dolli (të pozicionuar me shërbimet tona në këndin e poshtëm djathtas) që është fshehur si parazgjedhje.

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

Ne përdorim JavaScript-in e mëposhtëm për të aktivizuar demonstrimin tonë të dolli të drejtpërdrejtë:

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

    toast.show()
  })
}

E tejdukshme

Dollitë janë paksa të tejdukshme për t'u përzier me atë që është poshtë tyre.

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>

Stacking

Ju mund të grumbulloni bukë të thekur duke i mbështjellë në një enë buke, e cila do të shtojë vertikalisht pak hapësirë.

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>

Përmbajtje e personalizuar

Personalizojini dollitë tuaja duke hequr nën-komponentët, duke i modifikuar ato me shërbimet komunale ose duke shtuar shënimin tuaj. Këtu kemi krijuar një dolli më të thjeshtë duke hequr standardin .toast-header, duke shtuar një ikonë të personalizuar të fshehjes nga Bootstrap Icons dhe duke përdorur disa shërbime flexbox për të rregulluar paraqitjen.

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>

Përndryshe, ju gjithashtu mund të shtoni kontrolle dhe përbërës shtesë në dolli.

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>

Skemat e ngjyrave

Duke u bazuar në shembullin e mësipërm, ju mund të krijoni skema të ndryshme ngjyrash dolli me shërbimet tona të ngjyrave dhe sfondit . Këtu kemi shtuar .text-bg-primarynë .toast, dhe më pas kemi shtuar .btn-close-whitenë butonin tonë të mbylljes. Për një skaj të qartë, ne heqim kufirin e paracaktuar me .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>

Vendosja

Vendosni dolli me CSS të personalizuar sipas nevojës. Pjesa e sipërme djathtas përdoret shpesh për njoftime, siç është pjesa e sipërme e mesme. Nëse do të shfaqni vetëm një dolli në të njëjtën kohë, vendosni stilet e pozicionimit drejt në .toast.

Bootstrap 11 minuta më parë
Përshendetje Botë! Ky është një mesazh dolli.
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>

Për sistemet që gjenerojnë më shumë njoftime, merrni parasysh përdorimin e një elementi mbështjellës në mënyrë që të mund të grumbullohen lehtësisht.

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>

Ju gjithashtu mund të shijoni shërbimet e flexbox për të lidhur dollitë horizontalisht dhe/ose vertikalisht.

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>

Aksesueshmëria

Dollitë synohen të jenë ndërprerje të vogla për vizitorët ose përdoruesit tuaj, kështu që për të ndihmuar ata që kanë lexues ekrani dhe teknologji të ngjashme ndihmëse, duhet t'i mbështillni dollitë tuaja në një aria-liverajon . Ndryshimet në rajonet e drejtpërdrejta (të tilla si injektimi/përditësimi i një komponenti dolli) njoftohen automatikisht nga lexuesit e ekranit pa pasur nevojë të zhvendosin fokusin e përdoruesit ose të ndërpresin ndryshe përdoruesin. Për më tepër, përfshini aria-atomic="true"për t'u siguruar që i gjithë dolli të shpallet gjithmonë si një njësi e vetme (atomike), në vend që thjesht të njoftoni se çfarë është ndryshuar (që mund të çojë në probleme nëse përditësoni vetëm një pjesë të përmbajtjes së dollisë ose nëse shfaqni të njëjtën përmbajtje të bukës në një moment të mëvonshëm në kohë). Nëse informacioni i nevojshëm është i rëndësishëm për procesin, p.sh. për një listë gabimesh në një formular, atëherë përdorni komponentin e alarmitnë vend të dolli.

Vini re se rajoni i drejtpërdrejtë duhet të jetë i pranishëm në shënim përpara se të gjenerohet ose përditësohet dolli. Nëse i gjeneroni në mënyrë dinamike të dyja në të njëjtën kohë dhe i injektoni ato në faqe, ato përgjithësisht nuk do të njoftohen nga teknologjitë ndihmëse.

Ju gjithashtu duhet të përshtatni nivelin roledhe aria-livenë varësi të përmbajtjes. Nëse është një mesazh i rëndësishëm si një gabim, përdorni role="alert" aria-live="assertive", përndryshe përdorni role="status" aria-live="polite"atributet.

Ndërsa përmbajtja që po shfaq ndryshon, sigurohu që të përditësosh afatin në delaymënyrë që përdoruesit të kenë kohë të mjaftueshme për të lexuar dolli.

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

Kur përdorni autohide: false, duhet të shtoni një buton mbylljeje për t'i lejuar përdoruesit të heqin dolli.

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>

Ndërsa teknikisht është e mundur të shtoni kontrolle të fokusueshme/vepruese (të tilla si butona ose lidhje shtesë) në dollinë tuaj, duhet të shmangni ta bëni këtë për fshehjen automatike të dollive. Edhe nëse i jepni dolli një kohë të gjatë delay, përdoruesit e tastierës dhe teknologjisë ndihmëse mund ta kenë të vështirë ta arrijnë në kohë dollinë për të ndërmarrë veprime (pasi dollitë nuk marrin fokus kur shfaqen). Nëse duhet patjetër të keni kontrolle të mëtejshme, ju rekomandojmë të përdorni një dolli me autohide: false.

CSS

Variablat

Shtuar në v5.2.0

Si pjesë e qasjes në zhvillim të variablave CSS të Bootstrap, dollitë tani përdorin variabla lokale CSS .toastpër personalizim të përmirësuar në kohë reale. Vlerat për variablat CSS vendosen nëpërmjet Sass, kështu që personalizimi i Sass mbështetet gjithashtu.

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

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

Përdorimi

Inicializoni dollitë përmes JavaScript:

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

Shkaqet

Largimi mund të arrihet me dataatributin në një buton brenda dolli siç tregohet më poshtë:

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

ose në një buton jashtë dolli duke përdorur data-bs-targetsiç tregohet më poshtë:

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

Opsione

Meqenëse opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript, ju mund të shtoni një emër opsioni në data-bs-, si në data-bs-animation="{value}". Sigurohuni që të ndryshoni llojin e rastit të emrit të opsionit nga “ CamelCase ” në “ kebab-case ” kur kaloni opsionet përmes atributeve të të dhënave. Për shembull, përdorni data-bs-custom-class="beautifier"në vend të data-bs-customClass="beautifier".

Që nga Bootstrap 5.2.0, të gjithë komponentët mbështesin një atribut eksperimental të të dhënave të rezervuara data-bs-configqë mund të vendosë konfigurimin e thjeshtë të komponentit si një varg JSON. Kur një element ka data-bs-config='{"delay":0, "title":123}'dhe data-bs-title="456"atribute, titlevlera përfundimtare do të jetë 456dhe atributet e veçanta të të dhënave do të zëvendësojnë vlerat e dhëna në data-bs-config. Përveç kësaj, atributet ekzistuese të të dhënave janë në gjendje të strehojnë vlera JSON si data-bs-delay='{"show":0,"hide":150}'.

Emri Lloji E paracaktuar Përshkrim
animation logjike true Aplikoni një tranzicion të zbehjes së CSS në dolli.
autohide logjike true Fshih automatikisht dolli pas vonesës.
delay numri 5000 Vonesa në milisekonda përpara se të fshehësh dolli.

Metodat

Metodat dhe tranzicionet asinkrone

Të gjitha metodat API janë asinkrone dhe fillojnë një tranzicion . Ata kthehen te thirrësi sapo të fillojë tranzicioni, por para se të përfundojë . Përveç kësaj, një thirrje metodë në një komponent në tranzicion do të injorohet .

Shikoni dokumentacionin tonë JavaScript për më shumë informacion .

Metoda Përshkrim
dispose Fsheh dollinë e një elementi. Dolli juaj do të mbetet në DOM, por nuk do të shfaqet më.
getInstance Metoda statike e cila ju lejon të merrni shembullin e dolli të lidhur me një element DOM.
Për shembull: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Kthen një shembull dolli të Bootstrap.
getOrCreateInstance Metoda statike e cila ju lejon të merrni shembullin e dolli të lidhur me një element DOM, ose të krijoni një të ri, në rast se nuk ishte inicializuar.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Kthen një shembull dolli të Bootstrap.
hide Fsheh dollinë e një elementi. Kthehet te thirrësi përpara se dollia të jetë fshehur në të vërtetë (dmth. përpara se të hidden.bs.toastndodhë ngjarja). Ju duhet ta telefononi manualisht këtë metodë nëse keni bërë autohidenë false.
isShown Kthen një boolean sipas gjendjes së dukshmërisë së dolli.
show Zbulon dollinë e një elementi. Kthehet te thirrësi përpara se dollia të shfaqet në të vërtetë (dmth. përpara se shown.bs.toastngjarja të ndodhë). Duhet ta telefononi manualisht këtë metodë, në vend të kësaj dolli juaj nuk do të shfaqet.

Ngjarjet

Ngjarje Përshkrim
hide.bs.toast Kjo ngjarje aktivizohet menjëherë kur hidethirret metoda e shembullit.
hidden.bs.toast Kjo ngjarje aktivizohet kur dollia ka përfunduar së fshehuri nga përdoruesi.
show.bs.toast Kjo ngjarje ndizet menjëherë kur showthirret metoda e shembullit.
shown.bs.toast Kjo ngjarje shfaqet kur dollia është bërë e dukshme për përdoruesin. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})