آموزش ساخت قالب واکنشگرا
آموزش ساخت قالب واکنشگرا در بوتسترپ
در این آموزش با استفاده از بوتسترپ، یک قالب واکنشگرا که در تمامی دستگاه ها به خوبی نمایش داده می شود را آموزش خواهیم داد
- پیش نیاز ها: HTML - CSS - Bootstrap
- پیش نمایش: مشاهده پیش نمایش یا Demo
- خرید و دانلود پروژه: دانلود با لینک مستقیم
- حجم فایل: 8.77 مگابایت
آموزش ساخت قالب واکنشگرا در بوتسترپ
در این آموزش شما می توانید نحوه ی ساخت یک قالب واکنش گرا را به وسیله ی بوتسترپ، فرا بگیرید.
این قالب در تمامی دستگاه ها به خوبی نمایش داده می شود و به طور اتوماتیک برای هر دستگاه، اندازه ی آن تنظیم می شود.
نحوه ی آموزش این قالب به صورت خط به خط می باشد، بعنوان مثال برای ایجاد نوار هدایتی قالب، آموزش به صورت زیر می باشد:
27- ایجاد نوار هدایتی:برای ایجاد نوار هدایتی، یک تگ nav ایجاد کرده و به آن آی دی mainNav را می دهیم.به کلاس های به کار برده شده در این تگ دقت کنید. کلاس navbar-fixed-topباعث می شود که نوار هدایتی در صفحه به صورت ثابت باشد.
قالب واکنشگرا - خط 27
28- در خط 28 مشاهده می کنید که یک ظرف از نوع container-fluid را ایجاد کرده ایم. استفاده از کلاس container-fluid باعث می شود که نوار هدایتی ما به صورت تمام صفحه باشد.
قالب واکنشگرا - خط 28
29- در کدهای خط 30 تا 38 قصد داریم که یک منوی دکمه ای برای دستگاه ها با صفحات کوچک ایجاد کنیم.بدین ترتیب هرموقع که صفحه ی ما در دستگاه های مبایل با صفحه های بسیار کوچک نمایش داده شود، منوی بزرگ ما که بسیار جاگیر می باشد نشان داده نمی شود و به جای آن یک منوی کشویی دکمه ای کوچک نمایش داده می شود.
قالب واکنشگرا - خط 29 و 30
30: <div class="navbar-header">
31- در خط 31 دکمه ی مورد نظر را ایجاد می کنیم. برای اینکه به طور اتوماتیک منوی کشویی را ایجاد کنیم، تنها کافی است عباراتdata-targetو "data-toggle=”collapseرا به دکمه ی مورد نظر اضافه کنید. توجه داشته باشید که در data-target آی دی دایوی که منوها در آن قرار گرفته اند و می خواهیم به صورت کشویی در دستگاه های کوچک باشند را مشخص می کنیم.
قالب واکنشگرا - خط 31
32- در خط 32، یک عبارت را برای screen readerها یا همان صفحه خوان ها تعریف می کنیم.
قالب واکنشگرا - خط 32
33- در خط 33 تا 35 برای ایجاد دکمه ی مورد نظر، سه خط کوچک افقی را ایجاد می کنیم. و در خط 36 تگ دکمه را می بندیم.
قالب واکنشگرا - خط33 تا 36
34: <span class="icon-bar"></span>
35: <span class="icon-bar"></span>
36: </button>
37- در آخر نیز برند سایت که در گوشه ی سمت راست نوار هدایتی قرار می گیرد را مشخص می کنیم. همان طور که در خط زیر مشاهده می کنید، در تگ a از کلاس page-scroll استفاده شده است. با اضافه کردن این کلاس و مشخص کرده یک id از یک عنصر هدف، با کلیک کردن به روی این لینک، صفحه به طور اتوماتیک به سمت عنصر هدف اسکرول می شود.توجه کنید که آی دی page-top در عنصر body تعریف شده است.
قالب واکنشگرا - خط 37 و 38
38: </div>
- نوشته شده توسط احسان عباسی
- بازدید: 28420
دیدگاه‌ها
سلام من این فیلم آموزش ساخت قالب واکنشگرا رو خریداری کردم و تموم اموزش ها رو هم مشاهده کردم الان میخوام همون تم رو خودم طراحی کنم ولی فایل css که خودم استایل دهی کردم و به صفحه index لینک دادم روی صفحه ام اعمال نمیشه تموم خط کدام رو با فایل مرجع مطابقت دادم هیچ مشکلی نداشته لطفا راهنمایی کنید
اینم از کدی که برای لینک فایل css در تگ head استفاده کردم:
< link rel="stylesheet " href="/creative. css" type="text/css" />
با سلام
طبق کد بالا و مقداری که برای ویژگی href تنظیم نموده اید، فایل creative.css باید دقیقا کنار فایل html اتان باشد. آیا این مورد را رعایت فرموده اید؟
اگر از محل قرار گیری فایل مذکور بطور صحیح مطمئنید، کل پروژه را Zip کرده و به آدرس [email protected] ارسال نمایید. تا مشکل بررسی شود.
سلام و عرض خسته نباشید....
پیش نیاز آموزش ساخت قالب واکنشگرا، فقط html , css و bootstrap هست؟ آیا نیازی هست ابتدا آموزش های javascript و jquery رو دنبال کنیم و بعد سراغ این آموزش بیایم؟
با تشکر
سلام
پیشنیازهای فیلم آموزش ساخت قالب واکنشگرا، HTML و CSS و Bootstrap هست، که البته بصورت رایگان از طریق منوی "بخوان و بیاموز" در دسترس شما عزیزان قرار گرفته است.
سلام من امزور این بسته آموزش ساخت قالب واکنشگرا را خریدم واقعا عالیه . ممنونم
فقط یه مشکل عحیب دارم و اون اینکه تعییراتی که توی پیجم میدم موقع اجرا اصلا اعمال نمی شه.
ممنون میشم راهنمایی ام کنید
سلام، ضمن تشکر از خریدتون ... مشکل شما ممکن هست بدلیل cache شدن صفحات باشد. به این ترتیب تغییرات اعمال شده قابل مشاهده نمی باشد، بنابراین برای پاک کردن Cache از کلیدهای میانبر CTRL+F5 استفاده نمایید.
سلام من این بسته رو امروز خریدم و ب نظرم خیلی خوب و کامل هست.واقعا ممنونم
فقط یه مشکل عحیب دارم و اون اینکه تغییراتی که توی پیجم میدم توی احرا اعمال نمی شه .بیلد و ری بیلد هم می کنم اما فایده ای نداره
ممنون میشم راهنمایی ام کنید
از سایت خوبتون وواقعا ممنونم
سلام.من این اموزش رو خریدری کردم.یه سوال داشتم اینکه شما در تگ a از کلاسی با نام page-scroll استفاده کردید .این کلاس از کلاسهای بوت استرپ هست؟ کدوم فایل ؟ممنون
سلام. به نظر میرسه این کلاس جزو کلاس های بوت استرپ نیست.
سلام
من منویی میخوام که به صورت block و اینجوری که شما در بالا توضیح دادین نباشه.یعنی هیچ background ای نداشته باشه و فقط کلمات منو دیده بشه که با رفتن روی هر عنصرِ منو به صورت hover رنگ text عوض بشه.آیا امکان ساخت چنین منویی با استفاده از bootstrap هست؟
اگر bootstrap چنین منویی نداره میشه لطفا راهنمایی ام کنید که چطور میتونم با css خودم منویی طراحی کنم که با کوچک شدن صفحه بهم نریزد؟در واقع واکنشگرا باشد.
سپاسگزارم
با سلام.
بله امکان ساخت همچین منویی با یا بدون استفاده از بوت‌استرپ هست. البته شما می‌تونید با استفاده از CSS منوها رو کاملا سفارشی و مطابق میل خودتون در بیارید.
در نمونه کد زیر منوها با استفاده از بوت‌استرپ ساخته شده‌اند و البته تغییراتی نیز به صورت دستی داده شده تا مطابق خواسته‌ی شما در بیاد.
<!DOCTYPE html>
<html>
<head>
<title>Ajax</title>
<meta charset="u tf-8" />
<link rel="style sheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
a{display:inline-block;padding:10px;cursor:pointer;}
.btn-group.open .dropdown-toggl e{box-shadow:un set !important;}
</style>
</head>
<body>
<div>
<div class="btn-group">
<a class="dro pdown-toggle&qu ot; id="dropdo wnMenu1" data-toggle=&qu ot;dropdown&quo t; aria-haspopup=& quot;true" aria-expanded=& quot;true" >Menu 1</a>
<ul class="dro pdown-menu" ; aria-labelledby="dropdownMenu1">
<li><a href="#&qu ot;>Menu 1.1</a></li>
<li><a href="#&qu ot;>Menu 1.2</a></li>
<li><a href="#&qu ot;>Menu 1.3</a></li>
<li><a href="#&qu ot;>Menu 1.4</a></li>
</ul>
</div><div class="btn-group">
<a class="dro pdown-toggle&qu ot; id="dropdo wnMenu1" data-toggle=&qu ot;dropdown&quo t; aria-haspopup=& quot;true" aria-expanded=& quot;true" >Menu 2</a>
<ul class="dro pdown-menu" ; aria-labelledby="dropdownMenu1">
<li><a href="#&qu ot;>Menu 2.1</a></li>
<li><a href="#&qu ot;>Menu 2.2</a></li>
<li><a href="#&qu ot;>Menu 2.3</a></li>
<li><a href="#&qu ot;>Menu 2.4</a></li>
</ul>
</div>
</div>
</body>
</html>
کد رو اجرا کنید و ببینید مطابق خواسته هست یا نه. خودتون می‌تونید با استفاده از CSS نیاز موردنظر خودتون رو اعمال کنید.
از پاسختون ممنونم.
اما منظورم چنین منویی نبود.میتونم سوالم رو از طریق ایمیل باهاتون مطرح کنم؟
ممنون میشم
حقیقتش مشکلی نیست، ولی با عرض شرمندگی اجازه بدید خدمت‌تون عرض کنم سؤالات و پاسخ‌ها معیار امتیازدهی در این سایت هست. اگر براتون مقدور هست سؤالتون رو همینجا مطرح کنید.
در صورت امکان کمک خواهم کرد.
باز هم عذرخواهی می‌کنم.
سلام و باتشکر از برو بچه های با معرفت بیاموز......
آموزش بوت استرپ کامل و کاربردی هست ،و من از سایت شما بیشتر مطالب رو یاد گرفتم،از آموزش های خوبتون ممنونم
Pdf ساخت سایت واکنشگرا رو دانلود میزنم فایلش وجود نداره
با تشکر از ابراز نظر شما. به زودی مشکل فایل pdf حل خواهد شد .
آقا یک کلام ختم کلام شما فوق العاده اید
اصلا جای سوال برا آدم نمیذارید.. اینقدر که کامله (کل مجموعه بوت استرپ)
من ریسپامسیو سایت رو با شما یاد گرفتم
واقعا ممنونم
سلام ببخشید بوت استرپ 3 با بوت استرپ 2 چقدر تفاوت داره؟
اگر بخواهیم کدی که با بوت 3نوشتیم را به بوت2 تبدیل کنیم باید خودمان دستی اینکار راانجام دهیم یا برنامه هایی هستند که سورس کدهارابهم تبدیل کنند؟
سلام
در تبدیل بوتسترپ 2 به 3 و برعکس ،یک سری کلاس ها هستند که نام آنها عوض شده است و شما باید این نام ها رو عوض کنید. یک سری کلاس ها هم هستند که در بوتسترپ 3 جدید هستند. پس برای تبدیل بوتسترپ 2 به 3 و برعکس باید نام کلاس ها را عوض کنید و اگر که کلاسی در ورژن بوتسترپ شما وجود نداره، باید اون بخش رو حذف کنید و ... برای تبدیل کلاس های بوتسترپ جدول اول رو در آدرس زیر مشاهده نمایید: getbootstrap.com/migration/
در مورد نرم افزار مورد نظر هم می تونید در وب جستجو کنید . بنده نمونه ای رو فعلا سراغ ندارم .
ممنون ازینکه خیلی زود جواب میدید.
واقعاسپاسگذارم.
با سلام
من یه سوال داشتم.
به یه کدی نیاز دارم که مانند وبسایت های بزرگ منوی تاشو بسازم؟؟؟
اگه میشه کمکم کنید
سلام
اگه به آدرس های زیر بروید می تونید انواع منوها رو مشاهده کنید و کد اونا را دانلود کنید و ازشون استفاده کنید:
1. codepen.io/collection/DdHit/
2. codepen.io/tag/menu/
توجه داشته باشید که با کلیک بر روی هریک از تصاویر، کد آن آیتم در یک ادیتور آنلاین باز می شود. اگر بخواهید آن کد را دانلودکنید بر روی دکمه ی share و سپس دکمه ی export.zip کلیک کنید.
سلام ببخشید میشه یه توضیح درمورد تفاوت slidebar gallery و sliderبدید؟ و اینکه اسلایدبار کد خاصی داره؟
سلام
از slidebar gallery اطلاع چندانی ندارم اما از slider ها یا همان اسلایدشو ها برای نمایش عکس استفاده می شود. در ضمن باید اضافه کنم slider ها کدهای خاصی دارند مثلا در آدرس زیر می توانید اسلایدر cycle رو دانلود کنید و ازش در پروژه ی خودتون استفاده کنید: jquery.malsup.com/cycle/
سلام خدا قوت و ممنون از آموزش مفیدتون
فقط ببخشید سورس کدش رو باید از تو اموزش PDF کپی کنیم؟میشه کد کامل این پروژه رو نمیشه بزارید توسایت؟
سلام
بعد از دانلود، سورس این پروژه در پوشه ی startbootstrap- creative-1.0.1 قرار دارد.
لازم هست که فایل index.html را با یک ویرایشگر متن باز کنید تا سورس کد را مشاهده کنید.
دستتون واقعا درد نکنه .ممنون.
من تقریبا دوساعت از pdfکد ها رو کپی کردم:(
سلام.از کجا میتونم این اموزش رو بخرم ؟
سلام از طریق لینک زیر می توانید فیلم آموش ساخت قالب واکنشگرا رو تهیه فرمایید:
beyamooz.com/product/bootstrap-pdf/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B3%D8%A7%D8%AE%D8%AA-%D9%82%D8%A7%D9%84%D8%A8-responsive
بسیار عالی هستش