Bootstrap 5 Offcanvas

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">বন্ধ করুন</button>
  </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 সাইডবার তৈরি করুন。

.offcanvas-start শ্রেণীতে offcanvas-কে স্থানান্তরিত এবং এর প্রস্থতা 400px হিসাবে সংযোজিত করুন। আরও স্থানান্তরিত শ্রেণীগুলির জন্য নীচের উদাহরণ দেখুন。

.offcanvas-title শ্রেণীতে যোগ করুন

তবে, আপনার কনটেন্টকে .offcanvas-body এবং

শ্রেণীতে যদি আপনি offcanvas সাইডবার খুলতে চান <button> <a> প্রতীক্ষা দ্বারা .offcanvas কন্টেন্টার id-এর (আমাদের উদাহরণে হলো #demo）

যদি আপনি ব্যবহার করতে চান <a> এলিমেন্টটি offcanvas সাইডবার খুলতে, আপনি href প্রতীক্ষা বর্জন করতে পারেন data-bs-target প্রতীক্ষা দ্বারা #demo。

Offcanvas স্থানান্তর

ব্যবহার করুন .offcanvas-start|end|top|bottom offcanvas-কে ডান, বাম, শীর্ষ বা তলদিকে স্থাপন করুন:

ডানদিক ইনস্ট্যান্স

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

আপনার নিজেই প্রয়োগ করুন

শীর্ষদিক ইনস্ট্যান্স

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

আপনার নিজেই প্রয়োগ করুন

তলদিক ইনস্ট্যান্স

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

আপনার নিজেই প্রয়োগ করুন