मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
Check
in English

ऑफकॅनव्हास

कांय वर्ग आनी आमच्या JavaScript प्लगइनान नेव्हिगेशन, खरेदी गाडयो, आनी हेर खातीर तुमच्या प्रकल्पांत लिपल्ले सायडबार तयार करात.

ह्या पानाचेर

कशें काम करता

ऑफकॅनव्हास हो एक सायडबार घटक आसा जो व्यूपोर्टाच्या डाव्या, उजव्या, वयल्या वा सकयल्या धारांतल्यान दिसपाक जावास्क्रिप्ट वरवीं टॉगल करूं येता. बटणां वा एंकर ट्रिगर म्हणून वापरतात जे तुमी टॉगल करतात त्या विशिश्ट घटकांक जोडिल्ले आसतात, आनी dataगुणधर्म आमची जावास्क्रिप्ट आवाहन करपाक वापरतात.

  • ऑफकॅनव्हास मोडलां प्रमाणें कांय जावास्क्रिप्ट कोड वांटता. संकल्पनेचे नदरेन ते सामकेच सारके आसात, पूण ते वेगवेगळे प्लगइन आसात.
  • तेच प्रमाण, offcanvas च्या शैलींखातीर आनी परिमाणांखातीर कांय स्रोत Sass चड-उणें मोडलाच्या चड-उणें कडल्यान वारसा मेळटात.
  • दाखयल्ल्या वेळार, ऑफकॅनव्हासांत मुलभूत फाटभूंय आसपावीत केल्या जी ऑफकॅनव्हास लिपोवपाक क्लिक करूंक मेळटा.
  • मोडलांभशेन एका वेळार फकत एक ऑफकॅनव्हास दाखोवंक मेळटा.

तकली वयर काडटा! CSS एनिमेशन कशें हाताळटा तें पळयल्यार, तुमी घटक वापरूंक marginवा translateताचेर वापरूंक शकना . .offcanvasताचे बदला, वर्ग स्वतंत्र आवरण घटक म्हणून वापरात.

ह्या घटकाचो एनिमेशन परिणाम prefers-reduced-motionमाध्यम क्वेरीचेर आदारून आसता. आमच्या सुलभताय दस्तावेजीकरणाचो उणो केल्ली गती विभाग पळयात .

उदाहरणां

ऑफकॅनव्हास घटक

सकयल एक ऑफकॅनव्हास उदाहरण आसा जें पूर्वनिर्धारीतपणान दाखयलां (via .showon .offcanvas). ऑफकॅनव्हासांत बंद बटण आशिल्ल्या हेडराक आदार आनी कांय सुरवाती खातीर पर्यायी बॉडी क्लास आसपावीत आसा padding. आमी सुचयतात की तुमी शक्य आसल्यार डिसमिस कृती सयत ऑफकॅनव्हास शीर्षकांचो आस्पाव करचो, वा स्पश्ट डिसमिस कृती दिवची.

ऑफकॅनव्हास
ऑफकॅनव्हास खातीर आशय हांगा वता. तुमी हांगा फकत खंयचोय Bootstrap घटक वा सानुकूल घटक दवरूं येता.
एचटीएमएल हें नांव 
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

लायव्ह डेमो

जावास्क्रिप्ट वरवीं ऑफकॅनव्हास घटक दाखोवपाक आनी लिपोवपाक सकयल दिल्ल्या बटणांचो वापर करचो जो .showवर्गा वांगडा घटकाचेर वर्ग टॉगल करता .offcanvas.

  • .offcanvasसामुग्री लिपयता (मुळावें) .
  • .offcanvas.showआशय दाखयता

तुमी गुणधर्म आशिल्ली दुवो वापरूं येता href, वा गुणधर्म आशिल्लें बटण वापरूं येता data-bs-target. दोनूय प्रकरणांत, द data-bs-toggle="offcanvas"हें गरजेचें आसा.

href कडेन लिंक
ऑफकॅनव्हास
कांय मजकूर प्लेसहोल्डर म्हणून. वास्तव जिणेंत तुमी वेंचून काडिल्ले घटक तुमकां आसूं येतात. जशें, मजकूर, प्रतिमा, यादी इ.
एचटीएमएल हें नांव 
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

