طرح عمودی به افقی
همانطور که م یدانید گرید در بوت استرپ انواع مختلفی دارد؛ بسیار کوچک، کوچک، متوسط، بزرگ و بسیار بزرگ. ما می خواهیم در این مقاله و مقاله ی آینده این grid ها را با ذکر مثال بررسی کنیم.
ابتدا یک مثال ساده برایتان می آورم؛ می خواهیم یک grid ساده داشته باشیم که در ابتدا به صورت stacked (عناصر روی هم باشند) بوده و در صفحات بزرگ تر افقی شود و دیگر عناصر روی هم نباشند. در این مثال عرض را به صورت 50 درصد تقسیم کرده ایم اما در صفحات بزرگ این مقدار 100 درصد می شود و کل صفحه را می گیرد:
همانطور که می دانید شماره های کلاس *-col-sm.
نشان دهنده ی تعداد ستون هایی است (از 12 تا) که <div> اشغال می کند، بنابراین col-sm-6.
یعنی اشغال 6 ستون از 12 تا که یعنی 50 درصد صفحه. تعداد مجموع ستون های اشغال شده نیز نباید بیشتر از 12 بشود.
همچنین شما می توانید با تغییر container. به container-fluid. طراح هایی با عرض مشخص را به طرح های تمام عرض تبدیل کنید:
البته شما می توانید بدون تعیین کردن تعداد ستون ها *-col-size.
تنها کلاس col-size.
را برای ستون ها قرار دهید. بدین صورت تمام آن ها عرض یکسان دریافت خواهند کرد.
کلاس های گرید در بوت استرپ که آخرشان size دارند مشخص می کنند که در چه عرضی عنصر ما واکنش گرا شود:
grid های extra small (بسیار کوچک)
بسیار کوچک | کوچک | متوسط | بزرگ | بسیار بزرگ | |
پیشوند کلاس | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
عرض صفحه | کمتر از 576px | بیشتر یا مساوی 576px | بیشتر یا مساوی 768px | بیشتر یا مساوی 992px | بیشتر یا مساوی 1200px |
تصور کنید که یک طرح ساده و دو ستونه داریم و می خواهیم این عرض دو ستون به صورت 25 درصد و 75 درصد تقسیم شوند. برای این کار کلاس های زیر را به دو ستون خود اضافه می کنیم:
این مثال باعث می شود در تمام حالت ها (بسیار کوچک، کوچک، متوسط و…) ستون های ما به صورت 25 درصد و 75 درصد تقسیم شده باشند:
برای تقسیم ستون ها به صورت 33.3 درصد و 66.6 درصد باید از ستون های col-4.
و col-8.
و برای تقسیم ستون ها به صورت 50 درصد باید از دو کلاس col-6.
استفاده کنید:
در این حالت هم می توانید تنها با استفاده از col.
(بدون ذکر عدد) به ستون ها عرض یکسان دهید: