freeCodeCamp/guide/arabic/bootstrap/grid-system/index.md

title	localeTitle
Grid System	نظام الشبكة

نظام الشبكة

باختصار ، يساعدك نظام Bootstrap الشبكي على إنشاء تخطيطات متجاوبة ، وهو يشتمل على نظام من الصفوف والأعمدة يساعدك في بناء المحتوى الخاص بك.

الصفوف هي مجموعات أفقية من الأعمدة ، بحد أقصى 12 عمودًا لكل صف. داخل كل صف ، يتم وضع المحتوى داخل الأعمدة ويمكن أن يمتد في أي مكان بين 1 إلى 12 عمودًا.

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

يستخدم Bootstrap وحدات البكسل لتعريف نقاط التوقف الخاصة بطبقات الشبكة ، وعروض العرض المختلفة التي تعمل كنقاط نقاط لمستويات الشبكة هي:

كيف تعمل

حاوية

الحاوية هي معظم العناصر الخارجية التي ستحتوي على الشبكة الخاصة بك ، وتستخدم container عرض ثابتة في منتصف الشاشة (هامش إضافي على الشاشات الأكبر) أو container-fluid لعرض كامل.

<div class="container"></div>

صف

استخدم row لتجميع الأعمدة الخاصة بك ، وهذا سيبقي كل شيء مصفوفًا بشكل صحيح ويساعدك في بناء شبكتك.

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

أعمدة

تشير فئات العمود إلى عدد الأعمدة التي ترغب في استخدامها من أصل 12 لكل صف محتمل. على سبيل المثال col-sm-6 سيعني col-sm-6 أن عمودك سيستخدم نصف عرض row على شاشة صغيرة ، وسوف يستخدم col-lg-4 ما يصل إلى الثلث على شاشة كبيرة.

إليك كيفية تعريف بادئة فئة لاستخدام عرض عمود واحد على أحجام الشاشات المختلفة:

• إضافي صغير col-1
• صغير col-sm-1
• متوسطة col-md-1
• كبير col-lg-1
• إضافي كبير col-xl-1

<div class="col-sm-1"></div>

مثال

شبكة بعرض كامل تحتوي على أربعة أعمدة ، كل منها يشغل صفًا كاملاً على شاشات xs ، ونصف صف على الشاشات sm و md ، وربع عرض الصف على الشاشات الكبيرة وما فوقها.

`

First Column

Second Column

Third Column

Forth Column

`

لاحظ أنه لم يتم تعريف col-md و col-xl ، حيث لم يتم تعريف الحجم ، سيتم تعيينه افتراضيًا إلى الحجم الأصغر التالي الذي تم تحديده.

يوفر Bootstrap نظام شبكة عمود 12 جاهز للاستخدام في التخطيطات. خذ بعين الاعتبار التعليمة البرمجية التالية.

`

Content

Content

`

أين:

`- col = column

• md = screen size
• 6 = column width `

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

يمكن تعيين قيم حجم الشاشة على النحو التالي:

• xs - <768px Phones

• sm - <992px Tablets

• MD - <1200px أجهزة الكمبيوتر المحمولة

• lg -> 1200px Desktops

  Bootstrap هو الأول المحمول ومتجاوب.

  يعني الجوال أولاً أن تخطيط الشبكة سيستجيب تلقائيًا للشاشات الأصغر حجمًا. ثم يحدد HTML تخطيط الشبكة للشاشات الأكبر حجمًا.

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

`

Content

Content

<div class="container"> 
    <div class="row"> 
        <div class="example col-md-4">Content</div> 
        <div class="example col-md-4">Content</div> 
        <div class="example col-md-4">Content</div> 
    <div> 
</div> 

<div class="container"> 
    <div class="row"> 
        <div class="example col-md-3">Content</div> 
        <div class="example col-md-3">Content</div> 
        <div class="example col-md-3">Content</div> 
        <div class="example col-md-3">Content</div> 
    <div> 
</div> 

<div class="container"> 
    <div class="row"> 
        <div class="example col-md-2">Content</div> 
        <div class="example col-md-2">Content</div> 
        <div class="example col-md-2">Content</div> 
        <div class="example col-md-2">Content</div> 
        <div class="example col-md-2">Content</div> 
        <div class="example col-md-2">Content</div> 
    <div> 
</div> 

<div class="container"> 
    <div class="row"> 
        <div class="example col-md-1">Content</div> 
        <div class="example col-md-1">Content</div> 
        <div class="example col-md-1">Content</div> 
        <div class="example col-md-1">Content</div> 
        <div class="example col-md-1">Content</div> 
        <div class="example col-md-1">Content</div> 
        <div class="example col-md-1">Content</div> 
        <div class="example col-md-1">Content</div> 
        <div class="example col-md-1">Content</div> 
        <div class="example col-md-1">Content</div> 
        <div class="example col-md-1">Content</div> 
        <div class="example col-md-1">Content</div> 
    </div> 
</div> 

`

معلومات اكثر:

Bootstrap Docs - نظام الشبكة

يعتمد هذا الدليل على Bootstrap v4 (سوف يعمل مع v3 باستثناء أن الشاشات الصغيرة الإضافية تُعرَّف على أنها xs وليس هناك حجم xl )

• كبير جدًا: عرض العرض> 1200 بكسل
• كبير: عرض إطار العرض> = 992 بكسل
• متوسط: عرض العرض> = 768 بكسل
• صغير: عرض العرض> = 576 بكسل
• صغير جدًا: عرض إطار العرض أقل من 576 بكسل

معلومات اكثر:

https://getbootstrap.com/docs/4.0/layout/grid/