کد نویسی قالب ریسپانسیو بوت استرپ قسمت پنجم

کد نویسی قالب ریسپانسیو بوت استرپ

با سلام خدمت شما دوستان عزیز

با قسمت پنجم از دوره پروژه محور طراحی قالب ریسپانسیو با بوت استرپ در خدمت شما هستیم. در این قسمت اقدام به پیاده سازی بیشتر بخش های اصلی خواهیم کرد.

ابتدا کادر سرچ رو با استفاده از کلاس های فرم بوت استرپ ایجاد میکنیم و سپس input مربوطه رو قرار میدیم. برای ایجاد دکمه جستجو به وبسایت بوت استرپ سری خواهیم زد و کلاس های مربوط به ایجاد دکمه رو نیز بررسی خواهیم کرد. پس از تکمیل فرم سرچ در کنار لوگو، به شما نشون میدم که چطور قالبتون رو با استفاده از مرورگر Chrome در دستگاه های مختلف مثل iPhone iPad و Google Nexus تست کنید و از ریسپانسیو بودن قالبتون مطمئن بشید.

پس از تست ریسپانسیو اقدام به ایجاد باکس اصلی محتوا خواهیم کرد. پس از ایجاد باکس محتوا به سراغ منوی اصلی خواهیم رفت و با استفاده از مقادیر % ای فاصله بین آیتم های منو رو تنظیم میکنیم تا مشکلی توی ریسپانسیو نداشته باشیم. بعد از نوشتن سی اس اس های مربوطه برای بهتر شدن Hover، اقدام به قرار دادن آیکن های بوت استرپ خواهیم کرد تا جلوه بهتری به منوی اصلی بده.

در قسمت بعدی هم اقدام به ایجاد نوار طوسی رنگ که وظیفه نشون دادن مکان حال حاضر کاربر رو داره به اضافه کادر سفید رنگ اصلی محتوا خواهیم کرد.

امیدوارم از این قسمت هم لذت ببرید!

با تشکر، عرفان صحاف نژاد، تیم آموزشی پی سی اسکیل

مدرس: عرفان صحاف نژاد
دیدگاه ها: 8
۱۳۹۵/۰۱/۰۸