ویدئو معرفی دوره

قالب های طراحی شده در این دوره

پکیج آموزش بوت استرپ 5 ، 4 ، 3 ، طراحی سایت رسپانسیو

سلام به دوستان عزیز در مجموعه سئو 90 ، به یکی دیگر از پکیج های فوق العاده مجموعه ما خیلی خوش اومدین و خوشحالیم که تصمیم گرفتید تا مهارت خودتون رو در زمینه یادگیری بوت استرپ یکبار برای همیشه تضمین کنید . خب در این دوره ما یک سیستم منظم برای شما آماده کردیم که طی این سیستم منظم شما اول با ریشه بوت استرپ آشنا خواهید شد و بعد کم کم خواهیم رفت به سمت یادگیری تک تک نسخه های بوت استرپ . در این دوره آموزشی ما اول از هرچیزی از بوت استرپ 3 شروع خواهیم کرد دلیل هم این هستش که بوت استرپ تا نسخه 2 زیاد جالب نبود ، اما از نسخه 3 یک تحول بزرگ در بوت استرپ ایجاد شد و میشه گفت بوت استرپ 2 کلا کنار رفت و همه رفتن سراغ بوت استرپ 3 .
این ظهور بوت استرپ 3 نه تنها باعث تحول در دنیای طراحی قالب و رسپانسیو شد ، بلکه چون یک ساختار منظم و کاربر پسند داشت ، یک پشتوانه برای بوت استرپ شد تا بتونن بوت استرپ نسخه 4 و حتی 5 رو بر اساس بیس نسخه بوت استرپ 3 توسعه بدند . به همین دلیل برای ورود به دنیای بوت استرپ ، اول از هرچیزی ما باید بوت استرپ 3 رو خیلی خوب و کامل یاد بگیریم پس ما در این دوره آموزشی اول میریم سراغ بوت استرپ 3 . این نسخه از بوت استرپ رو اول از وب سایت خودش بررسی می کنیم و شما کم کم عادت می کنید به این وب سایت .

روش ما به این شکل هست که قصد نداریم تا بشینیم قدم به قدم تمامی منو های سایت بوت استرپ رو بررسی کنیم . هدف ما همیشه این هست که شما با یادگرفتن اصلی ترین موارد خیلی سربع به هدف مد نظرتون برسید پس اگر بخشی باشه که ما در طراحی قالب اصلا به اون نیاز نداشته باشیم ، قصد نداریم تا روی اون ترمز کنیم و وقتمون رو نلف کنیم . پس وقتی وارد سایت شدیم می خواهیم تا بخش هایی که خیلی مهمه رو با هم در قالب مثال های عملی بررسی کنیم و خط به خط بخش های مهم رو به شما توضیح بدیم تا یکبار برای همیشه با خیال راحت بتونید بوت استرپ رو به شکلی یاد بگیرید که خودتون در نسخه های بعدی خیلی راحت تفاوت ها رو بشناسید و با نسخه جدید کار کنید و نیاز به آموزش های دیگه ای هم نداشته باشید . پکیج آموزش بوت استرپ 5 ، 4 ، 3 ، از سه فصل اصلی تشکیل شده که در ادامه به توضیح این 3 فصل خواهیم پرداخت .

فصل اول – آموزش بوت استرپ 3 ، طراحی قالب رستوران

خب در فصل اول از این آموزش که در قالب 26 جلسه ارائه شده ، اول خواهیم رفت سراغ سایت بوت استرپ 3 ، همونطور که گفتیم المان های مهم رو جز به جز با هم بررسی می کنیم تا میرسیم به قسمت 9 از آموزش . یعنی از قسمت 1 تا قسمت 8 ، در قالب مثال های عملی و همچنین آموزش نکات بسیار مهم و اساسی بوت استرپ با هم آموزش خواهیم دید . از قسمت 9 تا قسمت 26 ، خواهیم رفت سراغ پروژه عملی . در این پروژه عملی ما یک وب سایت رستوران رو خیلی شیک و تمیز با هم پیاده سازی خواهیم کرد .

