• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6246 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

دوره مجازی بوت استرپ (جلسه 16) : پروژه اول - طراحی قالب مدرن فلت به سبک Hero Header - بخش اول

20 2240 ۲۶ مرداد ۹۴
در جلسه شانزدهم و بخش اول می پرداریم به استفاده عملی از فریم ورک بوت استرپ در قالب طراحی یک قالب مدرن فلت به سبک Hero Header .در جلسات مربوط به پروژه های نهایی علاوه بر آشنایی کامل با ایجاد قالب های واکنشگرا تحت فریم ورک بوت با اقدام انواع پلاگین ها ,کدهای جاوااسکریپت و css برای هر چه بهتر شدن ظاهر قالب ها آشنا خواهیم شد و در طول این جلسات به مبحث سفارشی سازی بوت استرپ توسط css و جاوااسکریپت نیز خواهیم پرداخت و در کل موارد بسیار کاربردی رو بررسی خواهیم کرد...   مطالب مطرح شده در این جلسه عبارتند از :
  • طراحی منوی کاملا سفارشی
  • کنترل و ایجاد استایل های متفاوت برای منو ها در وضعیت های مختلف توسط جاوااسکریپت
  • کنترل نحوه نمایش المان ها در مدیا کوئری های خاص برای تغییر حالت نمایش آنها در اندازه های مختلف
  • طراحی اسلایدر قالب بصورت تمام صفحه (Hearo Header)
  • بررسی انیمیشن ها در css و ایجاد دکمه ای با انیمیشن خاص (محبوب)
