فصل طراحی ریسپانسیو و واکنشگرا خلاصه جلسه پنجم - پیاده سازی grid system اختصاصی - شروع طراحی مینی فریم ورک css - بخش دوم
بسم الله الرحمن الرحیم
container در واقع در بر گیرند المان ها و سیستم گرید ما هستش
برای وسط چین کردن کانتینر هامون مقادیر مارجین چپ و راست رو برابر auto قرار میدهیم
زمانی که ما یک کانتینر داریم و میخاهیم سیستم گرید رو برای بخش بندی یک ستون ها و المان هامون داشته باشیم هر سکشن یا بخش رو قرار میدهیم داخل یک ردیف یا row و سیستم های گریدمون رو در داخل آن قرار میدهیم یعنی در کل بیایم و سیستم هامون رو در داخل ردیف ها قرار دهیم تا هم جدا باشند و هم خواستیم کنترلشون کنیم در داخل توسط سودو کلای هایی مثل After
برای شناور سازی ها از float ها استفاده میکنیم برای مثال از float :right در این پروژه استفاده شده است
[ class ^= " col " ] {
float : right ;
}
استفاده از حاشیه ها offset در جاهایی که میایم و col ها رو تعریف میکنیم اون ها رو هم به ترتیب قرار میدهیم برای مثال
.col-s-offset-1 {
margin-rihgt : 8.33 %
}در هنگام استفاده از offset ها باید تعداد ستون هامون زوج باشد
برای ریسپانسیو کردن تصاویر کافی استایل های زیر را بهش بدهیم
img-responsive {
width : 100% ;
height : auto ;
}
max-width : زمانی که نمی خواهیم عرض عنصری از یک مقدار مشخصی بیشتر شود می توانیم با استفاده از این ویژگی آن مقدار را برای عنصر تعیین کنیم.
min-width : زمانی که نمی خواهیم عرض عنصری از یک مقدار مشخصی کمتر شود می توانیم با استفاده از این ویژگی آن مقدار را برای عنصر تعیین کنیم.