शरीर स्क्रोल करप

<body>जेन्ना ऑफकॅनव्हास आनी ताची फाटभूंय दिसता तेन्ना घटक स्क्रोल करप अक्षम जाता. स्क्रोलिंग data-bs-scrollसक्षम करपाक गुणधर्म वापरात .<body>

बॉडी स्क्रोलिंग आशिल्लें ऑफकॅनव्हास

हो पर्याय कृतींत पळोवपाक उरिल्लें पान स्क्रोल करपाचो यत्न करात.

एचटीएमएल हें नांव 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

बॉडी स्क्रोलिंग आनी बॅकग्राउंड

<body>तुमी दिसपी फाटभूंयेर स्क्रोलिंगय सक्षम करूंक शकतात .

स्क्रोलिंग आशिल्ली पार्श्वभूंय

हो पर्याय कृतींत पळोवपाक उरिल्लें पान स्क्रोल करपाचो यत्न करात.

एचटीएमएल हें नांव 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

स्थिर पार्श्वभूंय

जेन्ना पार्श्वभूंय स्थिर सेट केल्ली आसता, तेन्ना ताचे भायर क्लिक करतना ऑफकॅनव्हास बंद जावचो ना.

ऑफकॅनव्हास
तुमी म्हजे भायर क्लिक केल्यार हांव बंद करचो ना.
एचटीएमएल हें नांव 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

काळो ऑफकॅनव्हास

v5.2.0 त जोडलां

काळो नवबार सारकिल्या वेगवेगळ्या संदर्भांक चड बरो जुळोवपाक उपयुक्तताय आशिल्ल्या ऑफकॅनव्हासांचें रूप बदलचें. हांगा आमी काळो ऑफकॅनव्हास वांगडा योग्य स्टायलिंग खातीर आनी to जोडटात .text-bg-dark. तुमकां भितर ड्रॉपडावन आसल्यार, हातूंत जोडपाचोय विचार करचो ..offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

ऑफकॅनव्हास

हांगा ऑफकॅनव्हास सामुग्री दवरात.

एचटीएमएल हें नांव 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

प्रतिसाद दिवपी

v5.2.0 त जोडलां

प्रतिसाद दिवपी ऑफकॅनव्हास वर्ग निर्दिश्ट ब्रेकपॉइंटांतल्यान आनी सकयल दृश्यपोर्टा भायर सामुग्री लिपयतात. त्या ब्रेकपॉइंट वयर, भितरली आशय सदचे भशेन वागतली. देखीक, ब्रेकपॉइंट .offcanvas-lgसकयल ऑफकॅनव्हासांत सामुग्री लिपयता lg, पूण lgब्रेकपॉइंट वयर आशिल्ली सामग्री दाखयता.

प्रतिसाद दिवपी ऑफकॅनव्हास टॉगल दाखोवपाक तुमचो ब्राउझर आकार बदलचो.
प्रतिसाद दिवपी ऑफकॅनवास

हें एक भितर आशय आसा .offcanvas-lg.

एचटीएमएल हें नांव 
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

दरेक ब्रेकपॉइंट खातीर प्रतिसाद दिवपी ऑफकॅनव्हास वर्ग पार उपलब्ध आसात.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

प्लेसमेंट करप

ऑफकॅनव्हास घटकांखातीर मुलभूत प्लेसमेंट ना, देखून तुमी सकयल दिल्ल्या संशोधक वर्गांतलो एक जोडपाक जाय.

  • .offcanvas-startदृश्यपोर्टाचे उजवे वटेन ऑफकॅनव्हास दवरता (वयर दाखयलां)
  • .offcanvas-endदृश्यपोर्टाचे उजवे वटेन ऑफकॅनव्हास दवरता
  • .offcanvas-topव्यूपोर्टाच्या वयल्या भागाचेर ऑफकॅनव्हास दवरता
  • .offcanvas-bottomदृश्यपोर्टाच्या तळाक ऑफकॅनव्हास दवरता