آمورش بوت استرپ 3

این وب سایت رستوران یک قالب فوق العاده شیک داره ، سعی کردیم تا در داخل این قالب علاوه بر صفحه اصلی ، صفحات داخلی قالب را هم طراحی کنیم ، مثل صفحاتی همچون فروشگاه ، صفحه جزئیات محصولات ، صفحه جزئیات مطالب ، صفحه اخبار و مقالات ، ساخت انواع جدول ها ، ساخت انواع فرم های کامنت و فرم های تماس ، ساخت بخش تب های محصولات ، ساخت بخش پست های اینستاگرام ، فرم خبرنامه ، ساخت منوهای رسپانسیو ، صفحه دسته بندی مطالب و … همگی در داخل این قالب و در عنوان یک پروژه سایت رسپانسیو بسیار شیک به شما آموزش داده خواهد شد .

از شما انتظار داریم تا تمامی دقت خودتون رو در فصل اول به دوره متمرکز کنید به این دلیل که اگر بوت استرپ 3 را خیلی خوب یاد بگیرید ، در مورد یادگیری بوت استرپ 4 و 5 هیچ مشکلی نخواهید داشت و به همین دلیل ما در جلسات آموزش بوت استرپ 3 سعی کردیم تا مباحث رو خیلی خوب به شما تفهیم کنیم . پس یادگیری بوت استرپ 3 ، برای یادگیری بوت استرپ 4 و 5 برای ما بسیار مهمه .

فصل دوم – مهاجرت از بوت استرپ 3 به 4 ، طراحی قالب لندینگ پیج

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

آموزش بوت استرپ 4
آموزش بوت استرپ 5

نمونه ای از صفحات طراحی شده توسط بوت استرپ 4 و 5 در این دوره

فصل سوم ، مهاجرت به بوت استرپ 5

خب دوستان از اونجایی که ما در 2 فصل گذشته به شکل کامل و میشه گفت سیر تا پیاز بوت استرپ 3 و 4 رو به شکل آموزشی و همچین عملی در قالب پروژه یاد گرفتیم ، در فصل سوم برای اینکه با بوت استرپ 5 خیلی خوب آشنا بشیم ، مجدد خواهیم رفت دنبال سایت بوت استرپ و ویژگی های نسخه 5 رو در فاز های بسیار مهم همانند بوت استرپ 3 بررسی خواهیم کرد و شما خواهید دید که حالا خودتون تمامی قسمت های بوت استرپ در نسخه 5 را تشخیص میدین و میتونید خیلی راحت از اون استفاده کنید . سعی خواهیم کرد تا با مثال های عملی ویژگی های بوت استرپ 5 رو با هم بررسی کنیم و شما پس از این فصل ، از طراحی قالب های رسپانسیو با نسخه های مختلف بوت استرپ لذت خواهید برد .

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

فصل 1 ، بوت استرپ 3 ، طراحی قالب رستوران
1

بررسی ساختار سایت های رسپانسیو و بوت استرپ

00:22:05
2

آموزش 0 تا 100 ستون بندی و Grid در بوت استرپ

00:22:13
3

نکات مهم ستون بندی در بوت استرپ

00:26:32
4

جدول ، فرم و تایپوگرافی در بوت استرپ

00:23:52
5

فرم ها ، دکمه ها ، تصاویر ، کلاس های کمکی

00:20:04
6

منو ها ، خطاها ، دراپ داون ، فونت آیکون ها

00:25:26
7

لیست گروه ، مودال ، تب بندی

00:24:55
8

تولتیپ ، آکاردئون ، اسلایدر

00:17:16
9

شروع قالب رستوران ، طراحی منو اصلی

00:25:18
10

طراحی بنر بالای صفحه اصلی

00:22:25
11

