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

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

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

پێنج قات تۆڕ

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

.col-4
.col-4
.col-4
.کۆل-سم-4
.کۆل-سم-4
.کۆل-سم-4
.کۆل-مد-4
.کۆل-مد-4
.کۆل-مد-4
.کۆل-لگ-4
.کۆل-لگ-4
.کۆل-لگ-4
.کۆڵ-xl-4
.کۆڵ-xl-4
.کۆڵ-xl-4

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

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

.کۆل-مد-4
.کۆل-مد-4
.کۆل-مد-4

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

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

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

دوو ستوون

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

.کۆل-مد-8
.کۆل-مد-4

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

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


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

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

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

.کۆل-مد-8
.کۆل-مد-٦
.کۆل-مد-٦
.کۆل-مد-4

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

سیستەمی تۆڕی Bootstrap v4 پێنج قات لە پۆلەکانی هەیە: xs (زیادە بچووک)، sm (بچووک)، md (مامناوەند)، lg (گەورە)، و xl (زیادە گەورە). دەتوانیت نزیکەی هەر پێکهاتەیەک لەم پۆلانە بەکاربهێنیت بۆ دروستکردنی نەخشەی داینامیکیتر و نەرمتر.

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

.کۆل-12 .کۆل-مد-8
.کۆل-٦ .کۆل-مد-٤
.کۆل-٦ .کۆل-مد-٤
.کۆل-٦ .کۆل-مد-٤
.کۆل-٦ .کۆل-مد-٤
.col-6
.col-6

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

.col-12 .col-sm-6 .کۆل-lg-8
.کۆل-٦ .کۆل-لگ-٤
.کۆل-٦ .کۆل-سم-٤
.کۆل-٦ .کۆل-سم-٤
.کۆل-٦ .کۆل-سم-٤