%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده (تمدید شد)
سبد (0)

آموزش ساخت قالب Responsive

درباره مدرس

تضمین کیفیت

با یک کلیک بیاموز
توجه: کیفیت این محصول توسط بیـــاموز تضمین شده است.

معرفی اجمالی محصول

در این آموزش با استفاده از بوتسترپ، یک قالب Responsive که در تمامی دستگاه ها به خوبی نمایش داده می شود را آموزش خواهیم داد

دیگر مشخصات

تعداد دانشجو :
20184 نفر
حجم فایل : 560 مگابایت
مدت زمان : 03:01:18
شماره درس : 1, 2, 3, 4, 5, 6, 7
نوع آموزش : تصویری و کاملاً فارسی
مقدار: 
15,000 تومان
32,000 تومان
توضیحات کامل

آموزش ساخت قالب Responsive در بوتسترپ

در این آموزش با استفاده از بوتسترپ، یک قالب Responsive که در تمامی دستگاه ها به خوبی نمایش داده می شود را آموزش خواهیم داد

- پیش نیاز ها:  HTML - CSS - Bootstrap

- پیش نمایش: مشاهده پیش نمایش یا Demo


آموزش ساخت قالب Responsive در بوتسترپ

در این آموزش شما می توانید نحوه ی ساخت یک قالب واکنش گرا را به وسیله ی بوتسترپ، فرا بگیرید. 

این قالب در تمامی دستگاه ها به خوبی نمایش داده می شود و به طور اتوماتیک برای هر دستگاه، اندازه ی آن تنظیم می شود.

 نحوه ی آموزش این قالب به صورت خط به خط می باشد، بعنوان مثال برای ایجاد نوار هدایتی قالب، آموزش به صورت زیر می باشد:

27- ایجاد نوار هدایتی:برای ایجاد نوار هدایتی، یک تگ nav ایجاد کرده و به آن آی دی mainNav را می دهیم.به کلاس های به کار برده شده در این تگ دقت کنید. کلاس navbar-fixed-topباعث می شود که نوار هدایتی در صفحه به صورت ثابت باشد.

قالب Responsive - خط 27

27: <nav id=”mainNav” class=”navbar navbar-default navbar-fixed-top">

28- در خط 28 مشاهده می کنید که یک ظرف از نوع container-fluid را ایجاد کرده ایم. استفاده از کلاس container-fluid باعث می شود که نوار هدایتی ما به صورت تمام صفحه باشد.

قالب Responsive - خط 28

28: <div class="container-fluid">

29- در کدهای خط 30 تا 38 قصد داریم که یک منوی دکمه ای برای دستگاه ها با صفحات کوچک ایجاد کنیم.بدین ترتیب هرموقع که صفحه ی ما در دستگاه های مبایل با صفحه های بسیار کوچک نمایش داده شود، منوی بزرگ ما که بسیار جاگیر می باشد نشان داده نمی شود و به جای آن یک منوی کشویی دکمه ای کوچک نمایش داده می شود.

قالب Responsive - خط 29 و 30

29: <!-- Brand and toggle get grouped for better mobile display -->
30: <div class="navbar-header">

31- در خط 31 دکمه ی مورد نظر را ایجاد می کنیم. برای اینکه به طور اتوماتیک منوی کشویی را ایجاد کنیم، تنها کافی است عباراتdata-targetو "data-toggle=”collapseرا به دکمه ی مورد نظر اضافه کنید. توجه داشته باشید که در data-target آی دی دایوی که منوها در آن قرار گرفته اند و می خواهیم به صورت کشویی در دستگاه های کوچک باشند را مشخص می کنیم.

قالب Responsive - خط 31

31: <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 

32- در خط 32، یک عبارت را برای screen readerها یا همان صفحه خوان ها تعریف می کنیم.

قالب Responsive - خط 32

32: <span class="sr-only">Toggle navigation</span> 

 33- در خط 33 تا 35 برای ایجاد دکمه ی مورد نظر، سه خط کوچک افقی را ایجاد می کنیم. و در خط 36 تگ دکمه را می بندیم.

قالب Responsive - خط33 تا 36

33: <span class="icon-bar"></span>
34: <span class="icon-bar"></span>
35: <span class="icon-bar"></span>
36: </button>

 37- در آخر نیز برند سایت که در گوشه ی سمت راست نوار هدایتی قرار می گیرد را مشخص می کنیم. همان طور که در خط زیر مشاهده می کنید، در تگ a از کلاس page-scroll استفاده شده است. با اضافه کردن این کلاس و مشخص کرده یک id از یک عنصر هدف، با کلیک کردن به روی این لینک، صفحه به طور اتوماتیک به سمت عنصر هدف اسکرول می شود.توجه کنید که آی دی page-top در عنصر body تعریف شده است.

قالب Responsive - خط 37 و 38

37: <a class="navbar-brand page-scroll" href="#page-top">شروع کار با بوتسترپ</a>
38: </div>
 
01
  • معرفی پیش نیاز های دوره و منابع برای یادگیری هرکدام

  • دانلود و استفاده از فریم ورک بوت استرپ

  • نمایش سایت نهایی و شروع پروژه در نرم افزار dream weaver

 رایگان

02
  • ایجاد منو اصلی سایت
  • معرفی کلاس های بوت استرپ برای واکنشگرا بودن منو
  • سفارشی کردن رنگ متن پس زمینه و متون در منو متناسب با نیاز
  • معرفی روش های تعریف تابع در جیکوئری
  • ایجاد فایل جداگانه برای استفاده از توابع جیکوئری به صورت سفارشی
  • معرفی پلاگین های بوت استرپ affix, scroll spy و استفاده از آنها با بوت استرپ و جیکوئری
  • معرفی پلاگین fittext برای واکنشگرا کردن حروف در سایت  
 
03
  • ایجاد قسمت header سایت متناسب با نیاز
  • استفاده از فونت های سفارشی در سایت
  • معرفی قسمت css reset برای  معرفی ویژگی های اساسی تگ ها
  • معرفی کلاس های مربوط به متن و دکمه در بوت استرپ 
 
04
  •  ساخت قسمت درباره ما
  • ایجاد تابع با جیکوئری برای حرکت ease برای حرکت بین section ها
 
05
  •  ایجاد قسمت service
  • معرفی font-awesome و تفاوت آن با فونت آیکون بوت استرپ
  • استفاده از گرید بندی بوت استرپ
  • استفاده از js و animate کردن عناصر برای اولین  بازدید بعد از بارگذاری سایت
 
06
  •  ایجاد قسمت پروفایل در قالب
  • استفاده ازTransition برای قسمت caption تصاویر
 
07
  •  استفاده از تگ aside در html5 برای قسمت های مرتبط سایت
  • نمایش انواع کلاس ها در css
  • ایجاد قسمت contact us و استفاده از کلاس های آیکون ها , متن ها و گرید بندی بوت استرپ
 
نظرات
Copyright www.maxx-marketing.net
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی