English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap هو أسهل وأسرع طريقة لإنشاء تصميم شبكة مناسبة للصفحات الديناميكية.
Bootstrap توفر مجموعة من أنظمة الشبكة المسبقة التكيف والاهتمام بالأجهزة المحمولة، حيث يُقسم النظام تلقائيًا إلى أقصى 12 عمودًا مع زيادة حجم الشاشة أو viewport (نافذة العرض).
يمكننا أيضًا تعريف عدد الأعمدة حسب الحاجة:
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
نظام الشبكة في Bootstrap 4 هو مسبق التكيف، وتُعيد الأعمدة ترتيب نفسها تلقائيًا بناءً على حجم الشاشة.
Bootstrap 4 يحتوي على فئات شبكة مسبقة التحديد، يمكن استخدامها لإنشاء تصميم شبكة سريع لأجهزة مختلفة (مثل الهواتف المحمولة، الأجهزة اللوحية، الكمبيوترات المحمولة وأجهزة الكمبيوتر المكتبية وما إلى ذلك). على سبيل المثال، يمكنك استخدام هذه الفئات .col-* لإنشاء أعمدة الشبكة للهواتف المحمولة في الوضع الرأسي، وبالمثل، يمكنك استخدام هذه الفئات .col-sm-* للأجهزة الصغيرة (مثل الهواتف المحمولة في الوضع الأفقي)، .col-md-* لأجهزة الشاشة المتوسطة (مثل الأجهزة اللوحية)، .col-lg-* لأجهزة الشاشة الكبيرة (مثل أجهزة الكمبيوتر المكتبية) و .col-xl-* لأجهزة الشاشة الكبيرة (مثل أجهزة الكمبيوتر المكتبية الكبيرة) لإنشاء أعمدة الشبكة.
يحتوي نظام الشبكة Bootstrap 4 على 5 فئات:
.col- لجميع الأجهزة
.col-sm- المحمول - عرض الشاشة يساوي أو أكبر من 576px
.col-md- شاشات الكمبيوتر - عرض الشاشة يساوي أو أكبر من 768px)
.col-lg- شاشات الكمبيوتر الكبيرة - عرض الشاشة يساوي أو أكبر من 992px)
.col-xl- شاشات الكمبيوتر الكبيرة - عرض الشاشة يساوي أو أكبر من 1200px)
قواعد نظام الشبكة Bootstrap4:
كل سطر يجب أن يكون داخل وعاء تم تعيين فئة .container (عرض ثابت) أو .container-fluid (عرض كامل الشاشة)، حيث يتم تعيين بعض الهوامش والإضافات تلقائيًا.
يُستخدم السطر لإنشاء مجموعات عمودية مستقيمة.
يجب وضع المحتوى داخل الأعمدة، ويجب أن تكون الأعمدة فقط العقدة المباشرة للأعمدة.
يمكن استخدام الفئات المسبقة الصنع مثل .row و .col-sm-4 لإنشاء تصميمات الشبكة بسرعة.
تُنشأ الفجوات بين محتويات الأعمدة من خلال ملء الفجوات بين الأعمدة. يتم تعيين هذا التحديد من خلال هامش السالب في .rows لتحديد أول سطر وآخر عمود.
تُنشأ الأعمدة الشبكية من خلال تغطية 12 عمودًا مُحددًا. على سبيل المثال، لتحديد ثلاثة أعمدة متساوية، يجب استخدام ثلاثة .col-sm-4.
. أكبر فرق بين Bootstrap 3 وBootstrap 4 هو أن Bootstrap 4 تستخدم الآن Flexbox بدلاً من الميل واحدة من المزايا الكبيرة لـ Flexbox هي أن الأعمدة التي لم يتم تحديد عرضها ستعمل تلقائيًا علىالأعمدة المتساوية العرض والارتفاع . إذا كنت ترغب في الحصول على معلومات إضافية حول Flexbox، يمكنك قراءة دروسنا حول CSS Flexbox.
الجدول أدناه يلخص كيفية عمل نظام الشبكة Bootstrap في الأجهزة المختلفة:
| الأجهزة الصغيرة <576px | المحمول ≥576px | شاشات الكمبيوتر ≥768px | شاشات الكمبيوتر الكبيرة ≥992px | شاشات الكمبيوتر الكبيرة ≥1200px | |
|---|---|---|---|---|---|
| أكبر عرض للوعاء | لا شيء (تلقائي) | 540px | 720px | 960px | 1140px |
| مُقوّم الفئة | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| عدد الأعمدة والإجمالي | 12 | ||||
| عرض الفجوة | 30px لكل جانب من الجانب 15px من العُمود | ||||
| يمكن تعميقها | نعم | ||||
| ترتيب الأعمدة | نعم | ||||
يمكن استخدام هذه الفئات معًا لإنشاء تصميمات صفحات أكثر مرونة.
التكوّن الأساسي للشبكة Bootstrap 4
<!-- المثال الأول: تحكم في عرض الأعمدة وكيف تظهر في الأجهزة المختلفة --> <div class="row"> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <!-- المثال الثاني: أو ترك Bootstrap ليقوم بتخطيط الت布局 تلقائيًا --> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
المثال الأول: أنشئ سطرًا واحدًا(<div class="row">). ثم، أضف الأعمدة المطلوبة(.col-*-* في هذا الفئة). النجمة الأولى (*) يُمثل الأجهزة المستجيبة: sm، md، lg أو xl، النجمة الثانية (*) تمثل رقمًا، ويجب أن يكون مجموع الأرقام في السطر نفسه 12.
المثال الثاني: لا تضيف في كل col أضف أرقامًا على الرأس، ليقوم Bootstrap بمعالجة التخطيط تلقائيًا، ويكون عرض كل عمود في السطر نفسه متساوٍ: إثنان "col" ، كل منها يمثل عرض 50%، ثلاثة "col"كل منها يمثل عرض 33.33%، أربعة "col"كل منها يمثل عرض 25%، وفقًا لذلك. كذلك، يمكنك استخدام .col-sm|md|lg|xl لنضبط قواعد الاستجابة للعمدة.
دعونا نرى بعض الأمثلة.
<!DOCTYPE html> <html> <head> <title>مثالُ Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Hello World!</h1> <p>أنشئ ثلاثة أعمدة ذات عرض متساوٍ! جرب إضافة div جديد يحتوي على class="col" في div يحتوي على class="row"، وسيظهر لك أربعة أعمدة متساوية العرض.</p> <div class="row"> <div class="col" style="background-color:lavender;">.col</div> <div class="col" style="background-color:orange;">.col</div> <div class="col" style="background-color:lavender;">.col</div> </div> </div> </body> </html>اختبار لـ ‹/›
هذا المثال يوضح كيفية إنشاء أعمدة متجاوبة ذات عرض متساوٍ على الأجهزة اللوحية وأكبر من الشاشات. على الأجهزة المحمولة، أي عند انخفاض عرض الشاشة إلى أقل من 576px، ستتداخل الأعمدة الأربعة بشكل أفقي:
<!DOCTYPE html> <html> <head> <title>مثالُ Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Hello World!</h1> <p>تغيير حجم المتصفح لرؤية التأثير.</p> <p>على الأجهزة المحمولة، أي عند انخفاض عرض الشاشة إلى أقل من 576px، ستتداخل الأعمدة الأربعة بشكل أفقي.</p> <div class="row"> <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> </div> </div> </body> </html>اختبار لـ ‹/›
هذا المثال يوضح كيفية إنشاء أعمدة متجاوبة ذات عرض غير متساوٍ على الأجهزة اللوحية وأكبر من الشاشات. على الأجهزة المحمولة، عند عرض الشاشة أقل من 576px، سيتم ترتيب العمودين بشكل متداخل أعلى أسفل.:
<!DOCTYPE html> <html> <head> <title>مثالُ Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Hello World!</h1> <p>تغيير حجم المتصفح لرؤية التأثير.</p> <p>على الأجهزة المحمولة، عند عرض الشاشة أقل من 576px، سيتم ترتيب الأربعة أعمدة بشكل متداخل أعلى أسفل.</p> <div class="row"> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div> </div> </div> </body> </html>اختبار لـ ‹/›
في هذا المثال، عرض كل من العمودين 50% على شاشات أجهزة الكمبيوتر، إذا كان على الجهاز اللوحي فإن عرض الجانب الأيسر هو 25% و عرض الجانب الأيمن هو 75%， على الأجهزة الصغيرة مثل الهواتف المحمولة سيتم عرضها بشكل متداخل.
<!DOCTYPE html> <html> <head> <title>مثالُ Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>تخطيط الشبكة لللوحة والسطح المكتب</h1> <p>في هذا المثال، عرض كل من العمودين 50% على شاشات أجهزة الكمبيوتر، إذا كان على الجهاز اللوحي فإن عرض الجانب الأيسر هو 25% و عرض الجانب الأيمن هو 75%， على الأجهزة الصغيرة مثل الهواتف المحمولة سيتم عرضها بشكل متداخل.</p> </p> <p>تغيير حجم نافذة المتصفح، لرؤية التأثير.</p> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 bg-success"> w3codebox </div> <div class="col-sm-9 col-md-6 bg-warning"> دليلُ الأساس </div> </div> </div> </div> </body> </html>اختبار لـ ‹/›
في هذا المثال، نسبة الأحجام في أجهزة اللوحية، سطح المكتب، شاشات سطح المكتب الكبيرة، و شاشات سطح المكتب الضخمة هي: 25/75%، 50/50%， 33.33/66.67%， 16.67/83.33%， على الأجهزة الصغيرة مثل الهواتف المحمولة سيتم عرضها بشكل متداخل.
<!DOCTYPE html> <html> <head> <title>مثالُ Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>أجهزة اللوحية، سطح المكتب، شاشات سطح المكتب الكبيرة، و شاشات سطح المكتب الضخمة</h1> <p>في هذا المثال، نسبة الأحجام في أجهزة اللوحية، سطح المكتب، شاشات سطح المكتب الكبيرة، و شاشات سطح المكتب الضخمة هي: 25/75%، 50/50%， 33.33/66.67%， 16.67/83.33%، على الأجهزة الصغيرة مثل الهواتف المحمولة سيتم عرضها بشكل متداخل.</p> <p>تغيير حجم نافذة المتصفح، لرؤية التأثير.</p> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-success"> w3codebox </div> <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-warning"> دليلُ الأساس </div> </div> </div> </div> </body> </html>اختبار لـ ‹/›
تحريكُ الأعمدةُ من خلالِ الأشكالِ offset-*-*. sm،md،lg،xl،مثلًا، نوعُ الجهازِ الشاشي، والنجمهُ الثانية ( * ) يمكنُ أن تكون 1 إلى 11 رقمًا.
للتحريكِ علىِ الشاشاتِ الكبيرة، استخدم .offset-md-* هذهِ الأشكالُ تزيدُ من الهوامشِ الخارجيةِ (margin) لأي عمود * العمود، حيثُ * النطاقُ من 1 إلى 11。
مثلاً: .offset-md-4ُهوِ لتحريكِ .col-md-4ُ إلى اليمينِ بأربعةِ خطوطِ.
<!DOCTYPE html> <html> <head> <title>مثالُ Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>تحريكُ الأعمدة</h1> <p>.offset-md-4ُهوِ لتحريكِ .col-md-4ُ إلى اليمينِ بأربعةِ خطوطِ.</p> <div class="container-fluid"> <div class="row"> <div class="col-md-4 bg-success">.col-md-4</div> <div class="col-md-4 offset-md-4 bg-warning">.col-md-4 .offset-md-4</div> </div> <div class="row"> <div class="col-md-3 offset-md-3 bg-success">.col-md-3 .offset-md-3</div> <div class="col-md-3 offset-md-3 bg-warning">.col-md-3 .offset-md-3</div> </div> <div class="row"> <div class="col-md-6 offset-md-3 bg-success">.col-md-6 .offset-md-3</div> </div> </div> </div> </body> </html>اختبار لـ ‹/›
نأمل أن تكون قد فهمت الأساسيات الجديدة لنظام الشبكة لـ Bootstrap 4. في الفصول القادمة، ستتعلم كيفية استخدام هذا النظام الشبكي الخاص بـ flexbox لإنشاء تصميمات أساسية للصفحات.