نحوه نوشتن css – hack برای دستگاه های مختلف :
1 2 3 4 5 6 7 8 9 10 11 | /* Large desktop */ @media (min-width: 1200px) { ... } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } /* Landscape phones and down */ @media (max-width: 480px) { ... } |
مثلا فرض کنید در حالت موبایل میخواهید موقعیت یک کلاس را تغییر دهید ادامه مطلب…
در این قسمت بخش grid در بوتسترپ را با یک مثال آموزش میدم :
هر سطر در بوتسترپ با کلاس row مشخص میشود
هر سطر هم توسط کلاس span به 12 ستون تقسیم میشود
در واقع به کمک grid یک صفحه را به بخش هاس مختلف تقسیم میکنیم تا بتوانیم داخل هر بخش محتوای ( متن – عکس – ویدیو و.. ) قرار دهیم
طبق طرح زیر content ما 10 ستون و بخش سایدبار 2 ستون می باشد
یکی از مهمترین قسمتهای طراحی وب این هست که صفحات درست و بدون مشکل از همون اول به صورت مرتب در همه مرورگر ها نمایش داده شوند .
منتها اینکار خیلی زمان گیر و گاهی هم اعصاب خورد کن میشه. چپ و راست کردن این div ها، تغییر دادن موقعیتشون، خصوصا اگه در حال طراحی یک سایت چند زبانه باشی که یکیش هم راست به چپه!
این فریم وورک توسط توییتر ارایه شده و گسترش داده میشه..
این آموزش بر اساس نسخه Bootstrap 2.3.2 ایجاد شده که بعد از این آموزش نسخه 3 نیز آموزش داده خواهد شد .
- 1
- 1/1