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>
      </div>
    </div>
  </div>
</div>

تجربة شخصية