تمت الإضافة في v5.1 مشاهدة على الـ GitHub

التكديس (Stacks)

مساعدات مختصرة تعتمد على الـ flexbox utilities لجعل تخطيط المكونات أسرع وأسهل من أي وقت مضى.

في هذه الصفحة

توفر الـ Stacks اختصاراً لتطبيق عدد من خصائص الـ flexbox لإنشاء التخطيطات في Bootstrap بسرعة وسهولة. يعود الفضل في المفهوم والتنفيذ إلى مشروع Pylon مفتوح المصدر.

تنبيه! دعم أدوات الفراغات (gap utilities) مع الـ flexbox غير متوفر في Safari قبل الإصدار 14.5، لذا يرجى التحقق من دعم المتصفح المستهدف. أما تخطيط الـ Grid فلا توجد به أي مشاكل. اقرأ المزيد.

عمودي (Vertical)

استخدم .vstack لإنشاء تخطيطات عمودية. تكون العناصر المكدسة بعرض كامل افتراضياً. استخدم أدوات .gap-* لإضافة مساحة بين العناصر.

First item

Second item

Third item

html

<div class="vstack gap-3">
  <div class="p-2">First item</div>
  <div class="p-2">Second item</div>
  <div class="p-2">Third item</div>
</div>

أفقي (Horizontal)

استخدم .hstack للتخطيطات الأفقية. تكون العناصر المكدسة ممركزة عمودياً افتراضياً وتأخذ فقط العرض اللازم لها. استخدم أدوات .gap-* لإضافة مساحة بين العناصر.

First item

Second item

Third item

html

<div class="hstack gap-3">
  <div class="p-2">First item</div>
  <div class="p-2">Second item</div>
  <div class="p-2">Third item</div>
</div>

باستخدام أدوات الهوامش الأفقية مثل .ms-auto كفواصل:

First item

Second item

Third item

html

<div class="hstack gap-3">
  <div class="p-2">First item</div>
  <div class="p-2 ms-auto">Second item</div>
  <div class="p-2">Third item</div>
</div>

ومع القواعد العمودية:

First item

Second item

Third item

html

<div class="hstack gap-3">
  <div class="p-2">First item</div>
  <div class="p-2 ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="p-2">Third item</div>
</div>

أمثلة

استخدم .vstack لتكديس الأزرار والعناصر الأخرى:

html

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

أنشئ نموذجاً داخلياً (inline form) باستخدام .hstack:

html

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

الـ (CSS)

scss/helpers/_stacks.scss

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}