أمثلة على شبكة التمهيد
أدناه قمنا بجمع بعض الأمثلة على تخطيطات شبكة Bootstrap الأساسية.
ثلاثة أعمدة متساوية
يوضح المثال التالي كيفية الحصول على ثلاثة أعمدة متساوية العرض تبدأ من الأجهزة اللوحية والتحجيم إلى أجهزة كمبيوتر سطح المكتب الكبيرة. على الهواتف المحمولة ، سيتم تكديس الأعمدة تلقائيًا:
مثال
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
ثلاثة أعمدة غير متساوية
يوضح المثال التالي كيفية الحصول على ثلاثة أعمدة ذات عرض مختلف بدءًا من الأجهزة اللوحية والتوسع في أجهزة سطح المكتب الكبيرة:
مثال
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
عمودين غير متساويين
يوضح المثال التالي كيفية الحصول على عمودين مختلفي العرض بدءًا من الأجهزة اللوحية والتوسع في أجهزة سطح المكتب الكبيرة:
مثال
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
لا المزاريب
استخدم .row-no-guttersالفصل لإزالة المزاريب من صف وأعمدته:
مثال
<div class="row row-no-gutters">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
عمودين مع عمودين متداخلين
يوضح المثال التالي كيفية الحصول على عمودين يبدأان من الأجهزة اللوحية والتحجيم إلى أسطح مكتب كبيرة ، مع عمودين آخرين (عرض متساوٍ) داخل العمود الأكبر (في الهواتف المحمولة ، سيتم تكديس هذه الأعمدة وأعمدتها المتداخلة):
مثال
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
مختلط: موبايل وسطح المكتب
يتكون نظام شبكة Bootstrap من أربع فئات: xs (الهواتف) و sm (الأجهزة اللوحية) و md (أجهزة الكمبيوتر المكتبية) و lg (أجهزة الكمبيوتر المكتبية الأكبر حجمًا). يمكن دمج الفئات لإنشاء تخطيطات أكثر ديناميكية ومرونة.
تلميح: يتم قياس كل فصل ، لذلك إذا كنت ترغب في تعيين نفس العرض لـ xs و sm ، فأنت تحتاج فقط إلى تحديد xs.
مثال
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
نصيحة: تذكر أن عدد أعمدة الشبكة يجب أن يصل إلى اثني عشر لكل صف. أكثر من ذلك ، سوف تتكدس الأعمدة بغض النظر عن منفذ العرض.
مختلط: جوّال وتابلت وسطح المكتب
مثال
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
مسح يطفو
امسح العوامات (مع .clearfixالفصل) عند نقاط توقف محددة لمنع الالتفاف الغريب بمحتوى غير متساوٍ:
مثال
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
أعمدة المقاصة
انقل الأعمدة إلى اليمين باستخدام .col-md-offset-*الفئات. تزيد هذه الفئات الهامش الأيسر للعمود بمقدار * أعمدة:
مثال
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
</div>
الدفع والسحب - تغيير ترتيب العمود
قم بتغيير ترتيب أعمدة الشبكة باستخدام .col-md-push-*والفئات
.col-md-pull-*:
مثال
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>