HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

أمثلة على شبكة Bootstrap 4

❮ سابق التالي ❯

أدناه قمنا بجمع بعض الأمثلة على تخطيطات شبكة Bootstrap 4.

ثلاثة أعمدة متساوية

استخدم .colالفئة على عدد محدد من العناصر وسيقوم Bootstrap بالتعرف على عدد العناصر الموجودة (وإنشاء أعمدة متساوية العرض). في المثال أدناه ، نستخدم ثلاثة عناصر col ، والتي يبلغ عرض كل منها 33.33٪.

العمود
العمود
العمود

مثال

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

ثلاثة أعمدة متساوية باستخدام الأرقام

يمكنك أيضًا استخدام الأرقام للتحكم في عرض العمود. فقط تأكد من أن المجموع يصل إلى 12 أو أقل (ليس مطلوبًا أن تستخدم جميع الأعمدة الـ 12 المتوفرة):

العمود 4
العمود 4
العمود 4

مثال

<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>

ثلاثة أعمدة غير متساوية

لإنشاء أعمدة غير متساوية ، يجب عليك استخدام الأرقام. المثال التالي سينشئ تقسيم 25٪ / 50٪ / 25٪:

العمود 3
العمود 6
العمود 3

مثال

<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</div>
</div>

ضبط عرض عمود واحد

ومع ذلك ، يكفي ضبط عرض عمود واحد فقط ، وتغيير حجم الأعمدة الشقيقة تلقائيًا حوله. المثال التالي سينشئ تقسيم 25٪ / 50٪ / 25٪:

العمود
العمود 6
العمود

مثال

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>

المزيد من الأعمدة المتساوية

1 من 2
2 من 2
1 من 4
2 من 4
3 من 4
4 من 4
1 من 6
2 من 6
3 من 6
4 من 6
5 من 6
6 من 6

مثال

<!-- Two equal columns -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- Four equal columns -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<!-- Six equal columns -->
<div class="row">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

صف الأعمدة

يمكنك أيضًا التحكم في عدد الأعمدة التي يجب أن تظهر بجانب بعضها البعض (بغض النظر عن عدد الأعمدة) ، مع .row-cols-*الفئات:

1 من 2
2 من 2
1 من 4
2 من 4
3 من 4
4 من 4
1 من 6
2 من 6
3 من 6
4 من 6
5 من 6
6 من 6

مثال

<div class="row row-cols-1">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<div class="row row-cols-2">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<div class="row row-cols-3">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

المزيد من الأعمدة غير المتكافئة

1 من 2
2 من 2
1 من 4
2 من 4
3 من 4
4 من 4
1 من 4
2 من 4
3 من 4
4 من 4

مثال

<!-- Two Unequal Columns -->
<div class="row">
  <div class="col-8">1 of 2</div>
  <div class="col-4">2 of 2</div>
</div>

<!-- Four Unequal Columns -->
<div class="row">
  <div class="col-2">1 of 4</div>
  <div class="col-2">2 of 4</div>
  <div class="col-2">3 of 4</div>
  <div class="col-6">4 of 4</div>
</div>

<!-- Setting two column widths -->
<div class="row">
  <div class="col-4">1 of 4</div>
  <div class="col-6">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

ارتفاع متساوي

إذا كان أحد الأعمدة أطول من الآخر (بسبب النص أو ارتفاع CSS) ، فسيتبع الباقي:

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

مثال

<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

أعمدة متداخلة

عمود -8
العمود 6
العمود 6
العمود 4

يوضح المثال التالي كيفية إنشاء تخطيط عمودين ، مع عمودين آخرين داخل أحد الأعمدة:

مثال

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

فئات مستجيبة

يتكون نظام شبكة Bootstrap 4 من خمس فئات:

  • .col-(الأجهزة الصغيرة جدًا - عرض الشاشة أقل من 576 بكسل)
  • .col-sm-(الأجهزة الصغيرة - عرض الشاشة يساوي أو يزيد عن 576 بكسل)
  • .col-md-(الأجهزة المتوسطة - عرض الشاشة يساوي 768 بكسل أو أكبر)
  • .col-lg-(الأجهزة الكبيرة - عرض الشاشة يساوي أو يزيد عن 992 بكسل)
  • .col-xl-(أجهزة xlarge - عرض الشاشة يساوي أو يزيد عن 1200 بكسل)

يمكن دمج الفئات أعلاه لإنشاء تخطيطات أكثر ديناميكية ومرونة.

تلميح: يتم زيادة حجم كل فصل ، لذلك إذا كنت ترغب في تعيين نفس العروض لـ smو md، ما عليك سوى تحديد sm.

مكدس إلى أفقي

العمود- SM-9
العمود- sm-3
كول سم
كول سم
كول سم

يوضح المثال التالي كيفية إنشاء تخطيط عمود يبدأ مكدسًا على أجهزة صغيرة جدًا ، قبل أن يصبح أفقيًا على الأجهزة الأكبر (sm و md و lg و xl):

مثال

<div class="row">
  <div class="col-sm-9">col-sm-9</div>
  <div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

مزج وو صل

عمود -6 عمود-سم -9
عمود -6 عمود-سم -3
عمود -7 عمود-إل جي -8
عمود -5 عمود-إل جي -4
col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8

مثال

<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
<div class="row">
  <div class="col-6 col-sm-9">col-6 col-sm-9</div>
  <div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>

<!-- 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<div class="row">
  <div class="col-7 col-lg-8">col-7 col-lg-8</div>
  <div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>

<!-- 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) -->
<div class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
  <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>

لا مزاريب

أضف .no-guttersالفئة إلى .rowالحاوية لإزالة المزاريب (مساحة إضافية):

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

مثال

<div class="row no-gutters">

❮ سابق التالي ❯