طراحی بخش معرفی رستوران

00:25:40
12

طراحی آخرین محصولات

00:25:46
13

طراحی آخرین محصولات

00:25:11
14

طراحی بخش پیشنهاد سرآشپز

00:25:35
15

طراحی بخش اخبار و مقالات

00:27:14
16

طراحی قسمت خبرنامه

00:22:48
17

بخش اینستاگرام و فوتر

00:21:00
18

اعمال تغییرات نهایی در صفحه اول

00:28:14
19

تنظیم حالت تبلت قالب

00:19:20
20

تنظیم حالت موبایل قالب

00:20:09
21

طراحی صفحه جزئیات محصول

00:24:36
22

طراحی صفحه جزئیات محصول

00:23:34
23

تنظیم رسپانسیو صفحه محصول

00:22:00
24

طراحی صفحه جزئیات مطالب

00:24:03
25

سایدبار و صفحه اخبار و مقالات

00:20:16
فصل 2 ، بوت استرپ 4 ، طراحی لندینگ پیج
26

تفاوت های کلی بوت استرپ 3 با 4

00:21:26
27

بررسی 0 تا سیستم Grid بوت استرپ 4

00:26:00
28

قوانین مهم ستون بندی در بوت استرپ 4

00:10:15
29

دکمه ها ، بردکرامب ، اسلایدر ، کارت ها

00:22:30
30

فرم ، مودال ، ناوبار ، پروگرس بار

00:24:51
31

بررسی کامل بخش واحدها در بوت استرپ 4

00:24:32
32

بررسی های نهایی بوت استرپ 4

00:14:15
33

طراحی منو و خدمات قالب لندینگ پیج

00:26:47
34

طراحی بخش خدمات ویژه سایت

00:19:20
35

بخش محصولات ، اسلایدر ، اجتماعی و فوتر

00:22:31
36

تکمیل جزئیات صفحه اصلی

00:24:48
37

تنظیم حالت تبلت و موبایل قالب

00:28:42
فصل 3 ، بوت استرپ 5 ، طراحی قالب ورزشی
38

بررسی بخش Layout , Getting Started

00:26:42
39

بررسی بخش Content , Forms

00:21:16
40

بخش Components

00:21:37
41

بررسی بخش Utilities

00:25:38
42

طراحی منو و اسلایدر قالب ورزشی

00:22:11
43

طراحی بخش خدمات و عضویت در سایت

00:22:57
44

طراحی پلن های قیمت ، محصولات و فوتر

00:19:26
45

تکمیل تمامی بخش های قالب

00:28:10
46

تنظیم رسپانسیو قالب

00:14:30

به عنوان بخش نهایی این دوره قصد داریم تا یک جدول کلی و البته کامل در مورد تفاوت هایی که از نسخه 3 بوت استرپ تا نسخه 5 ایجاد شدند خدمت شما ارائه کنیم که البته در بخش مقالات آموزش طراحی سایت به تفسیر این جدول را مورد بررسی قرار داده ایم و به شکل موشکافانه موارد را خدمت شما توضیح داده ایم . دوستانی که در دوره شرکت کرده اند می توانند از محتوای این جدول استفاده کنند و بخوبی آن را درک می کنند .

