أمثلة شبكة التمهيد
تخطيطات الشبكة الأساسية لتعريفك بالبناء داخل نظام شبكة Bootstrap.
في هذه الأمثلة .themed-grid-col
يتم إضافة الفصل إلى الأعمدة لإضافة بعض السمات. هذه ليست فئة متوفرة في Bootstrap افتراضيًا.
خمس طبقات شبكية
هناك خمسة مستويات لنظام شبكة Bootstrap ، واحدة لكل مجموعة من الأجهزة التي ندعمها. تبدأ كل طبقة بأدنى حجم لإطار العرض وتنطبق تلقائيًا على الأجهزة الأكبر حجمًا ما لم يتم تجاوزها.
ثلاثة أعمدة متساوية
احصل على ثلاثة أعمدة متساوية العرض بدءًا من أجهزة سطح المكتب وتغيير حجمها إلى أجهزة كمبيوتر سطح المكتب الكبيرة . على الأجهزة المحمولة والأجهزة اللوحية وما دونها ، سيتم تكديس الأعمدة تلقائيًا.
ثلاثة أعمدة بديلة
باستخدام .row-cols-*
الفئات ، يمكنك بسهولة إنشاء شبكة بأعمدة متساوية.
.col
طفل
.row-cols-md-3
.col
طفل
.row-cols-md-3
.col
طفل
.row-cols-md-3
ثلاثة أعمدة غير متساوية
احصل على ثلاثة أعمدة بدءًا من أجهزة سطح المكتب وقم بالتوسيع إلى أجهزة كمبيوتر سطح المكتب الكبيرة ذات العروض المختلفة. تذكر ، يجب أن تضيف أعمدة الشبكة ما يصل إلى اثني عشر لكتلة أفقية واحدة. أكثر من ذلك ، تبدأ الأعمدة في التراص بغض النظر عن إطار العرض.
عمودين
احصل على عمودين بدءًا من أجهزة سطح المكتب وقم بالتوسيع إلى أجهزة سطح المكتب الكبيرة .
العرض الكامل ، عمود واحد
لا توجد فئات الشبكة ضرورية للعناصر كاملة العرض.
عمودين مع عمودين متداخلين
وفقًا للوثائق ، يعد التداخل أمرًا سهلاً - فقط ضع صفًا من الأعمدة داخل عمود موجود. يمنحك هذا عمودين يبدأان من أسطح المكتب وقياسًا إلى أسطح مكتب كبيرة ، مع عمودين آخرين (عرضان متساويان) داخل العمود الأكبر.
في أحجام الأجهزة المحمولة والأجهزة اللوحية وما دونها ، سيتم تكديس هذه الأعمدة وأعمدتها المتداخلة.
مختلط: الجوال وسطح المكتب
يحتوي نظام شبكة Bootstrap v4 على خمسة مستويات من الفئات: xs (صغير جدًا ، لا يتم استخدام هذه الطبقة infix) و sm (صغير) و md (متوسط) و lg (كبير) و xl (كبير جدًا). يمكنك استخدام أي مجموعة تقريبًا من هذه الفئات لإنشاء تخطيطات أكثر ديناميكية ومرونة.
تتطور كل طبقة من الفئات ، مما يعني أنك إذا كنت تخطط لتعيين نفس عروض md و lg و xl ، فأنت تحتاج فقط إلى تحديد md.
مختلط: الهاتف المحمول والجهاز اللوحي وسطح المكتب
المزاريب
مع .gx-*
الفصول ، يمكن ضبط المزاريب الأفقية.
.col
مع
.gx-4
المزاريب
.col
مع
.gx-4
المزاريب
.col
مع
.gx-4
المزاريب
.col
مع
.gx-4
المزاريب
.col
مع
.gx-4
المزاريب
.col
مع
.gx-4
المزاريب
استخدم .gy-*
الفئات للتحكم في المزاريب الرأسية.
.col
مع
.gy-4
المزاريب
.col
مع
.gy-4
المزاريب
.col
مع
.gy-4
المزاريب
.col
مع
.gy-4
المزاريب
.col
مع
.gy-4
المزاريب
.col
مع
.gy-4
المزاريب
مع .g-*
الفصول ، يمكن ضبط المزاريب في كلا الاتجاهين.
.col
مع
.g-3
المزاريب
.col
مع
.g-3
المزاريب
.col
مع
.g-3
المزاريب
.col
مع
.g-3
المزاريب
.col
مع
.g-3
المزاريب
.col
مع
.g-3
المزاريب
حاويات
تسمح الفئات الإضافية المضافة في Bootstrap v4.4 بحاويات بعرض 100٪ حتى نقطة توقف معينة. v5 يضيف xxl
نقطة توقف جديدة.