آموزش Collapse در بوت استرپ

0 دیدگاه

در این فصل از آموزش بوت استرپ به قابلیت کاربردی «باز و بسته شدن (Collapse)» می‌پردازیم؛ قابلیتی که امکان نمایش یا مخفی کردن بخش‌هایی از محتوا را به صورت کاملاً پویا و قابل کنترل فراهم می‌کند. این قابلیت با استفاده از افزونه جاوا اسکریپت بوت استرپ و چند کلاس خاص فراهم می‌شود.

عملکرد Collapse در بوت استرپ

افزونه جاوا اسکریپت مربوط به Collapse برای نمایش یا پنهان کردن اطلاعات به کار می‌رود. در این حالت، دکمه‌ها یا لینک‌ها به‌عنوان محرک (Trigger) عمل می‌کنند و با اتصال به یک عنصر خاص، وضعیت نمایش آن را تغییر می‌دهند.

زمانی که یک عنصر بسته (Collapse) می‌شود، ارتفاع آن از مقدار فعلی به صفر انیمیت می‌شود. اما به دلیل نحوه عملکرد CSS در انیمیشن‌ها، نمی‌توان روی عنصری که کلاس .collapse دارد، padding (فاصله داخلی) اعمال کرد.

مثال ساده از عملکرد Collapse

در مثال زیر، یک دکمه وجود دارد که با کلیک روی آن، محتوای مشخصی نمایش داده یا پنهان می‌شود. این تغییر با استفاده از کلاس‌ها صورت می‌گیرد:

کلاس .collapse برای مخفی کردن محتوا به کار می‌رود.
کلاس .collapsing در زمان انجام انیمیشن انتقال مورد استفاده قرار می‌گیرد.
کلاس ترکیبی .collapse.show برای نمایش محتوا به کار می‌رود.

استفاده از دکمه یا لینک

برای فعال‌سازی این ویژگی، معمولاً از یک دکمه با ویژگی data-bs-target استفاده می‌شود که هدف آن مشخص می‌کند کدام عنصر باید باز یا بسته شود. همچنین می‌توان از یک تگ <a> همراه با ویژگی role="button" هم استفاده کرد، اما از نظر ساختار معنایی (semantic)، این روش چندان توصیه نمی‌شود. در هر دو حالت، باید ویژگی data-bs-toggle="collapse" نیز وجود داشته باشد تا این عملکرد فعال شود.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap plugin - Collapse</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <p>
        <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
          Collapse using link
        </a>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
          Collapse using button
        </button>
      </p>
      <div class="collapse" id="collapseExample">
        <div class="card card-body">
          The collapse JavaScript plugin used to display and hide content.
        </div>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap plugin - Collapse</title>

</head>

<body>

<p>

Collapse using link

</a>

Collapse using button

</button>

</p>

The collapse JavaScript plugin used to display and hide content.

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

حالت افقی Collapse در بوت استرپ

افزونه Collapse در بوت استرپ از باز و بسته شدن افقی نیز پشتیبانی می‌کند. برای دستیابی به این حالت، به جای تغییر ارتفاع، باید عرض (width) عنصر تغییر کند.

برای این کار، مراحل زیر را دنبال کنید:

روی عنصر فرزند مستقیم (محتوای داخلی)، یک عرض مشخص تعیین کنید.
به عنصر اصلی، کلاس .collapse-horizontal را اضافه کنید. این کلاس باعث می‌شود انیمیشن باز و بسته شدن، به صورت افقی (در جهت عرض) انجام شود.

علاوه بر این، می‌توانید برای کنترل بیشتر بر ظاهر و رفتار عنصر، از کلاس‌های کمکی عرض (width utilities) استفاده کنید، یا استایل دلخواه خود را با Sass سفارشی طراحی کنید. حتی استفاده از استایل‌های خطی (inline styles) نیز در صورت نیاز امکان‌پذیر است.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap plugin - Collapse</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <p>
      <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
        Collapse With Toggle Width 
      </button>
    </p>
    <div style="min-height: 120px;">
      <div class="collapse collapse-horizontal" id="collapseWidthExample">
        <div class="card card-body" style="width: 300px;">
          The collapse plugin supports horizontal collapsing.
        </div>
      </div>
    </div>
  </body>
  </html>

<!DOCTYPE html>

<head>

<title>Bootstrap plugin - Collapse</title>

</head>

<body>

<p>

Collapse With Toggle Width

</button>

</p>

The collapse plugin supports horizontal collapsing.

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

چندین دکمه و تارگت

در بوت استرپ می‌توان از یک دکمه یا لینک برای کنترل چند عنصر استفاده کرد یا برعکس، چند دکمه برای باز و بسته کردن یک عنصر واحد به کار برد. این امکان باعث می‌شود تجربه کاربری انعطاف‌پذیرتر و تعاملی‌تری ایجاد شود.

برای درک بهتر این قابلیت، به نکات زیر توجه کنید:

اگر در ویژگی data-bs-target دکمه یا لینک، یک کلاس مشترک برای چند عنصر مشخص شود، کلیک روی آن دکمه می‌تواند همزمان چندین عنصر را باز یا بسته کند.
همچنین، می‌توان چند دکمه یا لینک داشت که همگی به یک عنصر مشخص ارجاع می‌دهند (از طریق ویژگی data-bs-target یا href). در این حالت، هر کدام از این دکمه‌ها قادر خواهند بود همان عنصر را نمایش یا مخفی کنند.

این ویژگی به شما این امکان را می‌دهد که بدون پیچیدگی زیاد، تعاملات پویا و چندمنظوره‌ای را در رابط کاربری خود پیاده‌سازی کنید.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap plugin - Collapse</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <p>
        <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Collapse First Item</a>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Collapse Second Item</button>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Collapse Both Elements</button>
      </p>
      <div class="row">
        <div class="col">
          <div class="collapse multi-collapse" id="multiCollapseExample1">
            <div class="card card-body">
              Example of multiple collpase and targets.
            </div>
          </div>
        </div>
        <div class="col">
          <div class="collapse multi-collapse" id="multiCollapseExample2">
            <div class="card card-body">
              Example of multiple collapse and targets.
            </div>
          </div>
        </div>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap plugin - Collapse</title>

</head>

<body>

<p>

<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Collapse First Item</a>

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Collapse Second Item</button>

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Collapse Both Elements</button>

</p>

Example of multiple collpase and targets.

</div>

Example of multiple collapse and targets.

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

دسترسی پذیری

برای اطمینان از دسترسی‌پذیر بودن عناصر باز و بسته‌شونده در بوت استرپ، باید از ویژگی aria-expanded استفاده کنید. این ویژگی به فناوری‌های کمکی مانند صفحه‌خوان‌ها اطلاع می‌دهد که وضعیت عنصر در حال حاضر باز است یا بسته.

اگر عنصر بسته باشد، مقدار aria-expanded="false" باید تنظیم شود.
اگر عنصر باز باشد، مقدار aria-expanded="true" استفاده می‌شود.

بوت استرپ با استفاده از افزونه Collapse، مقدار این ویژگی را به‌طور خودکار بر اساس وضعیت باز یا بسته بودن عنصر تغییر می‌دهد.

اگر عنصر کنترل‌کننده (مثلاً یک تگ <a> یا <div>) به‌طور پیش‌فرض دکمه نیست، باید ویژگی role="button" را به آن اضافه کنید تا رفتار دکمه‌ای برای آن تعریف شود و فناوری‌های کمکی آن را به‌درستی شناسایی کنند.

علاوه بر این، صفحه‌خوان‌ها و سایر ابزارهای کمکی مدرن از ویژگی data-bs-target نیز استفاده می‌کنند تا به کاربران کمک کنند سریع‌تر و راحت‌تر به بخش‌های باز و بسته‌شونده صفحه دسترسی پیدا کنند.

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

دوره صفر تا صد آموزش بین المللی لینوکس

انتشار: ۸ خرداد ۱۴۰۴

آموزش Collapse در بوت استرپ

عملکرد Collapse در بوت استرپ

مثال ساده از عملکرد Collapse

استفاده از دکمه یا لینک

حالت افقی Collapse در بوت استرپ

چندین دکمه و تارگت

دسترسی پذیری

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط