أمثلة شبكة التمهيد

تخطيطات الشبكة الأساسية لتعريفك بالبناء داخل نظام شبكة Bootstrap.

في هذه الأمثلة .themed-grid-colيتم إضافة الفصل إلى الأعمدة لإضافة بعض السمات. هذه ليست فئة متوفرة في Bootstrap افتراضيًا.

خمس طبقات شبكية

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

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

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

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

.col-md-4

ثلاثة أعمدة بديلة

باستخدام .row-cols-*الفئات ، يمكنك بسهولة إنشاء شبكة بأعمدة متساوية.

.colطفل .row-cols-md-3

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

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

.col-md-3

.col-md-6

.col-md-3

عمودين

احصل على عمودين بدءًا من أجهزة سطح المكتب وقم بالتوسيع إلى أجهزة سطح المكتب الكبيرة .

.col-md-8

.col-md-4

العرض الكامل ، عمود واحد

لا توجد فئات الشبكة ضرورية للعناصر كاملة العرض.

عمودين مع عمودين متداخلين

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

في أحجام الأجهزة المحمولة والأجهزة اللوحية وما دونها ، سيتم تكديس هذه الأعمدة وأعمدتها المتداخلة.

.col-md-8

.col-md-6

.col-md-4

مختلط: الجوال وسطح المكتب

يحتوي نظام شبكة Bootstrap v5 على ستة مستويات من الفئات: xs (صغير جدًا ، هذه الطبقة infix غير مستخدمة) ، sm (صغير) ، md (متوسط) ، lg (كبير) ، xl (x-large) ، و xxl (xx) -كبير). يمكنك استخدام أي مجموعة تقريبًا من هذه الفئات لإنشاء تخطيطات أكثر ديناميكية ومرونة.

تتطور كل طبقة من الفئات ، مما يعني أنك إذا كنت تخطط لتعيين نفس عروض md و lg و xl و xxl ، فأنت تحتاج فقط إلى تحديد md.

.col-md-8

.col-6 .col-md-4

.col-6

مختلط: الهاتف المحمول والجهاز اللوحي وسطح المكتب

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

المزاريب

مع .gx-*الفصول ، يمكن ضبط المزاريب الأفقية.

.colمع .gx-4المزاريب

استخدم .gy-*الفئات للتحكم في المزاريب الرأسية.

.colمع .gy-4المزاريب

مع .g-*الفصول ، يمكن ضبط المزاريب في كلا الاتجاهين.

.colمع .g-3المزاريب

حاويات

تسمح الفئات الإضافية المضافة في Bootstrap v4.4 بحاويات بعرض 100٪ حتى نقطة توقف معينة. v5 يضيف xxlنقطة توقف جديدة.

.وعاء

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid