أدناه التي جمعناها بعض الأمثلة الأساسية 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> انها محاولة لنفسك » عمودين مع اثنين من أعمدة متداخلة
يوضح المثال التالي كيفية الحصول على عمودين تبدأ في أقراص والتحجيم لأجهزة الكمبيوتر المكتبية الكبيرة، مع اثنين من الأعمدة آخر (بعرض متساوية) داخل عمود أكبر (في الهواتف النقالة، وهذه الأعمدة و أعمدتها المتداخلة كومة):
مثال
<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> انها محاولة لنفسك » نصيحة: تذكر أن أعمدة الشبكة يجب أن تضيف ما يصل الى اثني عشر لصف. أكثر من ذلك، سوف أعمدة كومة بغض النظر عن viewport .
مختلطة: موبايل، لوحة وسطح المكتب
مثال
<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-8</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">
.col-sm-5 .col-sm-offset-2 .col-md-6
.col-md-offset-0</div>
</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> انها محاولة لنفسك »