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

سرفصل ها و درس ها

مقدمه و شروع Intro & Getting Started

• به دوره خوش آمدید Welcome To The Course

• بوت استرپ چیست و چرا از آن استفاده کنیم؟ What Is Bootstrap & Why Use It?

• چه چیزی در بوت استرپ 4 جدید است؟ What's New In Bootstrap 4?

• تنظیم اولیه محیط Initial Environment Setup

• راه اندازی Bootstrap Sandbox Bootstrap Sandbox Setup

مقدمه و شروع Intro & Getting Started

• به دوره خوش آمدید Welcome To The Course

• بوت استرپ چیست و چرا از آن استفاده کنیم؟ What Is Bootstrap & Why Use It?

• چه چیزی در بوت استرپ 4 جدید است؟ What's New In Bootstrap 4?

• تنظیم اولیه محیط Initial Environment Setup

• راه اندازی Bootstrap Sandbox Bootstrap Sandbox Setup

تایپوگرافی و ابزارهای کاربردی Typography & Utilities

• بخش مقدمه Section Introduction

• سرفصل ها و تایپوگرافی پایه Headings & Basic Typography

• تراز و نمایش متن Text Alignment & Display

• شناورها و موقعیت های ثابت Floats & Fixed Positions

• رنگ ها و پس زمینه Colors & Background

• فاصله حاشیه و بالشتک Margin & Padding Spacing

• اندازه و حاشیه Sizing & Borders

• نقاط شکست CSS CSS Breakpoints

تایپوگرافی و ابزارهای کاربردی Typography & Utilities

• بخش مقدمه Section Introduction

• سرفصل ها و تایپوگرافی پایه Headings & Basic Typography

• تراز و نمایش متن Text Alignment & Display

• شناورها و موقعیت های ثابت Floats & Fixed Positions

• رنگ ها و پس زمینه Colors & Background

• فاصله حاشیه و بالشتک Margin & Padding Spacing

• اندازه و حاشیه Sizing & Borders

• نقاط شکست CSS CSS Breakpoints

اجزای CSS CSS Components

• بخش معرفی Section Intro

• دکمه ها و گروه های دکمه Buttons & Button Groups

• Navbar & Navs Navbar & Navs

• لیست گروه ها و نشان ها List Groups & Badges

• فرم ها و ورودی Forms & Input

• گروه های ورودی Input Groups

• هشدارها و نوارهای پیشرفت Alerts & Progress Bars

• جداول و صفحه بندی Tables & Pagination

• کار با کارت Working With Cards

• اشیاء رسانه ای Media Objects

• جامبوترون Jumbotron

اجزای CSS CSS Components

• بخش معرفی Section Intro

• دکمه ها و گروه های دکمه Buttons & Button Groups

• Navbar & Navs Navbar & Navs

• لیست گروه ها و نشان ها List Groups & Badges

• فرم ها و ورودی Forms & Input

• گروه های ورودی Input Groups

• هشدارها و نوارهای پیشرفت Alerts & Progress Bars

• جداول و صفحه بندی Tables & Pagination

• کار با کارت Working With Cards

• اشیاء رسانه ای Media Objects

• جامبوترون Jumbotron

سیستم شبکه و فلکس باکس Grid System & Flexbox

• بخش مقدمه Section Introduction

• سیستم شبکه ای Grid System

• تراز شبکه Grid Alignment

• کلاس های فلکس باکس Flexbox Classes

• حاشیه خودکار، بسته بندی و سفارش Auto Margin, Wrap & Ordering

سیستم شبکه و فلکس باکس Grid System & Flexbox

• بخش مقدمه Section Introduction

• سیستم شبکه ای Grid System

• تراز شبکه Grid Alignment

• کلاس های فلکس باکس Flexbox Classes

• حاشیه خودکار، بسته بندی و سفارش Auto Margin, Wrap & Ordering

ابزارک های جاوا اسکریپت JavaScript Widgets

• بخش مقدمه Section Introduction

• چرخ فلک لغزنده Carousel Slider

• فروپاشی و آکاردئون Collapse & Accordion

• نکات ابزار Tooltips

• پاپاورها Popovers

• مدال ها Modals

• ScrollSpy & Scolling Smooth ScrollSpy & Smooth Scolling

ابزارک های جاوا اسکریپت JavaScript Widgets

• بخش مقدمه Section Introduction

• چرخ فلک لغزنده Carousel Slider

• فروپاشی و آکاردئون Collapse & Accordion

• نکات ابزار Tooltips

• پاپاورها Popovers

• مدال ها Modals

• ScrollSpy & Scolling Smooth ScrollSpy & Smooth Scolling

راه اندازی صفحه بویلر با تم ساده Simple Theme Boiler Plate Setup

• ایجاد دیگ بخار Creating The Boiler

راه اندازی صفحه بویلر با تم ساده Simple Theme Boiler Plate Setup

• ایجاد دیگ بخار Creating The Boiler

پروژه 1 - تم اجتماعی LoopLab Project 1 - LoopLab Social Theme

• معرفی پروژه Project Intro

• راه اندازی و نوار ناوبری Setup & Navbar

• منطقه بخش خانه Home Section Area

• منطقه بخش را کاوش کنید Explore Section Area

• ایجاد و به اشتراک گذاری مناطق بخش Create & Share Section Areas

