نموونەی تۆڕی بووتستراپ

نەخشەی تۆڕی بنەڕەتی بۆ ئەوەی ئاشنا بیت بە بیناسازی لەناو سیستەمی تۆڕی Bootstrap.

لەم نموونانەدا .themed-grid-colپۆلەکە زیاد دەکرێت بۆ ستوونەکان بۆ زیادکردنی هەندێک تەوەر. ئەمە پۆلێک نییە کە بە شێوازی پێشوەختە لە Bootstrap بەردەست بێت.

پێنج قات تۆڕ

پێنج قات هەیە بۆ سیستەمی تۆڕی Bootstrap، یەکێکیان بۆ هەر مەودای ئامێرێک کە پشتگیری دەکەین. هەر قاتێک لە کەمترین قەبارەی دەرچەی بینین دەست پێدەکات و بە شێوەیەکی ئۆتۆماتیکی بۆ ئامێرە گەورەکان کاردەکات مەگەر سەرپێچی نەکرێت.

.col-4

.کۆل-سم-4

.کۆل-مد-4

.کۆل-لگ-4

.کۆڵ-xl-4

.کۆل-xxl-4

سێ ستوونی یەکسان

سێ ستوونی پانایی یەکسان بەدەستبهێنە کە لە دەسکتۆپەکانەوە دەست پێدەکات و گەورە دەکرێت بۆ دەسکتۆپی گەورە . لەسەر ئامێرە مۆبایلەکان و تابلێتەکان و خوارەوە، ستوونەکان بە شێوەیەکی ئۆتۆماتیکی لەسەر یەک کۆدەبنەوە.

.کۆل-مد-4

سێ ستوونی یەکسان بەدیل

بە بەکارهێنانی .row-cols-*پۆلەکان دەتوانیت بە ئاسانی تۆڕێک دروست بکەیت کە ستوونی یەکسان بێت.

.colمنداڵی .row-cols-md-3

سێ ستوونی نایەکسان

سێ ستوون بەدەست بهێنە کە لە دەسکتۆپەکانەوە دەست پێدەکات و گەورە دەکرێت بۆ دەسکتۆپی گەورە بە پانایی جیاواز. لەبیرت بێت، ستوونەکانی تۆڕ دەبێ تا دوانزە بۆ یەک بلۆکی ئاسۆیی کۆبکەنەوە. زیاتر لەوە، و ستوونەکان دەست دەکەن بە کۆکردنەوە گرنگ نییە ڤیوپۆرتەکە.

.کۆل-مد-3

.کۆل-مد-٦

.کۆل-مد-3

دوو ستوون

دوو ستوون بەدەست بهێنە کە لە دەسکتۆپەکانەوە دەست پێدەکات و گەورە دەکرێت بۆ دەسکتۆپی گەورە .

.کۆل-مد-8

.کۆل-مد-4

پانایی تەواو، تاکە ستوون

هیچ پۆلێکی تۆڕ پێویست نییە بۆ توخمە تەواو پانەکان.

دوو ستوون بە دوو ستوونی هێلانەکراو

بەپێی بەڵگەنامەکان، هێلانەکردن ئاسانە-تەنها ڕیزێک لە ستوونەکان لەناو ستوونێکی هەبوودا دابنێ. ئەمەش دوو ستوونت پێدەدات کە لە دەسکتۆپەکانەوە دەست پێدەکات و گەورە دەکات بۆ دەسکتۆپی گەورە , لەگەڵ دوو ستوونی تر (پانی یەکسان) لەناو ستوونی گەورەتردا.

لە قەبارەی ئامێرە مۆبایلەکان، تابلێتەکان و خوارەوە، ئەم ستوونانە و ستوونە هێلانەکراوەکانیان لەسەر یەک کۆدەبنەوە.

.کۆل-مد-8

.کۆل-مد-٦

.کۆل-مد-4

تێکەڵاو: مۆبایل و دەسکتۆپ

سیستەمی تۆڕی Bootstrap v5 شەش قات لە پۆلەکانی هەیە: xs (زیادە بچووک، ئەم ئینفیکسە پۆلە بەکارناهێنرێت)، sm (بچووک)، md (مامناوەند)، lg (گەورە)، xl (x-گەورە)، و xxl (xx -گەورە). دەتوانیت نزیکەی هەر پێکهاتەیەک لەم پۆلانە بەکاربهێنیت بۆ دروستکردنی نەخشەی داینامیکیتر و نەرمتر.

هەر قاتێک لە پۆلەکان گەورە دەبێت، واتە ئەگەر پلانت هەیە هەمان پاناییەکان بۆ md و lg و xl و xxl دابنێیت، تەنها پێویستە md دیاری بکەیت.

.کۆل-مد-8

.کۆل-٦ .کۆل-مد-٤

.col-6

تێکەڵاو: مۆبایل، تابلێت، و دەسکتۆپ

.کۆل-سم-٦ .کۆل-لگ-٨

.کۆل-٦ .کۆل-لگ-٤

.کۆل-٦ .کۆل-سم-٤

کانیاوەکان

بە .gx-*پۆلەکان دەتوانرێت کانییە ئاسۆییەکان ڕێکبخرێت.

.colبە .gx-4کانیاوەکانەوە

پۆلەکان بەکاربهێنە .gy-*بۆ کۆنترۆڵکردنی کانییە ڕاستەکان.

.colبە .gy-4کانیاوەکانەوە

بە .g-*پۆلەکان دەتوانرێت کانیاوەکان بە هەردوو ئاراستەکە ڕێکبخرێن.

.colبە .g-3کانیاوەکانەوە

دەفرەکان

پۆلە زیادەکان کە لە Bootstrap v4.4 زیادکراون ڕێگە بەو کۆنتێنەرانە دەدەن کە 100% پانن تا خاڵێکی شکاندنی دیاریکراو. xxlv5 خاڵی شکاندنی نوێ زیاد دەکات .

.دەفر

.دەفر-sm

.دەفر-md

.دەفر-lg

.دەفر-xl

.دەفر-xxl

.شلەی دەفر