تفاوت های 3 نسخه بوت استرپ
بوت استرپ 3بوت استرپ 4بوت استرپ 5
Body
واحد ها پیکسل هستندواحد ها به rem تغییر پیدا کردند . هر rem معادل 16 px می باشد .همانند نسخه 4
یکسری فونت های پیشفرض تعیین شده اندفونت از سیستم کاربر خوانده می شودهمانند نسخه 4
فونت پیشفرض 14 px استفونت پیشفرض 16 px استهمانند نسخه 4
کلاس فونت سایز نداریمکلاس فونت سایز نداریمکلاس های fs-* , fw-* , fst-* , lh , display اضافه شدند
text truncate نداریمtext truncate نداریمtext truncate اضافه شد
Glyphicon داشتیمGlyphicon ها حذف شدندBootstrap Icon ها اضافه شدند
کتابخانه jQuery نیاز داشتیمکتابخانه jQuery نیاز داشتیمنیازمنده به jQuery نیستیم
کتابخانه RTL نداریمکتابخانه RTL نداریمبوت استرپ RTL اضافه شده است
واحد های فاصله نداریمواحدی های mb-* , mr-* , ml-* , mt-* , pb-* , pr-* , pl-* , pt-* اضافه شدندواحد های left , right با توحه به جهت وب سایت به start , end تغییر کردند
کلاس های عرض و طولی نداریمکلاس های w-100 , w-50 , mw-100 , mh-100 , h-100 , h-50 و… اضافه شدندهمانند نسخه 4
کلاس های نمایشی نداریمکلاس های d-block , d-inline , d-inline-block , d-none و… اضافه شدندهمانند نسخه 4
pull-right , pull-leftfloat-right , float-leftfloat-end , float-start
Grid
float ها دست و پای ما را بسته بودبه کمک تکنولوژی Flex قادر به هر کاری هستیمهمانند نسخه 4
کلاس row داریمکلاس row-cols و row-cols-breakpoint… و align-items داریمهمانند نسخه 4
کلاس container داریمکلاس container-breakpoint داریمهمانند نسخه 4
ستون بندی ها 4 تا هستندستون بندی ها به 5 افزایش یافته اندستون بندی ها به 6 افزایش یافته اند
xs-sm-md-lgcol-sm-md-lg-xlcol-sm-md-lg-xl-xxl
مشخصه های عرض موبایل تا 768 هستندمشخصه های عرض موبایل تا 576 هستندهمانند نسخه 4
col-md-offset-*offset-md-*همانند نسخه 4
Tables
جدول مشکی نداریمtable-dark | thead-light | thead-darkthead-light | thead-dark => table-dark
table-condencedtable-smtable-sm
table-borderless نداریمtable-borderless اضافه شدههمانند نسخه 4
کلاس table-responsive به div داده می شدtable-responsive به همراه breakpointهمانند نسخه 4
Forms
form-horizontalحذف شدههمانند نسخه 4
input-lg | input-smform-control-lg | form-control-smform-control ها بسیار جذاب تر شدند
haswarningنداردهمانند نسخه 4
Floating Label نداردFloating Label نداردFloating Label دارد
input از نوع Range و colorpicker نداریمinput از نوع Range داریمinput از نوع Range و colorpicker داریم
استایل input ها و .. معمولی هستنداستایل Radio و Check بهتر شدنداستایل Radio و Check بهتر شدند و حالت Switch اضافه شده است
Buttons
کلاس های دکمهکلاس های btn-light و btn-dark و btn-secondary اضافه شدندهمانند نسخه 4
btn-outline نداردکلاس های btn-outline اضافه شدند . btn-outline-successهمانند نسخه 4
کلاس btn xs-sm-lgbtn-xs حذف شده استهمانند نسخه 4
Images
img-responsiveimg-fluidهمانند نسخه 4
کلاس وسط نداریمd-block و m-x-autoهمانند نسخه 4
DropDowns
دراپ داون ها در داخل ul li هستنددراپ داون ها در داخل div li هستندهمانند نسخه 4
کلاس divider در تگ li هستندکلاس divider در تگ div قرار داردهمانند نسخه 4
btn-group-justifiedساپورت نمیشههمانند نسخه 4
Navbars
کلاس های navbar-default و navbar-reverseکلاس های navbar-light و navbar-darkهمانند نسخه 4
navbar-fixed-top | navbar-fixed-bottomfixed-top | fixed-bottomfixed-top | fixed-bottom | sticky-top
Pagination
کلاس pagination به ul داده میشهبه li کلاس page-item و به تگ a کلاس page-link داده میشههمانند نسخه 4
previous و next داشتیمنداریمهمانند نسخه 4
list group ها با استایل معمولیlist-group-flush اضافه شده استهمانند نسخه 4
Panels
panel , panel-body , panel-header , panel-footercard , card-body , card-header , card-footerهمانند نسخه 4
Slider
itemcarousel-itemهمانند نسخه 4
اسلایدر معمولی داریماسلایدر حالت Fade و لمسی اضافه شده استهمان ساختار 4 بعلاوع اسلایدر dark
Other
Modal ها معمولی هستندModal های وسط چین و اسکرول دار آمدندModal های فول اسکرین هم اضافه شدند
کلاس های border نداشتیمborder و border-color اضافه شدندborder-1 تا border-5 اضافه شدند
بک گراند gradient نداریمبک گراند gradient نداریمbg-gradient اضافه شد
breadcrumb ها معمولی هستندهمانند نسخه 3breadcrumb ها استایل بهتری دارند و می توان divider را تغییر داد
آکاردئون ها معمولی هستندآکاردئون ها بهتر شدندآکاردئون با کلاس flush اضافه شدند
دکمه های Close مشکی هستنددکمه های Close مشکی هستندbtn-close-white اضافه شده است
tooltip معمولیtooltip با خاصیت نوشتن htmltooltip برای svg
Spinner نداشتیمSpinner ها اضافه شدندهمانند نسخه 4
Toast نداشتیمToast ها اضافه شدندهمانند نسخه 4

