مردان وردپرس آموزش بوت استرپ آموزش بوت استرپ ، شروع کار با بوت استرپ
آموزش بوت استرپ ، شروع کار با بوت استرپ

برای شروع سریع تر می توانید از MaxCDN استفاده نمایید. به این صورت که با قرار دادن آدرس زیر در header وبسایت، مستقیماً از مرجع رسمی بوت استرپ، کلاس ها و فایل ها را فراخوانی کنید. نکته قابل توجه در این روش این است که این کار، باعث کاهش سرعت بارگذاری سایت و در نتیجه کند شدن آن شود که توصیه نمی گردد )

همچنین افزودن برخی پلاگین های جاوا اسکریپت در انتهای صفحه و قبل از </body> توصیه می شود. دلیل انجام این کار، قابل شناسایی کردن دستورات و کلاس های بوت استرپ با تمامی مرورگرها می باشد.

الگوی آغازین:

ابتدا اطمینان حاصل کنید که صفجات شما با آخرین شیوه ها و متدهای طراحی، توسعه یافته اند. به این معنا که از html5 و متاتگ های استاندارد و همچنین viewport مناسب استفاده شده است. در زیر نمونه ای از آن را ببینید:

این ها، تمام مواردی است که برای صفحات کلی، نیاز دارید.

بوت استرپ، با تعداد انگشت شماری از سبک ها و تنظیماتی که نیاز به دانستن آن ها دارید، کار می کند؛ به طوری که تمام آن ها به صورت خاص شما را به استاندارد ترین سبک ها و صورت های موجود در مروگرها، هدایت می کنند.

متاتگ ریسپانیسو

بوت استرپ ابتدا برای صفحات موبایل، توسعه پیدا کرد؛ راهبردی که در آن ابتدا کدها برای موبایل بهینه سازی شد و اجزای لازم برای استفاده از مدیا کوئری ها در CSS فراهم گردید. برای اطمینان از عملکرد مناسب در همه دستگاه ها، قطعه کد زیر را به <head> اضافه کنید.

Box-sizing

برای اندازی گیری ساده تر در CSS، می توانیم مقدار box-sizing را از content-box به border-box تغییر دهیم.

این موضوع، تضمین می کند که padding  تأثیری بر روی عرض المان ها نخواهد گذاشت، اما می تواند بعضاً باعث برزو مشکلاتی در هم زمانی استفاده از نرم افزارهایی شبیه گوگل مپ و گوگل سرچ شود.

حال اگر بخواهید این تگ را در تبلت ها در سمت راست نمایش دهید باید یک مدیا کوئری دیگر اضافه کنید و استایل آن را به این صورت تعیین کنید:

 

تاریخ آخرین بروزرسانی : ۱۸ آبان ۱۳۹۶
منبع :‌ مردان وردپرس
سجاد رحمانی نژاد

کارشناس طراحی UI وب ، بیش از سه سال سابقه طراحی و کار اجرایی در سازمان های مختلف و به صورت مستقل ( Freelance ) همچنین مدرس دوره های طراحی وب در آموزشگاه های تهران و کرج.

Advertising MiSaCo.

نظرات خود را اینجا بنویسید

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.