الأعمدة
تعرف على كيفية تعديل الأعمدة بمجموعة من الخيارات للمحاذاة والترتيب والتعويض بفضل نظام شبكة flexbox الخاص بنا. بالإضافة إلى ذلك ، اطلع على كيفية استخدام فئات الأعمدة لإدارة عروض العناصر غير المتصلة بالشبكة.
كيف هؤلاء يعملون
-
تعتمد الأعمدة على بنية الشبكة المرنة. Flexbox يعني أن لدينا خيارات لتغيير الأعمدة الفردية وتعديل مجموعات الأعمدة على مستوى الصف . يمكنك اختيار كيفية نمو الأعمدة أو تقليصها أو تغييرها بأي طريقة أخرى.
-
عند إنشاء تخطيطات الشبكة ، ينتقل كل المحتوى في أعمدة. ينتقل التسلسل الهرمي لشبكة Bootstrap من حاوية إلى صف إلى عمود إلى المحتوى الخاص بك. في حالات نادرة ، يمكنك الجمع بين المحتوى والعمود ، ولكن كن مدركًا أنه قد تكون هناك عواقب غير مقصودة.
-
يتضمن Bootstrap فئات محددة مسبقًا لإنشاء تخطيطات سريعة الاستجابة. مع ستة نقاط توقف وعشرات الأعمدة في كل طبقة شبكة ، لدينا العشرات من الفئات التي تم إنشاؤها بالفعل من أجلك لإنشاء التخطيطات التي تريدها. يمكن تعطيل هذا عبر Sass إذا كنت ترغب في ذلك.
محاذاة
استخدم أدوات المحاذاة المرنة لمحاذاة الأعمدة رأسيًا وأفقيًا.
انحياز عمودي
<div class="container">
<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">
<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">
<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 عمودًا في صف واحد ، فستلتف كل مجموعة من الأعمدة الإضافية كوحدة واحدة في سطر جديد.
بما أن 9 + 4 = 13> 12 ، يتم لف هذا المكون من 4 أعمدة على سطر جديد كوحدة واحدة متجاورة.
تستمر الأعمدة التالية على طول الخط الجديد.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 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
قواطع ، ولكن ليس كل طريقة تنفيذ يمكن أن تفسر ذلك.
<div class="container">
<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>
يمكنك أيضًا تطبيق هذا الفاصل عند نقاط توقف معينة باستخدام أدوات العرض سريعة الاستجابة الخاصة بنا .
<div class="container">
<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
جميع طبقات الشبكة الستة.
<div class="container">
<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-*
الفئات المرقمة حسب الحاجة.
<div class="container">
<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
على أربعة أعمدة.
<div class="container">
<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>
بالإضافة إلى مسح الأعمدة عند نقاط التوقف سريعة الاستجابة ، قد تحتاج إلى إعادة تعيين الإزاحات. شاهد هذا في العمل في مثال الشبكة .
<div class="container">
<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
إبعاد الأعمدة الشقيقة عن بعضها البعض.
<div class="container">
<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
لإعطاء عنصر عرضًا محددًا. عندما يتم استخدام فئات العمود كأبناء غير مباشرين للصف ، يتم حذف الحشوات.
<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>