به آموزشگاه بیاموز خوش آمدید!

سبد خرید (0)

آموزش ساخت قالب واکنشگرا

آموزش ساخت قالب واکنشگرا در بوتسترپ

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

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

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

- خرید و دانلود پروژهدانلود با لینک مستقیم

- حجم فایل: 8.77 مگابایت


آموزش ساخت قالب واکنشگرا در بوتسترپ

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

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

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

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

قالب واکنشگرا - خط 27

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

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

قالب واکنشگرا - خط 28

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

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

قالب واکنشگرا - خط 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 آی دی دایوی که منوها در آن قرار گرفته اند و می خواهیم به صورت کشویی در دستگاه های کوچک باشند را مشخص می کنیم.

قالب واکنشگرا - خط 31

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

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

قالب واکنشگرا - خط 32

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

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

قالب واکنشگرا - خط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 تعریف شده است.

قالب واکنشگرا - خط 37 و 38

37: <a class="navbar-brand page-scroll" href="#page-top">شروع کار با بوتسترپ</a>
38: </div>

دیدگاه‌ها  

+2 # samaneh qorbanimoqadam 1396-04-12 01:20
سلام من این فیلم آموزش ساخت قالب واکنشگرا رو خریداری کردم و تموم اموزش ها رو هم مشاهده کردم الان میخوام همون تم رو خودم طراحی کنم ولی فایل css که خودم استایل دهی کردم و به صفحه index لینک دادم روی صفحه ام اعمال نمیشه تموم خط کدام رو با فایل مرجع مطابقت دادم هیچ مشکلی نداشته لطفا راهنمایی کنید
اینم از کدی که برای لینک فایل css در تگ head استفاده کردم:
< link rel="stylesheet " href="/creative. css" type="text/css" />
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1396-04-12 14:52
با سلام
طبق کد بالا و مقداری که برای ویژگی href تنظیم نموده اید، فایل creative.css باید دقیقا کنار فایل html اتان باشد. آیا این مورد را رعایت فرموده اید؟
اگر از محل قرار گیری فایل مذکور بطور صحیح مطمئنید، کل پروژه را Zip کرده و به آدرس [email protected] ارسال نمایید. تا مشکل بررسی شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # محمدرضا123 1396-02-12 12:33
سلام و عرض خسته نباشید....
پیش نیاز آموزش ساخت قالب واکنشگرا، فقط html , css و bootstrap هست؟ آیا نیازی هست ابتدا آموزش های javascript و jquery رو دنبال کنیم و بعد سراغ این آموزش بیایم؟
با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1396-02-15 21:57
سلام
پیشنیازهای فیلم آموزش ساخت قالب واکنشگرا، HTML و CSS و Bootstrap هست، که البته بصورت رایگان از طریق منوی "بخوان و بیاموز" در دسترس شما عزیزان قرار گرفته است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # sama2790 sama 1395-12-04 17:45
سلام من امزور این بسته آموزش ساخت قالب واکنشگرا را خریدم واقعا عالیه . ممنونم
فقط یه مشکل عحیب دارم و اون اینکه تعییراتی که توی پیجم میدم موقع اجرا اصلا اعمال نمی شه.
ممنون میشم راهنمایی ام کنید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1395-12-08 10:54
سلام، ضمن تشکر از خریدتون ... مشکل شما ممکن هست بدلیل cache شدن صفحات باشد. به این ترتیب تغییرات اعمال شده قابل مشاهده نمی باشد، بنابراین برای پاک کردن Cache از کلیدهای میانبر CTRL+F5 استفاده نمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # sama2790 sama 1395-12-04 17:18
سلام من این بسته رو امروز خریدم و ب نظرم خیلی خوب و کامل هست.واقعا ممنونم
فقط یه مشکل عحیب دارم و اون اینکه تغییراتی که توی پیجم میدم توی احرا اعمال نمی شه .بیلد و ری بیلد هم می کنم اما فایده ای نداره
ممنون میشم راهنمایی ام کنید
از سایت خوبتون وواقعا ممنونم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # علی علوی 1395-08-28 23:44
سلام.من این اموزش رو خریدری کردم.یه سوال داشتم اینکه شما در تگ a از کلاسی با نام page-scroll استفاده کردید .این کلاس از کلاسهای بوت استرپ هست؟ کدوم فایل ؟ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-11-28 11:36
سلام. به نظر میرسه این کلاس جزو کلاس های بوت استرپ نیست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # meli 1394-07-17 17:15
سلام
من منویی میخوام که به صورت block و اینجوری که شما در بالا توضیح دادین نباشه.یعنی هیچ background ای نداشته باشه و فقط کلمات منو دیده بشه که با رفتن روی هر عنصرِ منو به صورت hover رنگ text عوض بشه.آیا امکان ساخت چنین منویی با استفاده از bootstrap هست؟
اگر bootstrap چنین منویی نداره میشه لطفا راهنمایی ام کنید که چطور میتونم با css خودم منویی طراحی کنم که با کوچک شدن صفحه بهم نریزد؟در واقع واکنشگرا باشد.
سپاسگزارم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مهرداد صلاحی 1394-07-17 18:38
با سلام.
بله امکان ساخت همچین‌ منویی با یا بدون استفاده از بوت‌استرپ هست. البته شما می‌تونید با استفاده از 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 نیاز موردنظر خودتون رو اعمال کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # ملیکا یزدانی 1394-07-17 19:44
از پاسختون ممنونم.
اما منظورم چنین منویی نبود.میتونم سوالم رو از طریق ایمیل باهاتون مطرح کنم؟
ممنون میشم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-07-17 19:46
حقیقتش مشکلی نیست، ولی با عرض شرمندگی اجازه بدید خدمت‌تون عرض کنم سؤالات و پاسخ‌ها معیار امتیازدهی در این سایت هست. اگر براتون مقدور هست سؤالتون رو همینجا مطرح کنید.