सकयल दिल्ले वयले, उजवे, आनी सकयल दिल्ले उदाहरण पळयात.

ऑफकॅनवास टॉप
...
एचटीएमएल हें नांव 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
ऑफकॅनव्हास उजवें
...
एचटीएमएल हें नांव 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
ऑफकॅनव्हास तळें
...
एचटीएमएल हें नांव 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

सुलभताय

ऑफकॅनव्हास पॅनल संकल्पनेन मोडल संवाद आशिल्ल्यान, जोडपाची खात्री करात aria-labelledby="..."—ऑफकॅनव्हास शीर्षकाचो संदर्भ दिवन—त .offcanvas. role="dialog"लक्षांत दवरात की आमी पयलींच जावास्क्रिप्ट वरवीं जोडटात म्हणून तुमकां जोडपाची गरज ना .

सीएसएस हें नांव

चड-उणें

v5.2.0 त जोडलां

Bootstrap च्या विकसीत जावपी CSS चड-उणें पद्दतीचो एक भाग म्हूण, offcanvas आतां .offcanvasवाडयल्ल्या रियल-टायम पसंतीखातीर थळाव्या CSS चड-उणें चालू वापरता. CSS चयापचयांखातीर मोलां Sass वरवीं सेट केल्लीं आसात, देखून Sass पसंतीचें अजूनय समर्थीत आसा, तेंय.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

सॅस चड-उणें

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

वापर

ऑफकॅनव्हास प्लगइन जड उखलप हाताळपाक कांय वर्ग आनी गुणधर्म वापरता:

  • .offcanvasसामुग्री लिपयता
  • .offcanvas.showआशय दाखयता
  • .offcanvas-startडावी वटेन ऑफकॅनव्हास लिपयता
  • .offcanvas-endउजवे वटेन ऑफकॅनव्हास लिपयता
  • .offcanvas-topवयल्यान ऑफकॅनव्हास लिपयता
  • .offcanvas-bottomतळाक ऑफकॅनव्हास लिपयता

गुणधर्मासयत डिसमिस बटण जोडात data-bs-dismiss="offcanvas", जें जावास्क्रिप्ट कार्यक्षमताय सुरू करता. <button>सगळ्या साधनां वयल्यान योग्य वागणूकाखातीर ताचे वांगडा घटक वापरपाची खात्री करात .

डेटा गुणधर्मां वरवीं

टॉगल करचें

एक ऑफकॅनव्हास घटकाचें नियंत्रण आपोआप नेमपाक घटकाक जोडचें data-bs-toggle="offcanvas"आनी एक data-bs-targetवा . hrefगुणधर्म ऑफकॅनव्हास data-bs-targetलागू करपाक CSS निवडक स्वीकारता. offcanvasऑफकॅनव्हास घटकांत वर्ग जोडपाची खात्री करात . तुमकां तो पूर्वनिर्धारीत उगडपाक जाय जाल्यार, अतिरिक्त वर्ग जोडात show.

बडतर्फ

ऑफकॅनव्हासांतल्याdata बटणाचेर आशिल्ल्या गुणधर्मान सकयल दाखयल्ले प्रमाणें डिसमिस करूं येता :

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

वा सकयल दाखयल्ले प्रमाणें वापरून ऑफकॅनव्हास भायल्याdata-bs-target बटणाचेर :

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
ऑफकॅनव्हास काडून उडोवपाचे दोनूय मार्ग समर्थीत आसतना, ऑफकॅनव्हास भायल्यान काडून उडोवप ARIA लेखन पद्दती मार्गदर्शक संवाद (मोडल) नमुन्याकडेन जुळना हें लक्षांत दवरात . हें तुमच्या स्वताच्या जोखमीचेर करात.

जावास्क्रिप्ट वरवीं

हाताळणी करून सक्षम करात:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात म्हणून, तुमी पर्याय नांव जोडूंक शकतात 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}'.

