آموزش سیستم گرید در bootstrap
ستون بندی صفحات وب سایت توسط سیستم 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
دومین ستاره مقدار عددی را نشان میدهد ک از عدد یک تا دوازده باید مقدار بدهیم.
1 2 3 4 5 | <span class="tagnamecolor"><span class="tagcolor"><</span>div<span class="attributecolor"> class<span class="attributevaluecolor">="row"</span></span><span class="tagcolor">></span></span> <span class="tagnamecolor"><span class="tagcolor"><</span>div<span class="attributecolor"> class<span class="attributevaluecolor">="col-*-*"</span></span><span class="tagcolor">></span></span><span class="tagnamecolor"><span class="tagcolor"><</span>/div<span class="tagcolor">></span></span> <span class="tagnamecolor"><span class="tagcolor"><</span>div<span class="attributecolor"> class<span class="attributevaluecolor">="col-*-*"</span></span><span class="tagcolor">></span></span><span class="tagnamecolor"><span class="tagcolor"><</span>/div<span class="tagcolor">></span></span> <span class="tagnamecolor"><span class="tagcolor"><</span>div<span class="attributecolor"> class<span class="attributevaluecolor">="col-*-*"</span></span><span class="tagcolor">></span></span><span class="tagnamecolor"><span class="tagcolor"><</span>/div<span class="tagcolor">></span></span> <span class="tagnamecolor"><span class="tagcolor"><</span>/div<span class="tagcolor">></span></span> |
به جای اضافه کردن یک عدد به هر col ، اجازه دهید بوت استرپ طرح را کنترل کند برای ایجاد ستون هایی با عرض برابر اگر دو عنصر داشته باشید برای هر قطعه عرض ۵۰ درصد ، اگر سه عنصر داشته باشید برای هر قطعه عرض ۳۳/۳۳ درصد و برای ۴ عنصر عرض ۲۵ درصد را تخصیص میدهد.
برای آشنایی بیشتر با کلاس بندی ها به مثال های زیر توجه کنید.
۳ ستون با عرض مساوی :
در مثال زیر سه ستون با عرض مساوی بین عنصر ۳ عنصر تقسیم کرده ایم که در هر دستگاه و هر اندازه صفحه نمایشی به صورت ریسپانسیو نمایش داده میشود.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div><body></div> <div></div> <div><div class="container-fluid"></div> <div> <h1>Three equal width columns</h1></div> <div> <p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.</p></div> <div> <div class="row"></div> <div> <div class="col" style="background-color:lavender;">.col</div></div> <div> <div class="col" style="background-color:orange;">.col</div></div> <div> <div class="col" style="background-color:lavender;">.col</div></div> <div> </div></div> <div></div></div> <div></div> <div></body></div> |
نتیجه ی مثال بالا را در این لینک ببینید.
دو ستون ریسپانسیو نامساوی :
در مثال زیر دو ستون با عرض نا مساوی ساخته ایم که با عرض های مختلف در دستگاه هایی مثل تبلت و صفحه نمایش های بسیار بزرگ تر از آن نمایش داده میشود.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div><body></div> <div></div> <div><div class="container-fluid"></div> <div> <h1>Two Unequal Responsive Columns</h1></div> <div> <p>Resize the browser window to see the effect.</p></div> <div> <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p></div> <div> <div class="row"></div> <div> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div></div> <div> <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div></div> <div> </div></div> <div></div></div> <div></div> <div></body></div> |
نتیجه ی مثال بالا را در این لینک ببینید.
پاسخی بگذارید