2.5 KiB
title | localeTitle |
---|---|
Grid Examples | أمثلة الشبكة |
أمثلة الشبكة
شجرة أعمدة متساوية
`
ينشئ المثال أعلاه ثلاثة أعمدة متساوية العرض على الأجهزة الصغيرة والمتوسطة والكبيرة ، والكبير جدًا باستخدام فئات الشبكة المحددة مسبقًا. يتم توسيط تلك الأعمدة في الصفحة مع الأصل. .container
.
ثلاثة أعمدة غير متساوية
`
اثنان أعمدة غير متساوية
`
أعمدة مع اثنين من الأعمدة المتداخلة
`
مختلط موبايل وسطح المكتب
`` `أتش تي أم أل
.col-xs-7 .col-sm-6 .col-lg-8
.col-xs-5 .col-sm-6 .col-lg-4
.col-xs-6 .col-sm-8 .col-lg-10
.col-xs-6 .col-sm-4 .col-lg-2
``#### Clear Floats
Clear floats (with the .clearfix
class) at specific breakpoints to prevent strange wrapping with uneven content:
``
أتش تي أم أل
العمود 1 تغيير حجم نافذة المتصفح لمعرفة التأثير.
العمود 2
العمود 3
العمود 4
#### Offsetting Columns Move columns to the right using `.col-md-offset-*` classes. These classes increase the left margin of a column by * columns:
أتش تي أم أل
.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
#### Push And Pull - Change Column Ordering Change the order of the grid columns with `.col-md-push-*` and `.col-md-pull-*` classes:
أتش تي أم أل
.col-sm-4 .col-sm-push-8
.col-sm-8 .col-sm-pull-4
`` `