नांव प्रकार डिफॉल्ट वर्णन
backdrop बूलियन वा स्ट्रिंगstatic true ऑफकॅनव्हास उक्तो आसतना कुडीचेर पार्श्वभूंय लावची. पर्यायीपणान, staticक्लिक करतना ऑफकॅनव्हास बंद करिना अशी फाटभूंय निर्देशीत करात.
keyboard बूलियन हें नांव true एस्केप की दामल्यार ऑफकॅनव्हास बंद करता.
scroll बूलियन हें नांव false ऑफकॅनव्हास उक्तो आसतना बॉडी स्क्रोल करपाक परवानगी दिवची.

पद्दती

अतुल्यकालिक पद्दती आनी संक्रमण

सगळ्यो एपीआय पद्दती अतुल्यकालिक आसतात आनी संक्रमण सुरू करतात . संक्रमण सुरू जातकच पूण सोंपचे पयलीं ते फोन करप्या कडेन परततात . ते भायर, संक्रमण घटकाचेर एक पद्दत कॉल दुर्लक्षीत जातलें .

चड म्हायती खातीर आमचें जावास्क्रिप्ट दस्तावेज पळयात .

तुमची सामग्री ऑफकॅनव्हास घटक म्हणून सक्रिय करता. एक पर्यायी पर्याय स्वीकारता object.

तुमी कंस्ट्रक्टरा वांगडा ऑफकॅनव्हास दृष्टांत तयार करूंक शकतात, देखीक:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
पद्दत वर्णन
getInstance स्थिर पद्दत जी तुमकां DOM घटकाकडेन संबंदीत आशिल्ली ऑफकॅनव्हास दृष्टांत मेळोवपाक परवानगी दिता.
getOrCreateInstance स्थिर पद्दत जी तुमकां DOM घटकाकडेन संबंदीत आशिल्ली ऑफकॅनव्हास दृष्टांत मेळोवपाक परवानगी दिता, वा ती आरंभ करूंक नाशिल्ल्या प्रकरणांत नवी तयार करपाक परवानगी दिता.
hide एक ऑफकॅनव्हास घटक लिपयता. ऑफकॅनव्हास घटक प्रत्यक्षांत लिपचे पयलीं (म्हळ्यार hidden.bs.offcanvasघडणूक घडचे पयलीं) कॉलराक परतता.
show एक ऑफकॅनव्हास घटक दाखयता. ऑफकॅनव्हास घटक प्रत्यक्षांत दाखोवचे पयलीं (म्हळ्यार shown.bs.offcanvasघडणूक घडचे पयलीं) कॉलराक परतता.
toggle ऑफकॅनव्हास घटक दाखोवपाक वा लिपोवपाक टॉगल करता. ऑफकॅनव्हास घटक प्रत्यक्षांत दाखोवचे पयलीं वा लिपोवचे पयलीं (म्हळ्यार shown.bs.offcanvasवा hidden.bs.offcanvasघडणूक घडचे पयलीं) कॉलराक परतता.

घडणुको

बूटस्ट्रॅपाचो ऑफकॅनव्हास वर्ग ऑफकॅनव्हास कार्यक्षमतायांत हुक करपा खातीर कांय घडणुको उक्ती करता.

इव्हेंट प्रकार वर्णन
hide.bs.offcanvas hideपद्दत आपयल्या उपरांत ही घडणूक रोखडीच फायर करतात .
hidden.bs.offcanvas वापरप्या कडल्यान ऑफकॅनव्हास घटक लिपला तेन्ना ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले).
hidePrevented.bs.offcanvas staticऑफकॅनव्हास दाखयतात, ताची फाटभूंय आसता आनी ऑफकॅनव्हास भायर क्लिक जाता तेन्ना ही इव्हेंट फायर जाता . तशेंच एस्केप की दामल्यार आनी keyboardपर्याय सेट केल्यार इव्हेंट फायर जाता false.
show.bs.offcanvas showदृष्टांत पद्दत कॉल करतना ही घडणूक रोखडीच फायर जाता .
shown.bs.offcanvas वापरप्याक ऑफकॅनव्हास घटक दिसपाक लायल्यार ही घडणूक फायर जाता (CSS संक्रमण पुराय जावपाची वाट पळयतले). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})