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

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

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

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

.col-md-4
.col-md-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-6
.col-md-4

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

يحتوي نظام شبكة Bootstrap 3 على أربعة مستويات من الفئات: xs (الهواتف) و sm (الأجهزة اللوحية) و md (أجهزة الكمبيوتر المكتبية) و lg (أجهزة الكمبيوتر المكتبية الأكبر حجمًا). يمكنك استخدام أي مجموعة تقريبًا من هذه الفئات لإنشاء تخطيطات أكثر ديناميكية ومرونة.

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

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

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

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

العمود المقاصة

امسح العوامات عند نقاط توقف معينة لمنع الالتفاف غير الملائم مع المحتوى غير المتساوي.

.col-xs-6 .col-sm-3 قم
بتغيير حجم منفذ العرض أو تحقق منه على هاتفك للحصول على مثال.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

إزاحة ودفع وسحب عمليات إعادة الضبط

إعادة تعيين الإزاحات والدفع والسحب عند نقاط توقف محددة.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0