با کدام المان های بوت استرپ کار خواهیم کرد ؟

خب دوستان در بالا کمی توضیحات خدمتتون ارائه کردیم اما بهتره ببینیم قالب هایی که در بالا برای شما پیش نمایشش را گذاشتیم قراره چه چیزهایی داخلشون استفاده بشه . خب قالب اول ما قالب رستوران هست . در داخل قالب اول ما سعی کردیم بوت استرپ 3 را مو به مو کار کنیم . المان های اصلی که داخل قالب اول به کار رفتن شامل Navbar , Tabs , Tables , Form , Button , List group , Modal  و …. هستند که ما به دلیل پایه ای بود بوت استرپ 3 تمامی تلاش و سعی خودمان را کردیم تا شما در همین ابتدای کار بخوبی بوت استرپ رو تفهیم بشید و در داخل نسخه های 4 و 5 مشکلی نداشته باشید . قالب رستوران ضمن اینکه با بوت استرپ طراحی شده اما برای هرچه بیشتر شیک شدن قالب خودمون هم کد نوشتیم و قالب رو با کدهای Css توسعه دادیم . در حین طراحی قالب رستوران البته اشاره کردیم که بوت استرپ بعنوان یک تحول در بوت استرپ بود اما بازهم با گذشت زمان کم کم بخش هایی داخل آن احساس نیاز می شد که در بوت استرپ 4 این نواقص تا حد زیادی رفع شدند .

قالب رستوران همچنین توام با نکات آموزشی بسیار زیادی برای شما دانشجوهای عزیز هست که میتونید هنر خودتون در زمینه Css را هم به شدت افزایش دهید . در این قالب ما از Bootstrap Tab ها استفاده کردیم برای بخش صفحه اصلی وب سایت و نمایش آخرین محصولات رستوران استفاده کردیم و بخوبی Tab ها را شخصی سازی کردیم تا شما اصول اصلاح استایل های بوت استرپ را هم یاد بگیرید . از بخش جداول برای صفحه جزئیات محصولات و غذاها و از بخش Bootstrap Form ها برای بخش نظرات و سفارش محصول استفاده کردیم .

