ऑफकैनवास दा

किश वर्गें ते साढ़े जावास्क्रिप्ट प्लगइन कन्नै नेविगेशन, खरीदारी गाड़ी, ते होर मते आस्तै अपने प्रोजेक्ट च छिपे दे साइडबार बनाओ.

इस पेज पर

किवें कम्म करदा है

ऑफकैनवास इक साइडबार घटक ऐ जेह् ड़ा जावास्क्रिप्ट दे राहें टॉगल कीता जाई सकदा ऐ तां जे व्यूपोर्ट दे बाएं, दाएं, उप्पर, जां निचले किनारे थमां दिक्खेआ जाई सकै. बटन जां एंकर दा इस्तेमाल ट्रिगर दे रूप च कीता जंदा ऐ जेह् ड़ा तुस टॉगल करने आह् ले विशिष्ट तत्वें कन्नै जुड़े दे न, ते dataविशेषताएं दा इस्तेमाल साढ़ी जावास्क्रिप्ट गी आह् नने आस्तै कीता जंदा ऐ.

ऑफकैनवास मोडल दे रूप च किश उस्सै जावास्क्रिप्ट कोड गी साझा करदा ऐ। अवधारणा दे तौर पर, एह् काफी समान न, पर एह् बक्ख-बक्ख प्लगइन न।
इसी तरह, ऑफकैनवास दी शैलियें ते आयामें लेई किश स्रोत Sass चर मोडल दे चर थमां विरासत च हासल कीते जंदे न।
दस्सेआ जाने पर, ऑफकैनवास च इक डिफाल्ट बैकग्राउंड शामल ऐ जेह् ड़ा ऑफकैनवास गी छिपाने आस्तै क्लिक कीता जाई सकदा ऐ।
मोडल दे समान, इक बारी च इक गै ऑफकैनवास गी दस्सेआ जाई सकदा ऐ।

सिर ऊपर ! एह् दिक्खदे होई जे CSS एनीमेशनें गी किस चाल्ली संभालदा ऐ, तुस कुसै तत्व दा इस्तेमाल नेईं करी सकदे marginजां उस translateपर नेईं करी सकदे ओ. .offcanvasइसदे बजाय, वर्ग गी इक स्वतंत्र लपेटने आह् ले तत्व दे रूप च इस्तेमाल करो।

इस घटक दा एनीमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरी पर निर्भर करदा ऐ। साढ़े सुलभता दस्तावेजें दा घट्ट कीती गेदी गति खंड दिक्खो .

उदाहरण दे

ऑफकैनवास घटक

.showहेठ इक ऑफकैनवास उदाहरण ऐ जेह् ड़ा डिफ़ॉल्ट रूप कन्नै ( चालू दे राहें .offcanvas) दस्सेआ गेदा ऐ । ऑफकैनवास च इक बंद बटन कन्नै इक हेडर आस्तै समर्थन ते किश शुरूआती आस्तै इक वैकल्पिक शरीर वर्ग शामल ऐ padding. अस सुझाऽ दिन्दे आं जे तुस जदूं बी होई सकै खारिज कार्रवाईयें कन्नै ऑफकैनवास हेडरें गी शामल करो, जां इक स्पश्ट खारिज कार्रवाई प्रदान करो.

ऑफकैनवास लेई सामग्री इत्थें गै जंदी ऐ। तुस इत्थें सिर्फ लगभग कुसै बी बूटस्ट्रैप घटक जां कस्टम तत्वें गी रक्खी सकदे ओ.

एचटीएमएल ऐ

<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 च जोड़ेआ गेआ

यूटिलिटीएं कन्नै ऑफकैनवासें दी रूप गी बदलो तां जे उनेंगी बक्ख-बक्ख संदर्भें कन्नै बेहतर तरीके कन्नै मिलान कीता जाई सकै जि’यां काला नवबार। इत्थें अस इक गहरे रंग दे ऑफकैनवास कन्नै उचित स्टाइलिंग आस्तै ते गी जोड़ने .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 च जोड़ेआ गेआ

बूटस्ट्रैप दे विकसित CSS चर दृष्टिकोण दे हिस्से दे रूप च, ऑफकैनवास हून .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जां । एट्रिब्यूट ऑफकैनवास गी लागू करने आस्तै इक CSS चयनकर्ता गी स्वीकार करदा ऐ href. ऑफकैनवास तत्व data-bs-targetच क्लास गी ज़रूर जोड़ो । 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>

जदके इक ऑफकैनवास गी खारिज करने दे दौनें तरीकें दा समर्थन कीता जंदा ऐ, तां ध्यान रक्खो जे इक ऑफकैनवास दे बाहर थमां खारिज करना एआरआईए लेखन प्रथाएं गाइड संवाद (मोडल) पैटर्न कन्नै मेल नेईं खंदा ऐ . अपने जोखिम उप्पर एह् कम्म करो।

जावास्क्रिप्ट दे जरिए

कन्नै मैन्युअल रूप कन्नै सक्षम करो:

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

विकल्प ऐ

चूंकि विकल्पें गी डेटा विशेषताएं जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ, तुस इक विकल्प नांऽ गी data-bs-, च जोड़ सकदे ओ , जिऱयां data-bs-animation="{value}". डेटा विशेषताएं दे राहें विकल्पें गी पास करदे बेल्लै विकल्प नांऽ दे केस प्रकार गी “ camelCase ” थमां “ कबाब-केस ” च बदलना सुनिश्चत करो . मसलन, 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}'.

नां	किसम	डिफाल्ट	ब्यौरा
`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`	एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै इक ऑफकैनवास तत्व गी बरतूनी गी दिक्खने आह् ला बनाया गेआ ऐ (सीएसएस संक्रमणें गी पूरा होने दा इंतजार करग)।

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

ऑफकैनवास दा

किवें कम्म करदा है

उदाहरण दे

ऑफकैनवास घटक

ऑफकैनवास दा

लाइव डेमो

ऑफकैनवास दा

शरीर स्क्रॉल करना

शरीर स्क्रॉल करने कन्नै ऑफकैनवास

बॉडी स्क्रॉलिंग ते बैकग्राउंड

स्क्रॉलिंग कन्नै बैकग्राउंड

स्थिर पृष्ठभूमि

ऑफकैनवास दा

गहरे रंग दा ऑफकैनवास

ऑफकैनवास दा

जवाबदेही

जवाबदेह ऑफकैनवास

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

ऑफकैनवास टॉप

ऑफकैनवास सही

ऑफकैनवास नीचे

सुलभता दा

सीएसएस दा

चर करने वाले

सस्स चर

प्रयोग करना

डेटा विशेषताएं दे माध्यम कन्नै

टॉगल करो

रद्द

जावास्क्रिप्ट दे जरिए

विकल्प ऐ

विधियां

एसिंक्रोनस तरीके ते संक्रमण

घटनाएं