سیستم Grid در Bootstrap
سیستم grid در بوت استرپ مبنی بر flexbox ایجاد شده است و به شما اذن میدهد تا 12 ردیف هم
طراحی سایت در مشهد در یک شیت ساخت‌و‌ساز نمائید. ولی در حالتی که نمیخواهید از 12 ردیف به کارگیری نمایید میتوانید از تعداد کمتری منفعت ببرید.
این سیستم grid به صورت تحت میباشد:
bootstrap grid system
نکته ای که بایستی در ذهن داشته باشید این میباشد که آحاد ردیف ها بایستی 12 بشود.
در حالتی‌که نمی دانید grid های CSS چیست توضیح مختصری برایتان می دهم؛ ماژول Grid در CSS به شما اذن میدهد تا برنامه ای داشته باشید که مبنی بر یک Grid (در معنای «کانال توری» یا این که «مشبک») باشد. به تصویر پایین نگاه نمائید:
تفاوت صفحه های پیاده سازی گردیده با CSS Grid
تفاوت صفحه ها پیاده سازی گردیده با CSS Grid
در‌این تصویر دو شیت ی اینترنت را میبینید. برگه ی سمت راست مبنی بر Grid پیاده سازی شد‌ه‌است و همان گونه که گفتیم Grid به صورت یک کانال ی توری مانند و مشبک میباشد و منزل هایی را که میبینید، صورت میدهد. درحال حاضر میتوانید موادتشکیل دهنده خویش را با تمرکز فراوان درون این منزل ها قرار دهید.
در‌حالتی که از Grid استعمال فرمائید دیگر نیازی به به کارگیری از float و رئیس فضای توسعه یافته نخواهید داشت. در واقع هنگامی که برای شیت ی خویش grid پیاده سازی نمائید نیازی وجود ندارد نگران مکان ارکان باشید به دلیل آنکه ارکان نمی توانند از grid خویش (منزل ی مشبکی مربوطه) بیرون شوند.
نکته: ویژگی Grid که به طور پیش فرض در CSS وجود دارااست در مرورگر Internet Explorer 15 و قبلی خیس شغل نمی نماید البته Grid هایی وجود دارا هستند که به وسیله گسترش دهندگان تحت عنوان کدهای غیر وابسته تشکیل‌شده اند. شما میتوانید با دانلود کردن این نوع Grid ها از آنها در هر مرورگری به کار گیری نمائید.
به صورت نمونه یک کدام از کدهای Grid دارای اسم و رسم در وب simplegrid اسم داراست که میتوانید به مراجعه به تارنما آن، کد CSS اش را دانلود نمائید، اما این قابلیت و امکان به طور پیش فرض در bootstrap وجود داراست بدین ترتیب ما نیازی به دانلود کد خاصی به جز bootstrap نداریم.
کلاس های grid
کلاس های grid در بوت استرپ 4، راز عده 5 کلاس می‌باشند:
.col- برای دستگاه های بسیار خرد با سایز کاغذ ی پایین 576 پیکسل
.col-sm- برای دستگاه های خرد با سایز ورقه ی متساوی با یا این که کمتر از 576 پیکسل
.col-md- برای دستگاه های میانگین با سایز کاغذ ی متساوی با یا این که بیشتر از 768 پیکسل
.col-lg- برای دستگاه های والا با سایز کاغذ ی هم اندازه با یا این که بیشتر از 992 پیکسل
.col-xl- برای دستگاه های بسیار بلندمرتبه با سایز ورقه ی معادل با یا این که بیشتر از 1200 پیکسل
کلاس های بالا را می قدرت جهت پویا خیس کردن طرح خویش در هم مخلوط کنیم.
نکته: هر کلاس مقیاس پذیر میباشد (تبارک و خرد می‌گردد) براین اساس در صورتی‌که می‌خواهید از اندازه های یکسانی برای sm و md به کار گیری نمائید میتوانید فقط sm را قرار دهید.
به صورت نمونه یک ستون می‌سازیم (<\"div class=\"row>) و آن‌گاه تعداد ردیف های دلخواه را اضافه می‌کنیم (تگ هایی که از ساختار *-*-col. پیروی می نمایند) درین ساختار ستاره ی نخستین (*) علامت دهنده ی برخورد گرا بودن (sm, md, lg یا این که xl) و ستاره ی دوم عددی میباشد که توده آن برای هر ستون موازی می بایست 12 باشد.
همینطور می شود به مکان افزودن عدد به col، اذن بدهیم که خویش بوت استرپ طرح را مدیر نماید (دو ردیف \"col\" با پهنا 50 درصد، یا این که سه ردیف با پهنا 33.33 درصد یا این که چهار ردیف با پهنا 25 درصد و غیره می سازد). همینطور می اقتدار از ساختار col-sm|md|lg|xl. بهره برد تا ردیف ها عکس العمل گرا شوند.
بیایید یک‌سری نمونه دیگر را ببینیم.
سه ردیف هم اندازه: در‌این نمونه میخواهیم سه ردیف داشته باشیم که دارنده پهنا هم اندازه می باشند:
Three equal width columns
Note: Try to add a new div with class=\"col\" inside the row class - this will create four equal-width columns.
.col
.col
.col
مشاهده ی خروجی در JSBin
ردیف های برخورد گرا: در‌این نمونه میخواهیم چهار ردیف هم پهنا ساخت کنیم که آغاز اندازه ی کوچکی دارا‌هستند ولی برای صفحه های بزرگتر نیز مقیاس می پذیرند. در صفحه ها موبایل هم پا یا این که به صورت تمام در صفحاتی که خرد خیس از 576px باشند، ردیف ها به صورت پیش فرض روی هم قرار میگیرند.