بخش هایی مثل Listgroup , Panel , Breadcrumb , Tooltip از جمله دیگر المان هایی هستند که در صفحات داخلی قالب استفاده شدند . در این قالب از اسلایدر استفاده نشده است اما در قالب بوت استرپ 4 و بوت استرپ 5 از اسلایدر ها بخوبی استفاده کردیم . هدف این بوده است که شما در قالب 3 وب سایت کاربردی تمامی بخش ها را یاد بگیرید چون گنجاندن تمامی المان های بوت استرپ در یک قالب زمان زیادی از دوره میگرفت و اینکه تمامی المان های بوت استرپ در یک وب سایت عملا نیاز نیست .

خب از قالب زستوران که گذشتیم وارد بوت استرپ 4 و قالب لندینگ پیج نوشیدنی

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

در این قالب از بخش هایی همچون Navbar , RowCols , Slider , Card , Borders , Form , Listgroup , ImgClasses و … استفاده شده است که این المان ها بخوبی و در یک قالب شیک کنار هم قرار گرفته اند . ویژگی هایی که بوت استرپ 4 نسبت به نسخه 3 در اختیار ما قرار داد واقعا فوق العاده بود و ما بخوبی قدرت بوت استرپ 4 را به نمایش گذاشتیم . در این قالب از Table ها استفاده نشده به این دلیل که هم نیاز نبود و هم اینکه در قالب رستوران خیلی خوب از جداول استفاده کرده بودیم . اسلایدر این قالب به شکل متنی است و اسلایدر قالب بوت استرپ 5 از نوع تصویری و متنی که بخوبی شخصی سازی خواهد شد .

اما میرسیم به قالب ورزشی لندینگ پیج

خب بعد از اینکه رسیدیم به قالب ورزشی ، با بوت استرپ 5 کار می کنیم . المان های اصلی که در این قالب استفاده کردیم شامل : Navbar , Slider , SerachForm , Card , Table , Forms , FloatingLabels , Listgroup , Menus , Buttons  و … که بازهم در این قالب سعی بر این شده است تا اصلی ترین المان ها و همچنین المان های جدید که در جدول بالا مشاهده نمودید و به بوت استرپ 5 اضافه شده است استفاده شود . در کل در قالب بوت استرپ 4 و قالب بوت استرپ 5 اصلی ترین هدف کاهش کدهای استایل اختصاصی و استفاده از جدیدترین المان هایی است که به بوت استرپ اضافه شده است . البته لازم به ذکر هست که تنها المان های اصلی در این قسمت ذکر شدند و در داخل قالب المان های بسیار زیادی هستند که نیاز به توضیح در این قسمت ندارند و در پیش نمایش قالب ها و همچنین در ویدئو معرفی خدمتتان اراده  شدند . طراحی قالب رسپانسیو و همچنین شیک هدف اصلی دوره آموزش بوت استرپ بوده است .

نمونه آموزش جلسه 34

این ویدئو از جلسه 34 این دوره برای شما عزیزان قرار داده شده است تا سطح کیفی آموزشی و همچنین کیفیت صدا و تصویر را سنجش نمائید . در تمامی آموزش های سئو 90 سعی بر این بوده است که کیفیت صدا و تصویر بسیار مناسب بوده و همچنین حجم ویدئو هم مناسب باشد . این جلسه قسمت 34 از دوره آموزش بوت استرپ 4 می باشد که در این جلسه شما قسمتی از طراحی قالب لندینگ پیج نوشیدنی را مشاهده می کنید که به شکل کامل برای شما قرار داده شده است . در جلسه 34 آموزش بوت استرپ 4 از بخش های آموزش مباحث بوت استرپ 4 خارج شده ایم و در حال طراحی قالب هستیم . تمامی جلسات این دوره با همین کیفیت و با همین محتوای آموزشی جامع و با کیفیت خدمت شما ارائه شده است . امیدواریم بتوانیم در این دوره به شکل خیلی کاربردی ، آموزش بوت استرپ 5 ، آموزش بوت استرپ 4 و آموزش بوت استرپ 3 را بخوبی به شما دانشجویان محترم آموزش داده باشیم .

495,000 تومان – خرید