Bootstrap 5 ফোল্ডার

প্রথমত কল্পনা

যদি আপনি বেশি সামগ্রী দেখানো এবং লুকানোর ইচ্ছা করেন, তবে কল্পনা কম্পোনেন্ট অত্যন্ত উপযুক্ত:

উদাহরণ

<button data-bs-toggle="collapse" data-bs-target="#demo">বসন্ত</button>
<div id="demo" class="collapse">
  <p>সুখের দিনে ফুলদোকানের পানির পাশে, অসীম আলোক একসময় নতুন</p>
  <p>কালো পবনের সূত্র জানা যায়, লাল ও সবুজ সবসময় বসন্ত</p>
</div>

স্বয়ংক্রিয়ভাবে প্রয়াস করুন

উদাহরণ ব্যাখ্যা

.collapse ক্লাস ইনডিকেটর সামগ্রীকে (আমাদের উদাহরণে <div>) নির্দেশ করুন; বাটনটি ক্লিক করলে, যেকোনো সামগ্রী দেখা বা লুকিয়ে যাবে。

যদি আপনি সামগ্রীকে (দেখা/লুকানো) নিয়ন্ত্রণ করতে চান, তবে data-bs-target প্রতিশব্দটি যোগ করুন: data-bs-toggle="collapse" প্রতিশব্দ যোগ করুন <a> এবং <button> ইলেকট্রনিক প্রতিমাকে। তারপর, data-bs-toggle="collapse" যোগ করুন: data-bs-target="#id" প্রতিশব্দ ব্যবহার করে বাটন এবং সামগ্রীকে (div id="demo") সংযুক্ত করা যায়。

মন্তব্য:যদি আপনি <a> ইলেকট্রনিক প্রতিমাকে সংযুক্ত করতে চান, তবে আপনি এই প্রতিশব্দ ব্যবহার করতে পারেন: href প্রতিস্থাপন করুন: data-bs-target প্রতিশব্দ:

উদাহরণ

<a href="#demo" data-bs-toggle="collapse">বসন্ত</a>
<div id="demo" class="collapse">
  <p>সুখের দিনে ফুলদোকানের পানির পাশে, অসীম আলোক একসময় নতুন</p>
  <p>কালো পবনের সূত্র জানা যায়, লাল ও সবুজ সবসময় বসন্ত</p>
</div>

স্বয়ংক্রিয়ভাবে প্রয়াস করুন

ডিফল্টে, সমস্ত সামগ্রী লুকিয়ে আছে। কিন্তু, আপনি যদি অনুমোদন দেন তবে আপনি যেকোনো কনটেন্টকে যুক্ত করতে পারেন: .show ডিফল্টে কনটেন্ট দেখানোর জন্য ক্লাস:

উদাহরণ

<div id="demo" class="collapse show">
  <p>সুখের দিনে ফুলদোকানের পানির পাশে, অসীম আলোক একসময় নতুন</p>
  <p>কালো পবনের সূত্র জানা যায়, লাল ও সবুজ সবসময় বসন্ত</p>
</div>

স্বয়ংক্রিয়ভাবে প্রয়াস করুন

Accordion (হাউসলাইন)

উদাহরণস্বরূপ, card কম্পোনেন্টটির বিস্তার করে, একটি সাধারণ হাউসলাইন দেখানো হয়。

মন্তব্য:ব্যবহার data-bs-parent প্রতিটি ফ্ল্যাপগ্রুপ আইটেম প্রদর্শিত হলে, নির্দিষ্ট পিতৃপক্ষের অধীনস্থ সকল ফ্ল্যাপগ্রুপ মুক্ত করা হবে。

উদাহরণ

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
        ফ্ল্যাপগ্রুপ আইটেম #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>বসন্ত</h3>
        <p>সুখের দিনে ফুলদোকানের পানির পাশে, অসীম আলোক একসময় নতুন</p>
        <p>কালো পবনের সূত্র জানা যায়, লাল ও সবুজ সবসময় বসন্ত</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
        ফ্ল্যাপগ্রুপ আইটেম #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>গ্রীষ্মের শেষের কবিতা</h3>
        <p>অনেক লাল ও সবুজ হোক শুধুমাত্র ধূলি, গুলমর্গীর আওয়াজে গ্রীষ্মের নতুন কাল</p>
        <p>সবচেয়ে কমবে সংযোগপথগুলিতে পাতা ও সবুজ এবং সবচেয়ে কমবে আমি শান্ত সাম্রাজ্যের মানুষ</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
        ফ্ল্যাপগ্রুপ আইটেম #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>পাহাড়ের সফর</h3>
        <p>দূরের শীতল পাহাড়ের পাথদূর, মহামায়ার উৎপত্তির জায়গায় আছে বাড়ি。</p>
        <p>পরিবহন সবচেয়ে শীতল বনলোকের সন্ধ্যায়, আবর্জিত পাত্রের রঙ বৈশাখের মুকুটের চেয়ে লাল হয়।</p>
      </div>
    </div>
  </div>
</div>

স্বয়ংক্রিয়ভাবে প্রয়াস করুন