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

درباره مدرس (آموزش ساخت قالب Responsive)

تضمین کیفیت

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

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

(
بازدیدها: 8342
)

معرفی اجمالی محصول (آموزش ساخت قالب Responsive)

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

دیگر مشخصات (آموزش ساخت قالب Responsive)

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

آموزش ساخت قالب 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 و استفاده از کلاس های آیکون ها , متن ها و گرید بندی بوت استرپ
 
نظرات (آموزش ساخت قالب Responsive)

دیدگاه‌ها  

0 # Musavi 1396-07-27 09:17
سلام من آموزش ساخت قالب Responsive خریداری کردم، ولی هنوز لینک دانلودی نیمده!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-07-27 10:40
عرض سلام و ادب
برای دانلود آموزش ساخت قالب Responsive، لطفا مراحل زیر را طی فرمایید:
1- با نام کاربری و کلمه عبورتان به آموزشگاه beyamooz.com وارد شوید.
2- از منوی بالا، گزینه "منوی کاربری -> خریدهای قبلی من" را انتخاب نمایید.
3- در صفحه خریدهای قبلی من، کلیه سفارش های شما همراه با جزئیات لیست شده است، برای مشاهده جزئیات هر سفارش و دانلود محصول، کافی است روی لینک "جزئیات" کلیک فرمایید.

با تشکر فراوان
مدیریت آموزشگاه بیاموز
پهلوان صادق
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # Musavi 1396-07-25 17:17
مگه در دوره ساخت قالب Responsive، بوت استرپ از 0 تا 100 اموزش داده نمیشه؟ پس باید فاعدتا توش رسپانسیو کردن هم اموزش داده بشه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-07-27 06:40
در دوره ساخت قالب Responsive بیشنر روی ساخت قالب زیر متمرکز شده ایم:
http://beyamooz.com/try_it_yourself/bootstrap/startbootstrap-creative-1.0.1/
اگر قصد دارید Bootstrap را از صفر تا صد فرابگیرید، علاوه بر مطالب رایگان سایت می توانید از فیلم آموزشی زیر استفاده کنید:
http://beyamooz.com/product/project-bootstrap/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D9%85%D8%AD%D9%88%D8%B1-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # MERAJ MUSAVI 1396-07-25 15:32
به نام خدا
ببخشید بند به HTML و CSS اشنایی دارم ولی جیکويری نه، آیا دوره آموزش ساخت قالب Responsive را میتوانم استفاده کنم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-07-25 16:39
برای پیاده سازی سایت های Responsive علاوه بر Bootstrap باید jQuery را نیز فرابگیرید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # nahal 1396-02-16 13:35
سلام خسته نباشید یه سوال داشتم میدونید boiler plate چیه ؟ هیچی پیدا نکردم تو سایت های دیگه .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-02-19 08:27
HTML5 Boilerplate مجموعه ای از قالب های آماده هستند که برای ساخت برنامه های کاربردی تحت وب و یا وب سایت ها استفاده می شوند. این قالب ها با تمامی مرورگرها سازگار بوده و از آخرین تکنولوژی های وب نظیر HTML5 و CSS3 استفاده می کنند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # arda 1395-06-27 13:23
سلام
عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # dargah reza 1395-04-31 17:10
سلام
فیلم آموزش ساخت قالب وانشگرا
رو خریدم، عالی بود. دست شما درد نکنه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # shima میرزاپور 1395-04-02 19:01
سلام ببخشید من میخواستم این فایل اموزشو دان کنم مراحل خرید و زدم فاکتور به ایمیلم ارسال شده ولی هیچ لینک دانلودی نیومده
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1395-04-03 11:19
سلام
لینک دانلود آموزش ساخت قالب واکنشگرا مجددا به ایمیل شما ارسال شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # زهرا صوفی 1394-06-29 10:08
سلام
فیلم آموزش پروژه محور رسپانسیو کردن رو چطور می تونم تهیه کنم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1394-06-29 10:14
سلام
برای دریافت آن باید مراحل ثبت سفارش را طی کنید. یعنی خیلی راحت از سمت چپ همین صفحه، روی دکمه ی "اضافه کردن به سید خرید" کلیک کنید و مراحل ثبت سفارش را تا انتها دنبال فرمایید. نهایتاً ایمیلی برای شما ارسال خواهد شد که لینک دانلود فایل آموزش ساخت قالب Responsive در آن وجود دارد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # زهرا صوفی 1394-06-29 09:10
سلام
من عضویت ویژه طلایی رو فعال کردم
فقط میخواستم بدونم منویvip در کدوم قسمت سایت هستش آیا برای بوت استرپ هم آموزش vip تهیه شده
خلاصه یک راهنما در مورد سایتتون میخواستم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1394-06-29 10:10
با سلام خدمت خانم صوفی
ابتدا از اینکه عضویت ویژه طلایی را خرید کردید، تشکر می کنم.
1- برای مشاهده اطلاعات مربوط به عضویت VIP، از سمت چپ سایت، روی لینک "اشتراک های من" کلیک کنید.
2- برای آموزش Bootstrap، تنها همین پروژه "ساخت قالب واکنشگرا" برای اعضاء ویژه در نظر گرفته شده است.
در مورد بقیه ی آموزش های سایت بیاموز، بزودی یک راهنما برای دسترسی اعضاء VIP، در اختیار شما قرار خواهد گرفت.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # Farshad sh 1394-06-03 11:41
فیلم آموزش ساخت قالب Responsive عالی بود ... ممنون.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # v d 1394-05-28 12:14
با سلام
چطوری میشه فیلم آموزش ساخت قالب Responsive رو گرفت من ثبت سفارش کردم ولی لینکی برا دانلود نیومد.
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1394-05-28 12:34
سلام
1- با نام کاربری و کلمه عبورتان، وارد سایت شوید.
2- از بالای سایت، روی منوی "خریدهای قبلی" کلیک فرمایید. یا به لینک زیر برید:
http://www.beyamooz.com/ordersl
3- در صفحه ی باز شده یعنی "سفارشات من" لیست تمام خریدهای قبلی شما وجود دارد، برای دانلود فایل مورد نظر لطفاً روی لینک"جزئیات" کلیک نمایید.
4- در صفحه باز شده، حالا پایین عنوان "ساخت قالب واکنشگرا" روی لینک"بارگذاری" کلیک نمایید.
به همین راحتی ...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # آمنه گرامی 1396-03-24 11:08
سلام
در پکیج ساخت قالب Responsive ، فایل ها و سورس پروژه هست یا فقط فیلمه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-03-25 08:43
سلام، بله همراه با فیلم آموزش ساخت قالب Responsive، اسکریپت پروژه نیز ارائه شده است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
Copyright www.maxx-marketing.net

