الأكورديون المدمج بدون إطار | القوائم المطوية Accordion في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عندما تضع مكوّن .accordion داخل بطاقة .card أو عمود مؤطر، يؤدي اجتماع حدود الأكورديون الخارجية مع حدود البطاقة إلى ازدواج بصري مزعج. يعالج الكلاس .accordion-flush ذلك فوراً بإزالة الحدود الجانبية والزوايا المستديرة الخارجية ليلتصق الأكورديون بحواف حاويته الأم بنظافة تامة.

قارن الأنماط الثلاثة عملياً في المختبر التفاعلي التالي:

الصف 2 كود برمجي

HTML

<div class="card">
  <div class="accordion accordion-flush" id="flushAcc">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed"
          type="button" data-bs-toggle="collapse"
          data-bs-target="#m1">Module 1</button></h2>
      <div id="m1" class="accordion-collapse collapse">
        <div class="accordion-body">4 Lessons</div>
      </div></div>
  </div>
</div>

جرّب بنفسك

الصف 3 معاينة حية

الصف 4 ملاحظة هامة

Flush Borderless Accordions الأكورديون المدمج بدون إطار

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (القوائم المطوية Accordion في بوتستراب 5)