Bootstrap 5 ऑफकैन्वस

Offcanvas (फ़ोन्टनस)

Offcanvas (फ़ोन्टनस) मॉडल (डिफ़ॉल्ट में छुपा हुआ और सक्रिय होने पर दिखाया जाता है) की तरह है, लेकिन यह आमतौर पर शीर्षक नाविगेशन मेनू के रूप में इस्तेमाल किया जाता है。

Offcanvas साइडबार बनाना कैसा है

नीचे दिखाया गया है कि कैसे Offcanvas साइडबार बनाया जाता है:

उदाहरण

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">शीर्षक</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas">
  </div>
  <div class="offcanvas-body">
    <p>कुछ टैक्स्ट। कुछ टैक्स्ट। कुछ टैक्स्ट।</p>
    <p>कुछ टैक्स्ट। कुछ टैक्स्ट। कुछ टैक्स्ट।</p>
    <button class="btn btn-secondary" type="button">बटन</button>
  </div>
</div>
<!-- Button to open the offcanvas sidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Offcanvas साइडबैर खोलना
</button>

अपने आप से प्रयास करें

उदाहरण व्याख्या

.offcanvas क्लास ऑफकैनवस साइडबैर बनाती है。

.offcanvas-start क्लास ऑफकैनवस को स्थानांतरित करती है और इसकी चौड़ाई 400px करती है।अधिक स्थानांतरण क्लास के बारे में, नीचे के उदाहरण को देखें。

.offcanvas-title क्लास को सुनिश्चित करें कि उचित बाह्य-सीमा और लाइन-हाइट रहे।

तो, आपके सामग्री को .offcanvas-body क्लास में उपयोग करें。

यदि आप ऑफकैनवस साइडबैर खोलना चाहते हैं <button> या <a> एलिमेंट इंदिका .offcanvas कंटेनर के id का उपयोग करें (हमारे उदाहरण में #demo）

यदि आप <a> एलिमेंट ऑफकैनवस साइडबैर खोलता है, आप href गुण का उपयोग कर सकते हैं data-bs-target प्रकृति इंदिका #demo。

Offcanvas स्थानांतरण

कृपया इस्तेमाल करें .offcanvas-start|end|top|bottom ऑफकैनवस को बाईं, दायां, ऊपर या नीचे तक स्थानांतरित करें:

राइट साइड इन्स्टांस

<div class="offcanvas offcanvas-end" id="demo">

अपने आप से प्रयास करें

टॉप इन्स्टांस

<div class="offcanvas offcanvas-top" id="demo">

अपने आप से प्रयास करें

बोटम इन्स्टांस

<div class="offcanvas offcanvas-bottom" id="demo">

अपने आप से प्रयास करें