چینش‌های 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>

آزمایش کنید