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

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

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

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

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

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

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

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

.col-md-4

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

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

.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 v4 على خمسة مستويات من الفئات: xs (صغير جدًا) و sm (صغير) و md (متوسط) و lg (كبير) و xl (كبير جدًا). يمكنك استخدام أي مجموعة تقريبًا من هذه الفئات لإنشاء تخطيطات أكثر ديناميكية ومرونة.

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

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

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

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

.col-6 .col-lg-4

.col-6 .col-sm-4