મુખ્ય સામગ્રી પર જાઓ ડૉક્સ નેવિગેશન પર જાઓ
Check
in English

ટોસ્ટ્સ

તમારા મુલાકાતીઓને ટોસ્ટ, હળવા અને સરળતાથી કસ્ટમાઇઝ કરી શકાય તેવા ચેતવણી સંદેશ સાથે સૂચનાઓ મોકલો.

આ પૃષ્ઠ પર

ટોસ્ટ એ હળવા વજનની સૂચનાઓ છે જે પુશ સૂચનાઓની નકલ કરવા માટે રચાયેલ છે જે મોબાઇલ અને ડેસ્કટોપ ઓપરેટિંગ સિસ્ટમ દ્વારા લોકપ્રિય કરવામાં આવી છે. તેઓ ફ્લેક્સબોક્સ સાથે બનેલ છે, જેથી તેઓ સંરેખિત અને સ્થિત કરવામાં સરળ હોય.

ઝાંખી

ટોસ્ટ પ્લગઇનનો ઉપયોગ કરતી વખતે જાણવા જેવી બાબતો:

  • ટોસ્ટ્સ કાર્યક્ષમતાના કારણોસર પસંદ કરવામાં આવે છે, તેથી તમારે તેને જાતે જ પ્રારંભ કરવું આવશ્યક છે .
  • જો તમે ઉલ્લેખિત ન કરો તો ટોસ્ટ્સ આપમેળે છુપાવશે autohide: false.
આ ઘટકની એનિમેશન અસર prefers-reduced-motionમીડિયા ક્વેરી પર આધારિત છે. અમારા ઍક્સેસિબિલિટી દસ્તાવેજીકરણનો ઘટાડો ગતિ વિભાગ જુઓ .

ઉદાહરણો

પાયાની

એક્સ્ટેન્સિબલ અને અનુમાનિત ટોસ્ટ્સને પ્રોત્સાહિત કરવા માટે, અમે હેડર અને બોડીની ભલામણ કરીએ છીએ. display: flexઅમારા માર્જિન અને ફ્લેક્સબોક્સ ઉપયોગિતાઓને આભારી સામગ્રીના સરળ સંરેખણની મંજૂરી આપતા, ટોસ્ટ હેડરોનો ઉપયોગ કરે છે.

ટોસ્ટ્સ તમને જરૂર હોય તેટલા લવચીક હોય છે અને તેમાં બહુ ઓછા જરૂરી માર્કઅપ હોય છે. ન્યૂનતમ, અમને તમારી "ટોસ્ટેડ" સામગ્રી શામેલ કરવા માટે અને બરતરફ બટનને મજબૂત રીતે પ્રોત્સાહિત કરવા માટે એક ઘટકની જરૂર છે.

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 આઇકોન્સમાંથી કસ્ટમ હાઇડ આઇકોન ઉમેરીને અને લેઆઉટને સમાયોજિત કરવા માટે કેટલીક ફ્લેક્સબોક્સ ઉપયોગિતાઓનો ઉપયોગ કરીને સરળ ટોસ્ટ બનાવ્યું છે.

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>

તમે ટોસ્ટને આડા અને/અથવા ઊભી રીતે ગોઠવવા માટે ફ્લેક્સબોક્સ ઉપયોગિતાઓ સાથે પણ ફેન્સી મેળવી શકો છો.

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 માં ઉમેરાયેલ

બુટસ્ટ્રેપના વિકસતા CSS ચલોના અભિગમના ભાગ રૂપે, ટોસ્ટ્સ હવે .toastઉન્નત રીઅલ-ટાઇમ કસ્ટમાઇઝેશન માટે સ્થાનિક CSS ચલોનો ઉપયોગ કરે છે. 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);

ઉપયોગ

જાવાસ્ક્રિપ્ટ દ્વારા ટો���્ટ શરૂ કરો:

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>

વિકલ્પો

data-bs-ડેટા એટ્રિબ્યુટ્સ અથવા JavaScript દ્વારા વિકલ્પો પસાર કરી શકાય છે, તમે ની જેમ, માં વિકલ્પ નામ ઉમેરી શકો છો data-bs-animation="{value}". વિકલ્પ નામના કેસ પ્રકારને "માંથી બદલવાની ખાતરી કરો.ડેટા એટ્રિબ્યુટ્સ દ્વારા વિકલ્પો પસાર કરતી વખતે camelCase ” થી “ kebab-case ” માં બદલવાની ખાતરી કરો. ઉદાહરણ તરીકે, data-bs-custom-class="beautifier"ની જગ્યાએ ઉપયોગ કરો data-bs-customClass="beautifier".

બુટસ્ટ્રેપ 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)બુટસ્ટ્રેપ ટોસ્ટ દાખલો પરત કરે છે.
getOrCreateInstance સ્ટેટિક પદ્ધતિ કે જે તમને DOM એલિમેન્ટ સાથે સંકળાયેલ ટોસ્ટ ઇન્સ્ટન્સ મેળવવાની પરવાનગી આપે છે, અથવા જો તે આરંભ ન થયું હોય તો એક નવું બનાવો.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)બુટસ્ટ્રેપ ટોસ્ટ દાખલો પરત કરે છે.
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...
})