با سلام خدمت شما دوستان عزیز وب سایت پرنیان طرح
در این بخش سیستم Grid بندی در بوت استرپ را به شما آموزش میدهیم.
سیستم Grid چیست ؟
با سیستم Grid در بوت استرپ میتوانید صفحات را بخش بندی نمایید هر صفحه را تا 12 ستون میتوانید تقسیم بندی کنید.
همچنین میتوانید ستون ها را با هم ترکیب کرده و در اندازه های دلخواه بخش بندی کنید.
سیستم Grid سیستم واکنشگرا و ریسپانسیو است و با توجه به تغییر اندازه سایز صفحه سایزش تغییر میکند.
کلاس های سیستم Grid :
کلاس های سیستم گرید 4 نوع است که تقسیم بندی سایز ها در بوت استرپ 4 با نسخه های قبل متفاوت است.
1- xs ( دستگاه های بسیار کوچک مثل تلفن ها ، صفحه نمایش های با عرض کمتر از 576 پیکسل )
2- sm ( دستگاه های کوچک مثل تبلت ها ، صفحه نمایش های با عرض مساوی یا بیشتر از 576 پیکسل )
3- md ( دستگاه های اندازه متوسط مثل لپ تاپ های کوچک ، صفحه نمایش های با عرض مساوی یا بیشتر از 768 پیکسل )
4- lg ( دستگاه های بزرگ مثل لپ تاپ ها و دسکتاپ ها ، صفحه نمایش های با عرض مساوی یا بزرگتر از 992 پیکسل )
5- xl (دستگاه های بسیار بزرگ مثل مانیتورهای سایز بزرگ ، صفحه نمایش های با عرض مساوی یا بیشتر از 1200 پیکسل )
کلاس های بالا میتوانند با یک دیگر ترکیب شوند و صفحات منعطف و پویایی را بسازند.
نکته : هر کلاس مقیاس بالایی دارد بنابراین اگر شما میخواهید اندازه های یکسانی را برای sm و md تنظیم کنید شما تنها باید مقدار sm را مشخص کنید.
containers :
ساختار گرید در بوت استرپ :
هر ردیف باید در یک کلاس container (عرض ثابت) یا container-fluid (عرض کامل) برای ساختن گروه های افقی ستون ها تعریف شود.
یک ردیف ایجاد میکنیم <div class=”row”> سپس ستون ها را ایجاد میکنیم ستون هایمان را با کلاس ها .col-*-* مشخص میکنیم.
جمع تعداد ستون ها در هر ردیف باید 12 باشد.
در کلاس بندی به جای اولین ستاره مقدارهایی که ریسپانسیو شدن را نشان میدهند ، مینویسیم : sm , md , lg , xl
دومین ستاره مقدار عددی را نشان میدهد ک از عدد یک تا دوازده باید مقدار بدهیم.
[php]
<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div>
[/php]
به جای اضافه کردن یک عدد به هر col ، اجازه دهید بوت استرپ طرح را کنترل کند برای ایجاد ستون هایی با عرض برابر اگر دو عنصر داشته باشید برای هر قطعه عرض 50 درصد ، اگر سه عنصر داشته باشید برای هر قطعه عرض 33/33 درصد و برای 4 عنصر عرض 25 درصد را تخصیص میدهد.
برای آشنایی بیشتر با کلاس بندی ها به مثال های زیر توجه کنید.
3 ستون با عرض مساوی :
در مثال زیر سه ستون با عرض مساوی بین عنصر 3 عنصر تقسیم کرده ایم که در هر دستگاه و هر اندازه صفحه نمایشی به صورت ریسپانسیو نمایش داده میشود.
[php]
[/php]
نتیجه ی مثال بالا را در این لینک ببینید.
دو ستون ریسپانسیو نامساوی :
در مثال زیر دو ستون با عرض نا مساوی ساخته ایم که با عرض های مختلف در دستگاه هایی مثل تبلت و صفحه نمایش های بسیار بزرگ تر از آن نمایش داده میشود.
[php]
[/php]
نتیجه ی مثال بالا را در این لینک ببینید.