چینش‌های 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-toggle="collapse" ویژگی به عناصر <a> یا <button> اضافه کنید. سپس 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>

خود کا تجربہ کریں