در صورت امکان کمک خواهم کرد.
باز هم عذرخواهی می‌کنم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # cipher 1394-07-04 14:00
سلام و باتشکر از برو بچه های با معرفت بیاموز......
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # sepideh Ghasabnezhad 1394-06-12 14:37
آموزش بوت استرپ کامل و کاربردی هست ،و من از سایت شما بیشتر مطالب رو یاد گرفتم،از آموزش های خوبتون ممنونم
Pdf ساخت سایت واکنشگرا رو دانلود میزنم فایلش وجود نداره
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-06-12 21:50
با تشکر از ابراز نظر شما. به زودی مشکل فایل pdf حل خواهد شد .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مجید 1394-05-27 13:08
آقا یک کلام ختم کلام شما فوق العاده اید
اصلا جای سوال برا آدم نمیذارید.. اینقدر که کامله (کل مجموعه بوت استرپ)
من ریسپامسیو سایت رو با شما یاد گرفتم
واقعا ممنونم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # ZF 1394-04-26 03:38
سلام ببخشید بوت استرپ 3 با بوت استرپ 2 چقدر تفاوت داره؟
اگر بخواهیم کدی که با بوت 3نوشتیم را به بوت2 تبدیل کنیم باید خودمان دستی اینکار راانجام دهیم یا برنامه هایی هستند که سورس کدهارابهم تبدیل کنند؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-04-26 10:55
سلام
در تبدیل بوتسترپ 2 به 3 و برعکس ،یک سری کلاس ها هستند که نام آنها عوض شده است و شما باید این نام ها رو عوض کنید. یک سری کلاس ها هم هستند که در بوتسترپ 3 جدید هستند. پس برای تبدیل بوتسترپ 2 به 3 و برعکس باید نام کلاس ها را عوض کنید و اگر که کلاسی در ورژن بوتسترپ شما وجود نداره، باید اون بخش رو حذف کنید و ... برای تبدیل کلاس های بوتسترپ جدول اول رو در آدرس زیر مشاهده نمایید: getbootstrap.com/migration/
در مورد نرم افزار مورد نظر هم می تونید در وب جستجو کنید . بنده نمونه ای رو فعلا سراغ ندارم .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # ZF 1394-04-26 16:32
ممنون ازینکه خیلی زود جواب میدید.
واقعاسپاسگذارم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # shayan zare 1394-03-28 02:37
با سلام
من یه سوال داشتم.
به یه کدی نیاز دارم که مانند وبسایت های بزرگ منوی تاشو بسازم؟؟؟
اگه میشه کمکم کنید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1394-03-28 09:29
سلام
اگه به آدرس های زیر بروید می تونید انواع منوها رو مشاهده کنید و کد اونا را دانلود کنید و ازشون استفاده کنید:
1. codepen.io/collection/DdHit/
2. codepen.io/tag/menu/

توجه داشته باشید که با کلیک بر روی هریک از تصاویر، کد آن آیتم در یک ادیتور آنلاین باز می شود. اگر بخواهید آن کد را دانلودکنید بر روی دکمه ی share و سپس دکمه ی export.zip کلیک کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # ZF 1394-03-26 16:13
سلام ببخشید میشه یه توضیح درمورد تفاوت slidebar gallery و sliderبدید؟ و اینکه اسلایدبار کد خاصی داره؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # احسان عباسی 1394-03-26 17:01
سلام
از slidebar gallery اطلاع چندانی ندارم اما از slider ها یا همان اسلایدشو ها برای نمایش عکس استفاده می شود. در ضمن باید اضافه کنم slider ها کدهای خاصی دارند مثلا در آدرس زیر می توانید اسلایدر cycle رو دانلود کنید و ازش در پروژه ی خودتون استفاده کنید: jquery.malsup.com/cycle/
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # ZF 1394-03-14 01:31
سلام خدا قوت و ممنون از آموزش مفیدتون
فقط ببخشید سورس کدش رو باید از تو اموزش PDF کپی کنیم؟میشه کد کامل این پروژه رو نمیشه بزارید توسایت؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-03-14 09:17
سلام
بعد از دانلود، سورس این پروژه در پوشه ی startbootstrap- creative-1.0.1 قرار دارد.
لازم هست که فایل index.html را با یک ویرایشگر متن باز کنید تا سورس کد را مشاهده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # ZF 1394-03-14 22:09
دستتون واقعا درد نکنه .ممنون.
من تقریبا دوساعت از pdfکد ها رو کپی کردم:(
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # alisha 1394-02-29 12:17
salam misha in site tono bisorat affline dar ekhtiiar ma bizarin??????
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1394-02-29 17:54 پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # Amin Ahmadi 1394-02-15 22:17
سلام.از کجا میتونم این اموزش رو بخرم ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1394-02-15 22:22
سلام از طریق لینک زیر می توانید فیلم آموش ساخت قالب واکنشگرا رو تهیه فرمایید:
http://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
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

بستن
مدرس:

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!