د بوټسټریپ گرډ مثالونه

د بوټسټریپ گرډ سیسټم دننه د جوړولو سره د آشنا کیدو لپاره د اصلي گرډ ترتیبونه.

په دې مثالونو کې .themed-grid-colټولګي په کالمونو کې اضافه شوي ترڅو ځینې موضوعات اضافه کړي. دا یو ټولګی نه دی چې په ډیفالټ بوټسټریپ کې شتون لري.

د ګریډ پنځه درجې

د بوټسټریپ گرډ سیسټم لپاره پنځه درجې شتون لري، یو د هرې وسیلو لپاره چې موږ یې ملاتړ کوو. هر ټایر د لږترلږه لید پورټ اندازې څخه پیل کیږي او په اتوماتيک ډول په لویو وسیلو باندې پلي کیږي پرته لدې چې له پامه غورځول شي.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

درې مساوي کالمونه

درې مساوي پلن کالمونه ترلاسه کړئ چې په ډیسټاپونو کې پیل کیږي او لوی ډیسټاپونو ته اندازه کول . په ګرځنده وسیلو ، ټابلیټونو او لاندې کې ، کالمونه به په اوتومات ډول سټیک شي.

.col-md-4

درې مساوي کالم بدیل

د ټولګیو په کارولو سره .row-cols-*، تاسو کولی شئ په اسانۍ سره د مساوي کالمونو سره یو گرډ جوړ کړئ.

.colد ماشوم .row-cols-md-3

درې غیر مساوي کالمونه

درې کالمونه ترلاسه کړئ چې په ډیسټاپونو کې پیل کیږي او د مختلف پراخوالي لوی ډیسټاپونو ته اندازه کول . په یاد ولرئ، د گرډ کالمونه باید د یو افقی بلاک لپاره تر دولسو پورې اضافه کړي. له دې څخه ډیر، او کالمونه د ویوپورټ په پام کې نیولو سره پیل کوي.

.col-md-3

.col-md-6

.col-md-3

دوه کالمونه

دوه کالمونه ترلاسه کړئ چې په ډیسټاپونو کې پیل کیږي او لوی ډیسټاپونو ته اندازه کول .

.col-md-8

.col-md-4

بشپړ عرض، واحد کالم

د بشپړ چوکۍ عناصرو لپاره د ګریډ ټولګیو ته اړتیا نشته.

دوه کالمونه د دوه نیست شوي کالمونو سره

د اسنادو له مخې، ځړول اسانه دي - یوازې په موجوده کالم کې د کالمونو قطار واچوئ. دا تاسو ته دوه کالمونه درکوي چې په ډیسټاپونو کې پیل کیږي او لوی ډیسټاپونو ته اندازه کیږي ، په لوی کالم کې د نورو دوه (مساوي عرض) سره.

د ګرځنده وسیلو په اندازو، ټابلیټونو او ښکته کې، دا کالمونه او د دوی ځړول شوي کالمونه به سټیک شي.

.col-md-8

.col-md-6

.col-md-4

مخلوط: ګرځنده او ډیسټاپ

د بوټسټراپ v5 گرډ سیسټم شپږ درجې ټولګي لري: xs (اضافي کوچنی، دا ټولګي انفکس نه کارول کیږي)، sm (کوچنی)، md (منځنی)، lg (لوی)، xl (x-لوی)، او xxl (xxl) - لوی). تاسو کولی شئ د دې ټولګیو نږدې هر ترکیب وکاروئ ترڅو ډیر متحرک او انعطاف منونکي ترتیبونه رامینځته کړئ.

د ټولګیو هر طبقه اندازه کوي، پدې معنی چې که تاسو د md، lg، xl او xxl لپاره د ورته عرضونو ترتیب کولو پلان لرئ، تاسو یوازې د md مشخص کولو ته اړتیا لرئ.

.col-md-8

.col-6 .col-md-4

.col-6

مخلوط: ګرځنده، ټابلیټ، او ډیسټاپ

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

غوټۍ

د .gx-*ټولګیو سره، افقی ګټرونه تنظیم کیدی شي.

.colد .gx-4نالیو سره

.gy-*د عمودی ګټرونو کنټرول لپاره ټولګیو څخه کار واخلئ .

.colد .gy-4نالیو سره

د .g-*ټولګیو سره، په دواړو خواوو کې ګټرونه تنظیم کیدی شي.

.colد .g-3نالیو سره

کانتینرونه

په Bootstrap v4.4 کې اضافه شوي اضافي ټولګي هغه کانټینرونو ته اجازه ورکوي چې تر یوې ځانګړې وقفې پورې 100٪ پراخه وي. v5 یو نوی وقفه اضافه کوي xxl.

.کنټینر

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

کانټینر - مایع