راهنمای خرید از فروشگاه بیاموز (قوانین و مقررات)

کاربر عزیز به فروشگاه بیاموز خوش آمدید. جهت آشنایی بهتر با فروشگاه، نحوه خرید و ضمانت ما و موارد دیگر به نکات زیر توجه فرمایید:

نکته 1: دقت فرمایید که هر پکیج آموزشی شامل قسمت هایی رایگان است که می توانید براحتی آنها را دانلود کرده و به این ترتیب اطمینان بیشتری از خرید خود حاصل فرمایید.

نکته 2: بلافاصله بعد از خرید، ایمیلی حاوی لینک دانلود برای شما ارسال خواهد شد و می توانید محصولات را با بالاترین سرعت ممکن دانلود نمایید.

نکته 3: لینک های دانلود، دارای قابلیت Resume هستند. یعنی در صورتی که Disconnect شدید، بعد از اتصال مجدد به اینترنت، می توانید دانلود فایل مورد نظر را ادامه دهید.

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

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

نکته 6: هر پکیج آموزشی، شامل چندین درس است اما در بیاموز، امکان خرید هر درس بصورت مجزا وجود دارد. 

نکته 7: خریدهای پستی (پیشتاز) بین 24 الی 72 ساعت بعد از خرید به دست شما خواهد رسید.

نکته 8: این سایت دارای مجوز رسمی از جمهوری اسلامی ایران بوده و به استناد نماد اعتماد الکترونیک، خرید از این سایت کاملاً مطمئن و تایید شده می باشد.

نکته 9: اگر هنوز هم سوالی در ذهن شما باقی مانده، از طریق پُل ها ارتباطی زیر با ما مطرح فرمایید:

موبایل: 09132023142               ایمیل: این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید

در ویدئوی زیر، می توانید نحوه ی خرید و دانلود محصولات آموزشگاه بیاموز را مشاهده فرمایید:

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی