خیلی ممنون همین الان خریداری کردم خیلیم عالی❤️
آموزش جامع بوت استرپ 5 (Bootstrap) پروژه عملی
قبلا تا حدودی شما را با فریم ورک بوت استرپ آشنا کردیم. در این مقاله قصد داریم بوت استرپ 5 را به شما معرفی کنیم. با ما همراه باشید.
تاریخچه بوت استرپ 5
سازندهی اصلی توییتر به علت وجود مشکلات پایهای در پروژههای دیگر تصمیم به ساخت یک سیستم داخلی و قدرتمند به نام Bootstrap گرفت و در اگوست سال 2011، توییتر Bootstrap را بصورت متن باز و رایگان به عنوان یک فریم ورک طراحی وبسایت در اختیار دیگران قرارداد و در فوریه 2012 به یکی از محبوبترین پروژهها در سایت Github تبدیل شد. از آن جایی که هر چیزی بدون نقص و کامل نیست این فریم ورک تغییر کرد. کتابخانههای زیادی در رقابت با بوت استرپ هستند اما مزیتی که هست این فریم ورک خانوادهی بزرگی است که در این چند سال مورد توجه عموم مردم قرار گرفته و هر بار توسط برنامهنویسان و طراحان آپشنهای جدیدی به آن افزوده شد. کم کم نسخههای جدید از این فریم ورک ارائه شد تا اینکه به نسخهی 5 با تغییرات و قابلیتهای بینظیری رسید.
زمان انتشار بوت استرپ نسخه 5
برای این که بوت استرپ از کتابخانههای رقیب خود جلو بزند و به نوعی یک فریم ورک به خصوصی باشد تمامی اعضای گروه توسعه دهندگان بوت استرپ در این زمینه تلاش کردند. هدف اعضای گروه اضافه کردن و به روزرسانیهای پایدار در نسخه رسمی و اولیه هر نسخه بوت استرپ بود. این گروه با مسئلهای مواجه بودند. میلیونها طراح وب از سراسر دنیا از این فریم ورک در پروژههای خود استفاده میکردند و متاسفانه جای برای تغییرات بزرگ یا باگهای بزرگ نبود. همین موضوع باعث تا این نسخه در طی بازهی زمانی تقریبا زیادی عرضه شود. نسخهی 5 این فریم ورک ارائه شد و در دسترس عموم مردم است اما هنوز در مرحلهی آزمون و خطاست و راه زیادی تا اصلاح کامل آن باید طی شود.
نحوهی دسترسی به بوت استرپ 5
نسخهی پنجم هم مانند نسخههای دیگر از طریق سایت اصلی در دسترس عموم قرار میگیرد. اما با توجه به این که این نسخه امادگی استفاده رسمی در پروژههای تجاری را ندارد توصیه میکنم حتما از این نسخه در پروژههای تستی خود استفاده کنید. چرا که احتمال دارد یک سری تغییرات زیر ساختی در آن اعمال شود. بعد از ارائهی نسخهی رسمی حتی اگر از نسخههای پایینتر استفاده کردید به راحتی میتوانید تغییراتی اعمال کنید و از آن بهره ببرید.
یادگیری بوت استرپ 5
پر واضح است که در کل برای یادگیری بوت استرپ باید بر دو زبان اصلی HTML و CSS کاملا تسلط داشته باشید. چرا که مبنای طراحی اکثریت فریم ورکها این دو زبان میباشد. با ساختار صفحات وب، تگها ، عناصر html، دستورات و قوانین css حتما آشنا باشید. سومین موردی که حتما باید به آن تسلط کافی داشته باشید زبان جاوا اسکریپت است چرا که برخی المان های آن مانند اسلایدر و منو و... توسط این زبان نوشته شدهاند. اما برای یادگیری نسخهی پنجم باید بگویم اگر با نسخههای قدیمی مخصوصا نسخهی چهارم کارکرده باشید یادگیری این نسخه راحت خواهد بود. حتی خیلی از افراد با یک مثال که خود مجموعه بوت استرپ در بخش Examples قرار میدهد به راحتی میتوانند به ویژگیها و تغییرات جدید پی ببرند.
ویژگیهای متفاوت بوت استرپ 5
1. دارای کلاسهای جدید شبکهبندی
نسخههای قبلی کلاسهای شبکهبندی تا مدیا کوئری لارج (lg) یعنی عرض 1024 پیکسل ساپورت میکردند. اما در آخرین ورژن یک کلاس شبکهبندی جدید به عنوان col-xxl تحولی را در عرض شبکهبندیها ایجاد کرد. به گونهای که نمایشگرهای بزرگ تر از 1400 پیکسل را هم ساپورت میکنند.
برخی از کلاسهای اضافه شده در این نسخه عبارتند از:
- gx-*(classes control the horizontal/column gutter width)
- gy-*(classes control the vertical/row gutter width)
- g-*(classes control the horizontal & vertical gutter width)
- rows-cols-auto
2. طیف گستردهتر رنگها در بوت استرپ 5
دو کلاس خیلی مهم در این زمینه به کلاسهای نسخهی چهارم اضافه شدند که شامل دو کلاس bg-opacity و bg-gradient میباشند. ما در نسخههای قبلی بسیار محدود بودیم و در این نسخه از طی رنگ گستردهتری برخوردار هستیم.
3. استفاده کتابخانه Sass:
Sass مخفف واژه Syntactically Awesome StyleSheets میباشد. قبل از اینکه اشاره کنم در نسخهی پنجم چه کاری را انجام میدهد بهتر است علت ارائهی آن را توضیح دهم. Css یکی از سادهترین زبانهای برنامهنویس است. اما روزانه با تحولاتی که برای این زبان رغم میخورد پیچیدهتر و برزگتر میشود. در نتیجه استفاده از آن سختتر و پردازش کدها بسیار زمان میبرد. در این راستا Sass طراحی شد تا امکانات جدیدی مانند متغییرها، چیدمان تگها، ترکیب کدها و ویژگیهای دیگری از یک زبان برنامهنویسی را به Css اضافه کند. این کتابخانه که از شاخهای از سی اس اس است بز مبنای جاوا اسکریپت طراحی شده است. کاربرد این کتابخانه این است که به راحتی میتوانیم بر مبنای چیزی که احتیاج داریم متغیر تعریف کنیم. در نتیجه کدهای بهتری میتوانیم ارائه دهیم. در این نسخه از Sass استفاده شده که به راحتی میتوانیم تغییرات خودمان را به بوتاسترپ اضافه کنیم.
4. حذف JQuery در بوت استرپ 5
جی کوئری یک کتابخانه از جاوا اسکریپت است که برای توسعهی سریع وب ارائه شد. در این راستا 4 اقدام مهم انجام میدهد. اسناد HTML را میسنجد. به رویدادها رسیدگی میکند. و متحرکسازی و تعاملات (AJAX) را به عهده دارد. این کتابخانه به گونهای طراحی شد تا روشی را که با آن جاوا اسکریپت را می نویسند تغییر دهد. اما برای عمکرد سریعتر جی کوئری از فریم ورک ورک بوتاسترپ 5 حذف شد. vanilla js به عنوان جایگزین ارائه شد که بسیار نزدیک به هستهی اصلی جاوا اسکریپت مییاشد. همچنین دست توسعهدهندگان بوتاسترپ برای قابلیتهای به روزتر و مدرنتر بازتر خواهد بود. بعضی افراد که به این کتاخانه تسلط کافی ندارند میتوانند همچنان از جی کوئری استفاده کنند. اما باید بگویم که این نسخه با وانیلا سازگاری بیشتری دارد.
5. بوت استرپ 5 از اینترنت اکسپلور پشتیبانی نمیکند.
در نسخهی پنجم بر خلاف نسخهی چهارم از ورژن 10 و 11 مرورگرهای اینترنتی اینترنت اکسپلور ساپورت نشده است که این یک مزیت بسیار خوبی است. در نسخهی چهارم به علت استفاده از اینترنت اکسپلور کدها حجم بیشتری داشتند و توسعهدهندگان بسیار محدود بودند. اما در نسخهی پنجم دست شما را برای استایلدهی شخصی باز کرده است. از این رو می توانید تنوع بیشتری را در این ورژن از این فریم ورک محبوب تجربه کنید.
6. بروز کردن فرم کنترلها
همان طور که اشاره شد دست طراح در این نسخه بسیار باز است. او میتواند با طراحی دلخواه خود سایت را بیشتر شخصیسازی کند.
7. توسعهی بیشتر Navbar و فرمها
یکی از کامپوننتهای جذاب بوت استرپ، Navbar میباشد و بهتر از همه اینکه منو بار و فرمها در بوت استرپ در نسخهی پنج بهبود یافته است. در نتیجه کاربر دسترسی بیشتری خواهد داشت.
8. ارائهی نسخه جدید و کامل از آیکنها
SVG یا همان Scalable Vector Graphics کمک میکند تا همهی فایلها از جمله آیکونها، لوگوها و ترسیمات در سایت به بهترین، زیباترین، و با کیفیتترین حالت ممکن قابل مشاهده باشند. بر این اساس در سایت فقط یک راه وجود دارد که از این کتابخانه استفاده کنیم. نسخهی پنجم این کتابخانه را در اختیار ما قرار داده است. به کمک این ابزار میتوانیم با حجم مناسب و کیفیت و تنوع مناسب در سایت هر فایلی را ارائه دهیم.
در پایان
در این محتوا سعی کردیم شما را با بوت استرپ 5 و ویژگیهای آن آشنا کنیم. به کمک این نسخه میتوانید کارهای حرفهایتری ارائه دهید. اگر قصد دارید در این زمینه به درآمدزایی خوبی برسید تعلل نکنید. دورهی بوتاسترپ 5 از مجموعهی کدیاد به شما کمک میکند تا از صفر تا صد این فرم ورک را آموزش ببینید و به تسلط کافی برسید. منتظر شما عزیزان هستیم.
سرفصل های دوره
بررسی وب سایت بوت استرپ و پیش نیاز ها
نحوه نصب و استفاده از بوت استرپ
بررسی breakpoint ها و کلاس container
بررسی grid (قسمت 1)
بررسی grid (قسمت 2)
بررسی grid (قسمت 3)
بررسی grid (قسمت 4)
بررسی grid (قسمت آخر)
چیدمان در بوت استرپ (Columns)(جلسه 1)
چیدمان در بوت استرپ (Columns)(جلسه 2)
چیدمان واکنشگرا و Display در بوت استرپ
ابزار قدرتمند flex (جلسه 1)
ابزار قدرتمند flex (جلسه 2)
ابزار قدرتمند flex (جلسه 3)
سفارشی سازی المان ها (order)
مینی پروژه (ساخت منوی وب سایت)
ادامه مبحث چیدمان
Gutter در بوت استرپ
spacing (margin & padding)
bootstrap-reboot
کار با متن ها در بوت استرپ (جلسه 1)
کار با متن ها در بوت استرپ (جلسه 2)
تصاویر و شناور کردن در بوت استرپ (img & float)
رنگ ها در بوت استرپ
background & border
position در بوت استرپ (جلسه اول)
position در بوت استرپ (جلسه دوم)
دکمه ها در بوت استرپ (Buttons)
Button group در بوت استرپ
استفاده از آیکون ها
معرفی پروژه اول
قالب وب سایت شخصی (جلسه اول)
قالب وب سایت شخصی (جلسه دوم)
قالب وب سایت شخصی (جلسه سوم)
قالب وب سایت شخصی (جلسه آخر)
nav در بوت استرپ
collapse در بوت استرپ
dropdown در بوت استرپ
navbar در بوت استرپ
offcanvas در بوت استرپ
carousel در بوت استرپ (اسلایدر)
accordion و alert در بوت استرپ
breadcrumb و card در بوت استرپ
List Group در بوت استرپ
modal در بوت استرپ
pagination و placeholder
popovers و progress در بوت استرپ
Scrollspy و Spinners
Toasts در بوت استرپ
tooltip و ادامه کار با ابزار های بوت استرپ
فرم ها در بوت استرپ
فرم ها در بوت استرپ (جلسه دوم )
فرم ها در بوت استرپ (جلسه سوم )
Input Group
اعتبار سنجی فرم ها
کار با جدول در بوت استرپ (1)
کار با جدول در بوت استرپ (2)
معرفی پروژه عملی فروشگاه
پروژه عملی فروشگاه (تنظیمات اولیه)
پروژه عملی فروشگاه (ساخت navbar)
پروژه عملی فروشگاه (تکمیل navbar)
پروژه عملی فروشگاه (اسلایدر و گالری تصاویر)
پروژه عملی فروشگاه (افزودن 2 اسلایدر به صفحه اصلی)
پروژه عملی فروشگاه (فوتر و تکمیل صفحه اصلی)
پروژه عملی فروشگاه (صفحه فروشگاه)
پروژه عملی فروشگاه (پایان صفحه فروشگاه و ایجاد صفحه تکی محصول)
پروژه عملی فروشگاه (ادامه صفحه تکی محصول)
پروژه عملی فروشگاه (صفحه تکی محصول نظرات کاربران)
پروژه عملی فروشگاه (اتمام صفحه تکی محصول)
ایجاد صفحه ورود به سایت و ثبت نام
معرفی پروژه دوم
ایجاد پروژه
افزودن loader
افزودن Search Box
تکمیل Header
افزودن Dropdown Notification به Header
افزودن منوی کاربر
افزودن منو
افزودن اسلایدر
تنظیمات اسلایدر
افزودن اسلایدر دوم
تنظیم اسلایدر دوم و سوم
تنظیمات اسلایدر 2 و 3
ادامه پروژه عملی
افزودن اسلایدر دوره ها
ادامه اسلایدر دوره ها
اتمام اسلایدر دوره ها
پیشنیاز های دوره چه چیزهایی هستند؟
- این دوره پیشنیازی ندارد
نظرات دانشجویان
abolfazl hosseiny |
دانشجوی دوره آموزش جامع بوت استرپ 5 (Bootstrap) پروژه عملی
محمدمهدی روزبهانی |
دانشجوی دوره آموزش جامع بوت استرپ 5 (Bootstrap) پروژه عملی
سلام استاد خسته نباشید ممنونم بابت این اموزش خوب شما خیلی دقیق و واضحه توضیح دادی واقعا عالی بود ممنون. فقط یک سوال داخل دوره ها گفته بودید که صفحه ادمین و فروشگاهی طراحی میکنید خب فروشگاهی طراحی شد ولی صفحه ادمین نشد اگه میشه اونم طراحی کنید و بذارید خیلی ممنون.
سوالات متداول
بوت استرپ یک کتابخانه طراحی UI برای وب است که دارای بسیاری از المان های طراحی می باشد که توسعه دهنده به آسانی با صدا زدن و استفاده از کلاس های موجود در این کتابخانه قادر به استفاده از قالب های استاندارد در پروژه خواهد بود.
ساختار اصلی کتابخانه بوت استرپ ۵ بدین صورت است که این کتابخانه جذاب دارای بسیاری از المان های طراحی استاندارد می باشد که توسعه دهنده در صورت نیاز می تواند هر کلاس را برای یک المان صدا بزند و المان از آن کلاس پیروی میکند. ساختار بوت استرپ ۵ بسیار ساده است و تنها لازم است که اسم کلاس های این کتابخانه را یاد بگیرید.
بله، دوره آموزش جامع بوت استرپ ۵، کاملا پروژه محور است و برای درک بهتر مفاهیم اصلی دوره و یادگیری کاربردی آن، تعداد ۲ پروژه در این دوره آموزشی توسعه داده خواهد شد. دانشجویان عزیز بی شک پس از گذراندن دوره آموزش جامع بوت استرپ ۵، قادر به طراحی قالب هرگونه وب سایتی خواهند بود.
کتابخانه UI بوت استرپ ۵ ویژگی های بسیار جذابی را در اختیار برنامه نویسان و طراحان وب قرار می دهد. برخی از این ویژگی های منحصر به فرد عبارت اند از : (کلاس های جدید شبکه بندی، طیف گسترده رنگ ها در این کتابخانه، استفاده از کتابخانه Sass، بروز کردن فرم کنترل ها، شخصی سازی المان ها و …).
خیر، کتابخانه بوت استرپ برای یادگیری بسیار آسان است و تنها کاری که لازم است برای شروع کار با آن انجام دهید، داشتن تسلط به HTML و CSS است. در کنار داشتن این تسلط، برای اینکه بتوانید به همه المان ها و دستورات این کتابخانه آشنا شوید، نیازمند یک دوره قوی و جذاب هستید که دوره آموزش جامع بوت استرپ ۵ به همراه پروژه عملی آکادمی برنامه نویسی کدیاد از همان دوره هاست.
دوره آموزش جامع بوت استرپ ۵ به همراه پروژه عملی برای افرادی که علاقه مند به حوزه طراحی وب سایت، مخصوصا طراحی قالب های ریسپانسیو هستند بسیار مناسب است. همچنین ما این دوره جذاب را به افرادی که دوست دارند تا از المان های آماده و استاندارد برای طراحی قالب وب سایت خود استفاده کنند معرفی میکنیم.
برای اینکه شما عزیزان بتوانید در دوره آموزش جامع بوت استرپ ۵ شرکت کنید و مفاهیم اصلی را به آسانی درک کنید، لازم است تا قبل از شروع با زبان های نشانه گذاری HTML و CSS آشنایی کاملی داشته باشید تا بتوانید عملکرد بسیار خوبی از خود در طول دوره نشان دهید.
یکی از مهم ترین ویژگی های این دوره، پروژه محور بودن آن است که در این دوره سعی بر این باور بوده است تا با توسعه پروژه های عملی جذاب، دانشجو مطالب را بهتر درک کند. در این دوره آموزشی پروژه های قالب فروشگاهی و طراحی یک وبسایت آموزشی خلق خواهد شد.