آموزش ساخت قالب Responsive
آموزش ساخت قالب Responsive در بوتسترپ
در این آموزش با استفاده از بوتسترپ، یک قالب Responsive که در تمامی دستگاه ها به خوبی نمایش داده می شود را آموزش خواهیم داد
- پیش نیاز ها: HTML - CSS - Bootstrap
- پیش نمایش: مشاهده پیش نمایش یا Demo
آموزش ساخت قالب Responsive در بوتسترپ
در این آموزش شما می توانید نحوه ی ساخت یک قالب واکنش گرا را به وسیله ی بوتسترپ، فرا بگیرید.
این قالب در تمامی دستگاه ها به خوبی نمایش داده می شود و به طور اتوماتیک برای هر دستگاه، اندازه ی آن تنظیم می شود.
نحوه ی آموزش این قالب به صورت خط به خط می باشد، بعنوان مثال برای ایجاد نوار هدایتی قالب، آموزش به صورت زیر می باشد:
27- ایجاد نوار هدایتی:برای ایجاد نوار هدایتی، یک تگ nav ایجاد کرده و به آن آی دی mainNav را می دهیم.به کلاس های به کار برده شده در این تگ دقت کنید. کلاس navbar-fixed-topباعث می شود که نوار هدایتی در صفحه به صورت ثابت باشد.
قالب Responsive - خط 27
28- در خط 28 مشاهده می کنید که یک ظرف از نوع container-fluid را ایجاد کرده ایم. استفاده از کلاس container-fluid باعث می شود که نوار هدایتی ما به صورت تمام صفحه باشد.
قالب Responsive - خط 28
29- در کدهای خط 30 تا 38 قصد داریم که یک منوی دکمه ای برای دستگاه ها با صفحات کوچک ایجاد کنیم.بدین ترتیب هرموقع که صفحه ی ما در دستگاه های مبایل با صفحه های بسیار کوچک نمایش داده شود، منوی بزرگ ما که بسیار جاگیر می باشد نشان داده نمی شود و به جای آن یک منوی کشویی دکمه ای کوچک نمایش داده می شود.
قالب Responsive - خط 29 و 30
30: <div class="navbar-header">
31- در خط 31 دکمه ی مورد نظر را ایجاد می کنیم. برای اینکه به طور اتوماتیک منوی کشویی را ایجاد کنیم، تنها کافی است عباراتdata-targetو "data-toggle=”collapseرا به دکمه ی مورد نظر اضافه کنید. توجه داشته باشید که در data-target آی دی دایوی که منوها در آن قرار گرفته اند و می خواهیم به صورت کشویی در دستگاه های کوچک باشند را مشخص می کنیم.
قالب Responsive - خط 31
32- در خط 32، یک عبارت را برای screen readerها یا همان صفحه خوان ها تعریف می کنیم.
قالب Responsive - خط 32
33- در خط 33 تا 35 برای ایجاد دکمه ی مورد نظر، سه خط کوچک افقی را ایجاد می کنیم. و در خط 36 تگ دکمه را می بندیم.
قالب Responsive - خط33 تا 36
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
38: </div>
| 01 |
| رایگان |
| 02 |
| |
| 03 |
| |
| 04 |
| |
| 05 |
| |
| 06 |
| |
| 07 |
|
با مدرک کارشناس ارشد سیستم های چند رسانه ای و عضوانجمن علمی دانشگاه مازندران یکی از بنیانگذاران سایت بیاموز است. زمینه های پژوهشی و کاری تخصصی ایشان، در حوزه های مختلف برنامه نویسی وب و راه اندازی و پشتیبانی شبکه است.
برای دانلود آموزش ساخت قالب Responsive، لطفا مراحل زیر را طی فرمایید:
1- با نام کاربری و کلمه عبورتان به آموزشگاه beyamooz.com وارد شوید.
2- از منوی بالا، گزینه "منوی کاربری -> خریدهای قبلی من" را انتخاب نمایید.
3- در صفحه خریدهای قبلی من، کلیه سفارش های شما همراه با جزئیات لیست شده است، برای مشاهده جزئیات هر سفارش و دانلود محصول، کافی است روی لینک "جزئیات" کلیک فرمایید.
با تشکر فراوان
مدیریت آموزشگاه بیاموز
پهلوان صادق
beyamooz.com/try_it_yourself/bootstrap/startbootstrap-creative-1.0.1/
اگر قصد دارید Bootstrap را از صفر تا صد فرابگیرید، علاوه بر مطالب رایگان سایت می توانید از فیلم آموزشی زیر استفاده کنید:
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
ببخشید بند به HTML و CSS اشنایی دارم ولی جیکويری نه، آیا دوره آموزش ساخت قالب Responsive را میتوانم استفاده کنم؟
فیلم آموزش پروژه محور رسپانسیو کردن رو چطور می تونم تهیه کنم؟
برای دریافت آن باید مراحل ثبت سفارش را طی کنید. یعنی خیلی راحت از سمت چپ همین صفحه، روی دکمه ی "اضافه کردن به سید خرید" کلیک کنید و مراحل ثبت سفارش را تا انتها دنبال فرمایید. نهایتاً ایمیلی برای شما ارسال خواهد شد که لینک دانلود فایل آموزش ساخت قالب Responsive در آن وجود دارد.
من عضویت ویژه طلایی رو فعال کردم
فقط میخواستم بدونم منویvip در کدوم قسمت سایت هستش آیا برای بوت استرپ هم آموزش vip تهیه شده
خلاصه یک راهنما در مورد سایتتون میخواستم
ابتدا از اینکه عضویت ویژه طلایی را خرید کردید، تشکر می کنم.
1- برای مشاهده اطلاعات مربوط به عضویت VIP، از سمت چپ سایت، روی لینک "اشتراک های من" کلیک کنید.
2- برای آموزش Bootstrap، تنها همین پروژه "ساخت قالب واکنشگرا" برای اعضاء ویژه در نظر گرفته شده است.
در مورد بقیه ی آموزش های سایت بیاموز، بزودی یک راهنما برای دسترسی اعضاء VIP، در اختیار شما قرار خواهد گرفت.
عالی بود.
چطوری میشه فیلم آموزش ساخت قالب Responsive رو گرفت من ثبت سفارش کردم ولی لینکی برا دانلود نیومد.
با تشکر
1- با نام کاربری و کلمه عبورتان، وارد سایت شوید.
2- از بالای سایت، روی منوی "خریدهای قبلی" کلیک فرمایید. یا به لینک زیر برید:
http://www.beyamooz.com/ordersl
3- در صفحه ی باز شده یعنی "سفارشات من" لیست تمام خریدهای قبلی شما وجود دارد، برای دانلود فایل مورد نظر لطفاً روی لینک"جزئیات" کلیک نمایید.
4- در صفحه باز شده، حالا پایین عنوان "ساخت قالب واکنشگرا" روی لینک"بارگذاری" کلیک نمایید.
به همین راحتی ...!
در پکیج ساخت قالب Responsive ، فایل ها و سورس پروژه هست یا فقط فیلمه؟
فیلم آموزش ساخت قالب وانشگرا رو خریدم، عالی بود. دست شما درد نکنه
لینک دانلود آموزش ساخت قالب واکنشگرا مجددا به ایمیل شما ارسال شد.