• پاورقی، تماس با مدال و پیمایش صاف منو Footer, Contact Modal & Menu Smooth Scroll

پروژه 1 - تم اجتماعی LoopLab Project 1 - LoopLab Social Theme

• معرفی پروژه Project Intro

• راه اندازی و نوار ناوبری Setup & Navbar

• منطقه بخش خانه Home Section Area

• منطقه بخش را کاوش کنید Explore Section Area

• ایجاد و به اشتراک گذاری مناطق بخش Create & Share Section Areas

• پاورقی، تماس با مدال و پیمایش صاف منو Footer, Contact Modal & Menu Smooth Scroll

پروژه 2 - تم کتاب Mizuxe Project 2 - Mizuxe Book Theme

• معرفی پروژه Project Intro

• راه اندازی Sass با کوالا Setting Up Sass With Koala

• نوار ناوبری سفارشی و نشان‌واره Custom Navbar & Logo

• ویترین و تغییر رنگ اصلی Showcase & Primary Color Change

• خبرنامه و جعبه Newsletter & Boxes

• درباره بخش با آکاردئون About Section With Accordion

• حوزه نویسندگان Authors Area

• تماس و پاورقی Contact & Footer

پروژه 2 - تم کتاب Mizuxe Project 2 - Mizuxe Book Theme

• معرفی پروژه Project Intro

• راه اندازی Sass با کوالا Setting Up Sass With Koala

• نوار ناوبری سفارشی و نشان‌واره Custom Navbar & Logo

• ویترین و تغییر رنگ اصلی Showcase & Primary Color Change

• خبرنامه و جعبه Newsletter & Boxes

• درباره بخش با آکاردئون About Section With Accordion

• حوزه نویسندگان Authors Area

• تماس و پاورقی Contact & Footer

پروژه 3 - تم چند صفحه ای Glozzom Project 3 - Glozzom Multi Page Theme

• معرفی پروژه Project Intro

• ویترین با چرخ فلک Showcase With Carousel

• آیکون‌های صفحه اصلی، بخش‌های سرفصل و اطلاعات Home Icons, Heading & Info Sections

• بخش ویدیو با حالت پخش خودکار Video Section With Autoplay Modal

• گالری عکس و خبرنامه Photo Gallery & Newsletter

• هدر صفحه و بخش درباره Page Header & About Section

• جعبه آیکون و لغزنده گواهی Icon Boxes & Testimonial Slider

• صفحه خدمات با سوالات متداول آکاردئون Services Page With FAQ Accordion

• صفحه وبلاگ با کارت Blog Page With Cards

• بخش تماس و کارکنان Contact & Staff Sections

پروژه 3 - تم چند صفحه ای Glozzom Project 3 - Glozzom Multi Page Theme

• معرفی پروژه Project Intro

• ویترین با چرخ فلک Showcase With Carousel

• آیکون‌های صفحه اصلی، بخش‌های سرفصل و اطلاعات Home Icons, Heading & Info Sections

• بخش ویدیو با حالت پخش خودکار Video Section With Autoplay Modal

• گالری عکس و خبرنامه Photo Gallery & Newsletter

• هدر صفحه و بخش درباره Page Header & About Section

• جعبه آیکون و لغزنده گواهی Icon Boxes & Testimonial Slider

• صفحه خدمات با سوالات متداول آکاردئون Services Page With FAQ Accordion

• صفحه وبلاگ با کارت Blog Page With Cards

• بخش تماس و کارکنان Contact & Staff Sections

پروژه 4 - رابط کاربری مدیریت بلاژن Project 4 - Blogen Admin UI

• معرفی پروژه Project Intro

• نوار ناوبری و سربرگ اصلی Navbar & Main Header

• دکمه ها و مدال ها را اضافه کنید Add Buttons & Modals

• اتمام داشبورد Finishing The Dashboard

• صفحات جدول منابع Resource Table Pages

• صفحات جزئیات و تنظیمات Details & Settings Pages

• نمایه و صفحه ورود Profile & Login Page

پروژه 4 - رابط کاربری مدیریت بلاژن Project 4 - Blogen Admin UI

• معرفی پروژه Project Intro

• نوار ناوبری و سربرگ اصلی Navbar & Main Header

• دکمه ها و مدال ها را اضافه کنید Add Buttons & Modals

• اتمام داشبورد Finishing The Dashboard

• صفحات جدول منابع Resource Table Pages

• صفحات جزئیات و تنظیمات Details & Settings Pages

• نمایه و صفحه ورود Profile & Login Page

پروژه 5 - Portfoligrid Project 5 - Portfoligrid

• معرفی پروژه Project Intro

• سربرگ اصلی Main Header

• صفحه اصلی جمع کردن محتوا Home Collapse Content

• رزومه جمع کردن محتوا Resume Collapse Content

• محتوای جمع‌شده کار Work Collapse Content

• تماس با جمع کردن محتوا Contact Collapse Content

پروژه 5 - Portfoligrid Project 5 - Portfoligrid

• معرفی پروژه Project Intro

• سربرگ اصلی Main Header

• صفحه اصلی جمع کردن محتوا Home Collapse Content

• رزومه جمع کردن محتوا Resume Collapse Content

• محتوای جمع‌شده کار Work Collapse Content

• تماس با جمع کردن محتوا Contact Collapse Content