CSS

دریافت کدهای CSS مدیاکوئری Twitter Bootstrap

تبلیغات
کانال تلگرام فتولیا
4 سوالی شهرداری

من کلا Twitter Bootstrap رو دوست دارم!وقتی با استفاده از اون توسعه می دادم به این موضوع رسیدم . ولی معمولا همیشه نیاز داشتم که استایل های خودم رو در سایزهای مختلف موبایل تبلت و مانیتور اعمال کنم .

همونطور که احتمالا می دونید این کار بوسیله Media Query ها در CSS انجام میشه و اصطلاحا سایت رو ریسپانسیو یا واکنش گرا می کنیم. البته خود بوت استرپ هم از این روش استفاده می کنه . در این مطلب می خواهیم کدهای Media Query هر دو نسخه  بوت استرپ یعنیBootstrap 2 (2.3.2) وBootstrap 3 رو برای شما قرار بدیم تا در پروژه های آینده تون راحت تر کار ریسپانیو کردن رو انجام بدید.

نقاط شکست (Breakpoints) در Bootstrap 3

Bootstrap3 یک فریم ورک فرونت اند و موبایل فرست (Mobile First) است. من در زیر ترتیب درست قرارگیری مدیاکوئری ها را برای متدولوژی موبایل فرست رعایت کردم به علاوه در زیر آن به صورت معمولی نیز آنها را قرار دادم که از نظر تکنیکی فرقی با هم ندارند .

Min-Width : به هر مقداری که بزرگتر یا مساوی مقدار داده شده باشد اشاره می کند.در اینجا منظور از مقدار عرض صفحه است . یعنی اگر حداقل عرض صفحه بزرگتر یا مساوی این بود …

Max-Width : به هر مقداری که کوچکتر یا مساوی مقدار داده شده باشد اشاره می کند.یعنی اگر حداکثر عذض صفحه کوچکتر یا مساوی این بود …

نقاط شکست (BREAKPOINTS) در BOOTSTRAP ۲٫۳٫۲

منظور Mobile First که در بالا به آن اشاره شد یک نوع متد طراحی سایت است که در آن ابتدا سایت را برای موبایل طراحی می کنند و سپس به سمت نمایشگرهای بزرگتر می روند . چون طرح سایت برای موبایل ساده تر است پس کدهای کمتری از مانیتورهای سایز بزرگ می طلبد .مزیت این کار اینست که حجم کدهای کم می شود و از کدهای تکراری اجتناب می گردد و طراحی مقداری سریعتر انجام می شود.اطلاعات بیشتر در اینجا و اینجا

اگر شما نیز راه دیگری سراغ دارید که از این روش بهتر است خوشحال می شوم که در نظرات بشنوم .

منبع

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *