112 lines
2.5 KiB
Markdown
112 lines
2.5 KiB
Markdown
---
|
|
title: Grid Examples
|
|
localeTitle: أمثلة الشبكة
|
|
---
|
|
## أمثلة الشبكة
|
|
|
|
#### شجرة أعمدة متساوية
|
|
|
|
```html
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
One of three columns
|
|
</div>
|
|
<div class="col-sm">
|
|
One of three columns
|
|
</div>
|
|
<div class="col-sm">
|
|
One of three columns
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
ينشئ المثال أعلاه ثلاثة أعمدة متساوية العرض على الأجهزة الصغيرة والمتوسطة والكبيرة ، والكبير جدًا باستخدام فئات الشبكة المحددة مسبقًا. يتم توسيط تلك الأعمدة في الصفحة مع الأصل. `.container` .
|
|
|
|
#### ثلاثة أعمدة غير متساوية
|
|
|
|
`
|
|
<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>
|
|
`
|
|
|
|
#### مختلط موبايل وسطح المكتب
|
|
|
|
\`\` \`أتش تي أم أل
|
|
|
|
.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
|
|
|
|
\`\` \`
|
|
|
|
#### معلومات اكثر:
|
|
|
|
[Bootstrap الشبكة](https://getbootstrap.com/docs/4.0/layout/grid/) |