با سلام خدمت شما دوستان عزیز وب سایت پرنیان طرح
در این بخش سیستم Grid بندی در بوت استرپ را به شما آموزش میدهیم.
سیستم Grid چیست ؟
با سیستم Grid در بوت استرپ میتوانید صفحات را بخش بندی نمایید هر صفحه را تا ۱۲ ستون میتوانید تقسیم بندی کنید.
همچنین میتوانید ستون ها را با هم ترکیب کرده و در اندازه های دلخواه بخش بندی کنید.
سیستم Grid سیستم واکنشگرا و ریسپانسیو است و با توجه به تغییر اندازه سایز صفحه سایزش تغییر میکند.
Grid
کلاس های سیستم Grid :
کلاس های سیستم گرید ۴ نوع است که تقسیم بندی سایز ها در بوت استرپ ۴ با نسخه های قبل متفاوت است.
۱- xs ( دستگاه های بسیار کوچک مثل تلفن ها ، صفحه نمایش های با عرض کمتر از ۵۷۶ پیکسل )
۲- sm ( دستگاه های کوچک مثل تبلت ها ، صفحه نمایش های با عرض مساوی یا بیشتر از ۵۷۶ پیکسل )
۳- md ( دستگاه های اندازه متوسط مثل لپ تاپ های کوچک ، صفحه نمایش های با عرض مساوی یا بیشتر از ۷۶۸ پیکسل )
۴- lg ( دستگاه های بزرگ مثل لپ تاپ ها و دسکتاپ ها ، صفحه نمایش های با عرض مساوی یا بزرگتر از ۹۹۲ پیکسل )
۵- xl (دستگاه های بسیار بزرگ مثل مانیتورهای سایز بزرگ ، صفحه نمایش های با عرض مساوی یا بیشتر از ۱۲۰۰ پیکسل )
کلاس های بالا میتوانند با یک دیگر ترکیب شوند و صفحات منعطف و پویایی را بسازند.
نکته : هر کلاس مقیاس بالایی دارد بنابراین اگر شما میخواهید اندازه های یکسانی را برای sm و md تنظیم کنید شما تنها باید مقدار sm را مشخص کنید.
کلاس های گرید
containers :
ساختار گرید در بوت استرپ :
هر ردیف باید در یک کلاس container (عرض ثابت) یا container-fluid (عرض کامل) برای ساختن گروه های افقی ستون ها تعریف شود.
یک ردیف ایجاد میکنیم <div class=”row”> سپس ستون ها را ایجاد میکنیم ستون هایمان را با کلاس ها .col-*-* مشخص میکنیم.
جمع تعداد ستون ها در هر ردیف باید ۱۲ باشد.
در کلاس بندی به جای اولین ستاره مقدارهایی که ریسپانسیو شدن را نشان میدهند ، مینویسیم : sm , md , lg , xl
دومین ستاره مقدار عددی را نشان میدهد ک از عدد یک تا دوازده باید مقدار بدهیم.
[php]
<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div>
[/php]
به جای اضافه کردن یک عدد به هر col ، اجازه دهید بوت استرپ طرح را کنترل کند برای ایجاد ستون هایی با عرض برابر اگر دو عنصر داشته باشید برای هر قطعه عرض ۵۰ درصد ، اگر سه عنصر داشته باشید برای هر قطعه عرض ۳۳/۳۳ درصد و برای ۴ عنصر عرض ۲۵ درصد را تخصیص میدهد.
برای آشنایی بیشتر با کلاس بندی ها به مثال های زیر توجه کنید.
colbandi
۳ ستون با عرض مساوی :
در مثال زیر سه ستون با عرض مساوی بین عنصر ۳ عنصر تقسیم کرده ایم که در هر دستگاه و هر اندازه صفحه نمایشی به صورت ریسپانسیو نمایش داده میشود.
[php]
[/php]
نتیجه ی مثال بالا را در این لینک ببینید.
دو ستون ریسپانسیو نامساوی :
در مثال زیر دو ستون با عرض نا مساوی ساخته ایم که با عرض های مختلف در دستگاه هایی مثل تبلت و صفحه نمایش های بسیار بزرگ تر از آن نمایش داده میشود.
[php]
[/php]
نتیجه ی مثال بالا را در این لینک ببینید.