این مطلب یک جلسه از دوره آموزش جامع فریمورک بوت استرپ (پایه تا پیشرفته) است و برای دیدن آن باید در این دوره ثبت نام کنید .
توضیحات : با توجه به افزایش تولید و فراگیر شدن استفاده از اسمارت فون ها و تبلت ها در چند سال اخیر و رابطه مستقیم آنها با دنیای مجازی و اینترنت مدیران و طراحان وب سایت ها ناچار به تعامل مطلوب با این نوع دستگاها شده اند. اما با استفاده از متدها و روش های طراحی سنتی این تعامل با چالش بزرگی روبرو شد و آن عدم ثبات در تطبیق المان ها موجود در قالب وب سایت ها با سایز های متفاوت صفحه نمایش این دستگاه ها بود که این امر باعث عدم پوشش صحیح تمام یا بخش های مختلف یک سایت بصورت استاندارد توسط این دستگاه ها می شد.به لطف این چالش و بخصوص صفحه نمایش هایی با ابعاد متفاوت تکنولوژی جدیدی با عنوان Responsive Design پا به عرضه ظهور گذاشت و تحول بسیار مطلوبی را در عرصه طراحی وب بوجود آورد. در راستای چنین تحولی و با توجه به کمبود و منابع آموزشی کامل در این زمینه در عرصه وب فارسی تصمیم گرفته ایم تا با یک دوره آموزشی بسیار کامل در زمینه تکنولوژی Responsive Design تحت یکی از فریم ورک های بسیار محبوب و البته قدرتمند در این زمینه با نام Bootstrap در خدمت علاقمندان به مبحث طراحی وب بخصوص طراحی واکنشگرا باشیم تا بتوانیم قدمی دیگر در راستای افزایش سطح علمی علاقمندان به مبحث وب و طراحی آن برداریم...
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 20 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    جعفر پیشدادی(۲۶ مرداد ۱۳۹۴)

    با سلام ..جهت اطلاع ..در لیست اخرین مطالب این درس یا پست وجود ندارد….یا نمایش داده نشده….

  • ‏‏

    سلام.
    افکت اسلایدر و ارتفاع تصویر ها (max-height: 100vh)در مرورگر های وب کیت اجرا نمی شود.

  • ‏‏

    سلام
    من قسمت منوی این پروژه را می خوام به یک قالب جوملا اضافه کنم همه چی درسته ولی در قسمت فایل jquary مشکلی هست. توی console بررسی کردم این ارور را میده.
    Uncaught TypeError: Failed to execute ‘scroll’ on ‘Window': 2 arguments required, but only 1 present.

  • ‏‏
    محمد مصری پور(۲۱ شهریور ۱۳۹۴)

    با عرض سلام و خسته نباشید خدمت استاد صالحی عزیز
    سوالم درباره ی اجرا نشدن افکت اسلایدر در کروم هستش چون در فایر فاکس درست عمل میکنه ولی در کروم افکت کار نمیکند و اسلایدر به صورت fade in تغییر نمیکنه
    خودم یه جستجو هایی کردم ولی به جایی نرسیدم شایدم درست سرچ نکردم !!؟؟
    به هر حال ممنون میشم اگر پاسخ بدید.
    با تشکر

    • ‏‏
      وحید صالحی(۲۱ شهریور ۱۳۹۴)

      دوست عزیز این مورد بر میگرده به سازگار کردن یکسری از خصیصه های css3 در مرورگرهای مختلف در جلسه هم اشاره کردیم نیازی به درگیر کردن خودتون با این مورد نیست در پروژه دوم اسلایدر دیگری رو معرفی می کنیم که به مراتب بهتر از اسلایدر پیش فرض بوت استرپ هست و امکانات بیشتری هم داره,سبک تره و کاملا واکنشگرا و با تمام مرورگر های از جمله ie 6 سازگاره که بهتره از اون استفاده کنید

  • ‏‏
    حمید رضا مصطفی زاده(۲۴ مهر ۱۳۹۴)

    سلام
    استاد این پری فیکس های که برای فلش های روی اسلایدر در نظر گرفتید برای مرورگر های مختلف به خوبی اجرا نمیشود!! علت توی transition هست اما کد صحیحش چی هست؟
    همچنین فلش های next و pre به صورت نقطه چین در موزیلا و به طور صحیح در کروم نمایش داده میشود

    • ‏‏
      وحید صالحی(۲۵ مهر ۱۳۹۴)

      مبحث transition به عنوان تمرین به عهده خودتون گذاشتیم چون مربوط به مبحث css میشه و باید روش تسلط لازم رو داشته باشید در گوگل جستجو کنید به راحتی جواب رو پیدا می کنید برای نقطه پین بودن فلش ها هم پون از فونت آیکون ها استفاده کردیم ممکنه فایل و cdn اون درست لود نمی کنید

  • ‏‏
    سید احسان عظیمی(۱۹ اردیبهشت ۱۳۹۵)

    ب نظرم اگه بحث انمیشین رو وارد پروژه نمیکردین خیلی بهتر بود

    • ‏‏
      وحید صالحی(۱۹ اردیبهشت ۱۳۹۵)

      مشکلی نداره شما می تونید ازش فاکتور بگیرید و استفاده نکنید اما در کنارش یک مورد رو که خیلی این روزها در طراحی قالب استفاده میشه و باب شده رو ه همین مبحث انیمیشن ها هست رو هم فرا گرفتید که فکر نمی کنم بد باشه…

  • ‏‏
    ali rezaee(۱۳ تیر ۱۳۹۵)

    با عرض سلام خدمت استاد صالحی
    برا اینکه بخواهیمindicators هایمان از سمت چپ به راست حرکت کند .حالتی پیش فرضی که دار د برعکس است.برای این کار باید چیکاری انجام دهم

  • ‏‏
    فاطمه صنیعی(۱۳ شهریور ۱۳۹۵)

    سلام
    من برای ساخت اسلایدر با مشکلی مواجه شده ام:
    اینکه وقتی از عکس هایی که شما در پروژه از آن ها استفاده میکنید عکس ها تمام صفحه(col-md-12) را پر نمیکند
    اما از عکس های دیگه که استفاده میکنم چنین مشکلی را ندارم
    لطفا راهنمایی کنید چون میخوام من هم پروژه شما را درست کنم
    با تشکر

  • ‏‏
    مصطفی کریم زاده(۲ آبان ۱۳۹۵)

    با سلام خدمت استاد.
    می خواستم بپرسم که در مدال ها اگه دکمه ای گذاشته بشه رسپانسیو هست؟اگه نیست چه کار باید کرد؟به طور کلی هر فیچری که داخل مدال قرار داده بشه واکنش گرا هست؟

  • ‏‏
    Masoud Azimi(۹ آذر ۱۳۹۵)

    با سلام خدمت حضرت استاد!!!
    آقای مهندس یه سوال برام پیش اومد!!!
    بخش منو توتگ بلاکی با کلاس container-fluid گذاشتیم
    بخش اسلایدر هم تو تگ بلاکی دیگه با کلاس container-fluid .

    پس چرا تصاویر اسلایدر زیر منو قرار گرفتن؟
    چرا نمیرن خط بعد؟!!

    ممنون

    • ‏‏
      وحید صالحی(۹ آذر ۱۳۹۵)

      سلام شما از کلای container استفاده کردید که خودش یک سطر رو بصورت کامل پر می کنه و موارد بعدی در زیرش قرار میگیره مباحث شبکه بندی رو با دقت مشاهده و مرور کنید

  • نکته : برای پاسخگویی سریعتر و بهتر، بخش نظرات این مطلب مختص پرسش و پاسخ های کاربران ثبت نامی در دوره ی دوره آموزش جامع فریمورک بوت استرپ (پایه تا پیشرفته) است .
    اگر قبلا در این دوره ثبت نام کرده اید پس از ورود به سایت می توانید تمامی پرسش و پاسخ ها و نظرات مطرح شده ی این مطلب را مشاهده و اگر سوالی دارید در همینجا مطرح کنید.

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram