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

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

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

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

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

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

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

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

.col-md-4
.col-md-4
.col-md-4

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

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

.col-md-3
.col-md-6
.col-md-3

دوه کالمونه

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

.col-md-8
.col-md-4

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

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


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

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

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

.col-md-8
.col-md-6
.col-md-6
.col-md-4

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

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

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

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

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

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4