الأعمدة

تعرف على كيفية تعديل الأعمدة بمجموعة من الخيارات للمحاذاة والترتيب والتعويض بفضل نظام شبكة flexbox الخاص بنا. بالإضافة إلى ذلك ، اطلع على كيفية استخدام فئات الأعمدة لإدارة عروض العناصر غير المتصلة بالشبكة.

على هذه الصفحة

انتباه! تأكد من قراءة صفحة الشبكة أولاً قبل الغوص في كيفية تعديل وتخصيص أعمدة الشبكة.

كيف هؤلاء يعملون

تعتمد الأعمدة على بنية الشبكة المرنة. Flexbox يعني أن لدينا خيارات لتغيير الأعمدة الفردية وتعديل مجموعات الأعمدة على مستوى الصف . يمكنك اختيار كيفية نمو الأعمدة أو تقليصها أو تغييرها بأي طريقة أخرى.
عند إنشاء تخطيطات الشبكة ، ينتقل كل المحتوى في أعمدة. ينتقل التسلسل الهرمي لشبكة Bootstrap من حاوية إلى صف إلى عمود إلى المحتوى الخاص بك. في حالات نادرة ، يمكنك الجمع بين المحتوى والعمود ، ولكن كن مدركًا أنه قد تكون هناك عواقب غير مقصودة.
يتضمن Bootstrap فئات محددة مسبقًا لإنشاء تخطيطات سريعة الاستجابة. مع ستة نقاط توقف وعشرات الأعمدة في كل طبقة شبكة ، لدينا العشرات من الفئات التي تم إنشاؤها بالفعل من أجلك لإنشاء التخطيطات التي تريدها. يمكن تعطيل هذا عبر Sass إذا كنت ترغب في ذلك.

محاذاة

استخدم أدوات المحاذاة المرنة لمحاذاة الأعمدة رأسيًا وأفقيًا.

انحياز عمودي

واحد من ثلاثة أعمدة

لغة البرمجة

<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

واحد من ثلاثة أعمدة

لغة البرمجة

<div class="container text-center">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

محاذاة أفقية

واحد من عمودين

لغة البرمجة

<div class="container text-center">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

التفاف العمود

إذا تم وضع أكثر من 12 عمودًا في صف واحد ، فستلتف كل مجموعة من الأعمدة الإضافية كوحدة واحدة في سطر جديد.

.col-9

.col-4
بما أن 9 + 4 = 13> 12 ، يتم لف هذا المكون من 4 أعمدة على سطر جديد كوحدة واحدة متجاورة.

.col-6
تستمر الأعمدة التالية على طول الخط الجديد.

لغة البرمجة

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

عمود فواصل

يتطلب تقسيم الأعمدة إلى سطر جديد في flexbox اختراقًا صغيرًا: أضف عنصرًا مع المكان width: 100%الذي تريد لف الأعمدة الخاصة بك إلى سطر جديد. عادةً ما يتم تحقيق ذلك باستخدام عدة .rowقواطع ، ولكن ليس كل طريقة تنفيذ يمكن أن تفسر ذلك.

.col-6 .col-sm-3

لغة البرمجة

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

يمكنك أيضًا تطبيق هذا الفاصل عند نقاط توقف معينة باستخدام أدوات العرض سريعة الاستجابة الخاصة بنا .

.col-6 .col-sm-4

لغة البرمجة

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

إعادة الترتيب

ترتيب الفصول

استخدم .order-الفئات للتحكم في الترتيب المرئي للمحتوى الخاص بك. هذه الفئات متجاوبة ، لذا يمكنك تعيين orderنقطة التوقف حسب (على سبيل المثال ، .order-1.order-md-2). يتضمن دعمًا 1عبر 5جميع طبقات الشبكة الستة.

أولاً في DOM ، لم يتم تطبيق أي ترتيب

الثاني في DOM ، بترتيب أكبر

الثالث في DOM ، بترتيب 1

لغة البرمجة

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

هناك أيضًا فئات مستجيبة .order-firstوفئات .order-lastتغير orderعنصر العنصر عن طريق التطبيق order: -1و order: 6، على التوالي. يمكن أيضًا خلط هذه الفئات مع .order-*الفئات المرقمة حسب الحاجة.

الأول في DOM ، الترتيب الأخير

الثاني في DOM ، غير مرتب

المرتبة الثالثة في DOM ، مرتبة أولاً

لغة البرمجة

<div class="container text-center">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

موازنة الأعمدة

يمكنك تعويض أعمدة الشبكة بطريقتين: .offset-فئات الشبكة المتجاوبة وأدوات الهامش الخاصة بنا . يتم تحديد حجم فئات الشبكة لمطابقة الأعمدة بينما تكون الهوامش أكثر فائدة للتخطيطات السريعة حيث يكون عرض الإزاحة متغيرًا.

فئات الأوفست

انقل الأعمدة إلى اليمين باستخدام .offset-md-*الفئات. تزيد هذه الفئات الهامش الأيسر للعمود *بأعمدة. على سبيل المثال ، .offset-md-4يتحرك .col-md-4على أربعة أعمدة.

.col-md-4

.col-md-4. offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

لغة البرمجة

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

بالإضافة إلى مسح الأعمدة عند نقاط التوقف سريعة الاستجابة ، قد تحتاج إلى إعادة تعيين الإزاحات. شاهد هذا في العمل في مثال الشبكة .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5. offset-md-2 .col-lg-6 .offset-lg-0

لغة البرمجة

<div class="container text-center">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

مرافق الهامش

مع الانتقال إلى flexbox في الإصدار 4 ، يمكنك استخدام أدوات الهامش مثل .me-autoإبعاد الأعمدة الشقيقة عن بعضها البعض.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

لغة البرمجة

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

فئات الأعمدة المستقلة

يمكن .col-*أيضًا استخدام الفئات خارج a .rowلإعطاء عنصر عرضًا محددًا. عندما يتم استخدام فئات العمود كأبواب غير مباشرة لصف ، يتم حذف الحشوات.

.col-3: عرض 25٪

.col-sm-9: عرض 75٪ أعلى من نقطة توقف sm

لغة البرمجة

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

يمكن استخدام الفئات مع الأدوات المساعدة لإنشاء صور متجاوبة عائمة. تأكد من لف المحتوى في .clearfixغلاف لمسح الطفو إذا كان النص أقصر.

فقرة من نص العنصر النائب. نحن نستخدمه هنا لإظهار استخدام فئة clearfix. نضيف هنا عددًا قليلاً من العبارات التي لا معنى لها لتوضيح كيفية تفاعل الأعمدة هنا مع الصورة العائمة.

كما ترون الفقرات تلتف برشاقة حول الصورة العائمة. تخيل الآن كيف سيبدو هذا مع بعض المحتوى الفعلي هنا ، بدلاً من مجرد نص العنصر النائب الممل هذا الذي يتكرر ، ولكنه في الواقع لا ينقل أي معلومات ملموسة في. إنها ببساطة تشغل مساحة ولا يجب قراءتها حقًا.

ومع ذلك ، ها أنت ، ما زلت مثابرة في قراءة نص العنصر النائب هذا ، على أمل الحصول على مزيد من الأفكار ، أو بعض المحتوى المخفي لعيد الفصح. مزحة ، ربما. لسوء الحظ ، لا يوجد شيء من ذلك هنا.

لغة البرمجة

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>