۲ emad ta
فصل طراحی ریسپانسیو و واکنشگرا خلاصه جلسه پنجم - پیاده سازی grid system اختصاصی - شروع طراحی مینی فریم ورک css - بخش دوم
جامعه Html & 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 ;
}

 

emad ta ۱۳ شهریور ۱۳۹۹، ۲۲:۲۲

max-width  :  زمانی که نمی‌خواهیم عرض عنصری از یک مقدار مشخصی بیشتر شود می‌توانیم با استفاده از این ویژگی آن مقدار را برای عنصر تعیین کنیم.

 

min-width  : زمانی که نمی‌خواهیم عرض عنصری از یک مقدار مشخصی کمتر شود می‌توانیم با استفاده از این ویژگی آن مقدار را برای عنصر تعیین کنیم.

emad ta ۱۴ مهر ۱۳۹۹، ۰۳:۳۸