آموزش توسعه Bootstrap 4 برای حرفه ای ها [ویدئو]

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

بخش مقدمه Introduction section

• معرفی دوره Course Introduction

• این دوره برای چه کسانی است؟ Whom is This Course for?

• آنچه برای موفقیت در این دوره نیاز دارید What You Need to Succeed This Course

• مزایا و معایب Advantages and Disadvantages

• این دوره چه چیزی را پوشش خواهد داد؟ What This Course Will Cover?

• بررسی زبان نشانه گذاری فرامتن (HTML). Hypertext Markup Language (HTML) Review

• بررسی برگه های سبک آبشاری (CSS). Cascaded Style Sheets (CSS) Review

بوت استرپ 101 Bootstrap 101

• چارچوب در مقابل کتابخانه Framework vs Library

• مقدمه ای بر بوت استرپ Introduction to Bootstrap

• شروع شدن Getting Started

برگه های سبک آبشاری Sassy (SCSS) + Gulp Sassy Cascaded Style Sheets (SCSS) + Gulp

• معرفی ورق های سبک نحوی عالی (Sass). Syntactically Awesome Style Sheets (Sass) Introduction

• معرفی Gulp Gulp Introduction

• نصب برگه های سبک نحوی عالی (Sass) در ویندوز Installing Syntactically Awesome Style Sheets (Sass) on Windows

• نصب Node.js و NPM Installing Node.js and NPM

• شروع کار با Gulp و Style Sheets از نظر نحوی عالی (Sass) Starting out with Gulp and Syntactically Awesome Style Sheets (Sass)

• تست با BrowserSync Testing with BrowserSync

• ساختار پروژه از نظر نحوی عالی Style Sheets (Sass). Syntactically Awesome Style Sheets (Sass) Project Structure

• متغیرها و تودرتو Variables and Nesting

• اصلاح کننده عنصر بلوک (BEM) Block Element Modifier (BEM)

• گسترش می دهد، مخلوط می کند و شامل می شود Extends, Mixins, and Includes

• توابع و اپراتورها Functions and Operators

• مشکل LAB1 LAB1 Problem

• محلول LAB1 LAB1 Solution

• مشکل LAB2 LAB2 Problem

• محلول LAB2 LAB2 Solution

گرید و فلکس باکس Grid and Flexbox

• فلکس باکس Flexbox

• فلکس باکس Flexbox

• نصب با NPM Installing with NPM

• نصب با NPM Installing with NPM

• افزودن بوت استرپ سفارشی به پروژه Adding Custom Bootstrap to Project

• افزودن بوت استرپ سفارشی به پروژه Adding Custom Bootstrap to Project

• کانتینر و نقاط شکست Container and Breakpoints

• کانتینر و نقاط شکست Container and Breakpoints

• گزینه های شبکه Grid Options

• گزینه های شبکه Grid Options

• ستون های برابر عرض Equal Width Columns

• ستون های برابر عرض Equal Width Columns

• ناودان و تراز Gutters and Alignment

• ناودان و تراز Gutters and Alignment

• از چه چیزی در Bootstrap Grid اجتناب کنیم؟ What to Avoid in Bootstrap Grid?

• از چه چیزی در Bootstrap Grid اجتناب کنیم؟ What to Avoid in Bootstrap Grid?

• برگه‌های سبک تودرتو و نحوی عالی (Sass) Nesting and Syntactically Awesome Style Sheets (Sass)

• برگه‌های سبک تودرتو و نحوی عالی (Sass) Nesting and Syntactically Awesome Style Sheets (Sass)

• مشکل آزمایشگاه Lab Problem

• مشکل آزمایشگاه Lab Problem

• راه حل آزمایشگاهی Lab Solution

• راه حل آزمایشگاهی Lab Solution

گرید و فلکس باکس Grid and Flexbox

تایپوگرافی Typography

• تایپوگرافی Typography

• تایپوگرافی Typography

• اندازه فونت پاسخگو (RFS) Responsive Font Sizes (RFS)

• اندازه فونت پاسخگو (RFS) Responsive Font Sizes (RFS)

• اندازه فونت پاسخگو (RFS) در عمل Responsive Font Sizes (RFS) in Action

• اندازه فونت پاسخگو (RFS) در عمل Responsive Font Sizes (RFS) in Action

• ریتم عمودی به روز شد Vertical Rhythm Updated

• ریتم عمودی به روز شد Vertical Rhythm Updated

تایپوگرافی Typography

کد، تصاویر و شکل ها Code, Images, and Figures

• کد Code

• کد Code

• تصاویر و تصاویر Images and Figures

• تصاویر و تصاویر Images and Figures

• نحو جدول Table Syntax

• نحو جدول Table Syntax

• جداول بوت استرپ Bootstrap Tables

• جداول بوت استرپ Bootstrap Tables

• جداول پاسخگو بوت استرپ Bootstrap Responsive Tables

• جداول پاسخگو بوت استرپ Bootstrap Responsive Tables

• هیچ یک از جداول پاسخگو بوت استرپ None Bootstrap Responsive Tables

• هیچ یک از جداول پاسخگو بوت استرپ None Bootstrap Responsive Tables

• مشکل آزمایشگاه Lab Problem

• مشکل آزمایشگاه Lab Problem

• راه حل آزمایشگاهی Lab Solution

• راه حل آزمایشگاهی Lab Solution

کد، تصاویر و شکل ها Code, Images, and Figures

اجزای 1 - هشدارها، نشان‌ها، خرده نان‌ها و نان تست‌ها Components 1 - Alerts, Badges, Breadcrumbs, and Toasts

• ماژول های گره Node Modules

• ماژول های گره Node Modules

• ساخت جاوا اسکریپت Building JavaScript

• ساخت جاوا اسکریپت Building JavaScript

• Util.js Util.js

• Util.js Util.js

• هشدارها Alerts

• هشدارها Alerts

• رنگ های بوت استرپ Bootstrap Colors

• رنگ های بوت استرپ Bootstrap Colors

• بستن هشدارها Close Alerts

• بستن هشدارها Close Alerts

• هشدارهای جاوا اسکریپت JavaScript Alerts

• هشدارهای جاوا اسکریپت JavaScript Alerts

• نشان ها Badges

• نشان ها Badges

• خرده نان Breadcrumb

• خرده نان Breadcrumb

• مشکل آزمایشگاه Lab Problem

• مشکل آزمایشگاه Lab Problem

• راه حل آزمایشگاهی Lab Solution

• راه حل آزمایشگاهی Lab Solution

اجزای 1 - هشدارها، نشان‌ها، خرده نان‌ها و نان تست‌ها Components 1 - Alerts, Badges, Breadcrumbs, and Toasts

اجزای 2 - دکمه ها، گروه های دکمه ها و صفحه بندی Components 2 - Buttons, Button Groups, and Pagination

• دکمه ها Buttons

• دکمه ها Buttons

• نادیده گرفتن بوت استرپ Overriding Bootstrap

• نادیده گرفتن بوت استرپ Overriding Bootstrap

• حالت دکمه Button State

• حالت دکمه Button State

• گروه دکمه Button Group

• گروه دکمه Button Group

• صفحه بندی Pagination

• صفحه بندی Pagination

اجزای 2 - دکمه ها، گروه های دکمه ها و صفحه بندی Components 2 - Buttons, Button Groups, and Pagination

اجزای 3 - کارت Components 3 - Cards

• کارت Card

• کارت Card

• شی رسانه Media Object

• شی رسانه Media Object

• گروه لیست List Group

• گروه لیست List Group

• مشکل آزمایشگاه Lab Problem

• مشکل آزمایشگاه Lab Problem

• راه حل آزمایشگاهی Lab Solution

• راه حل آزمایشگاهی Lab Solution

اجزای 3 - کارت Components 3 - Cards

اجزای 4 - چرخ فلک، فروپاشی و کشویی Components 4 - Carousel, Collapse, and Dropdown

• چرخ فلک Carousel

• چرخ فلک Carousel

• جاوا اسکریپت چرخ فلک Carousel JavaScript

• جاوا اسکریپت چرخ فلک Carousel JavaScript

• سقوط - فروپاشی Collapse

• سقوط - فروپاشی Collapse

• کشویی Dropdown

• کشویی Dropdown

• جاوا اسکریپت کشویی Dropdown JavaScript

• جاوا اسکریپت کشویی Dropdown JavaScript

• جامبوترون Jumbotron

• جامبوترون Jumbotron

• مشکل آزمایشگاه Lab Problem

• مشکل آزمایشگاه Lab Problem

• راه حل آزمایشگاهی Lab Solution

• راه حل آزمایشگاهی Lab Solution

اجزای 4 - چرخ فلک، فروپاشی و کشویی Components 4 - Carousel, Collapse, and Dropdown

اجزای 5 - فرم ها، گروه های ورودی، Navs و نوار ناوبری Components 5 - Forms, Input Groups, Navs, and Navbar

• طرح بندی فرم ها Forms layout

• طرح بندی فرم ها Forms layout

• اعتبار سنجی فرم ها و فرم های سفارشی Forms Validation and Custom Forms

• اعتبار سنجی فرم ها و فرم های سفارشی Forms Validation and Custom Forms

• مؤلفه تست فرم ها Forms Testing Component

• مؤلفه تست فرم ها Forms Testing Component

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

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

• Navs Navs

• Navs Navs

• نوار ناوبری Navbar

• نوار ناوبری Navbar

• طرح‌های رنگی نوار ناوبری Navbar Color Schemes

• طرح‌های رنگی نوار ناوبری Navbar Color Schemes

• Nav Tabs و List Tabs Group Nav Tabs and List Group Tabs

• Nav Tabs و List Tabs Group Nav Tabs and List Group Tabs

• مشکل آزمایشگاه Lab Problem

• مشکل آزمایشگاه Lab Problem

• راه حل آزمایشگاهی Lab Solution

• راه حل آزمایشگاهی Lab Solution

اجزای 5 - فرم ها، گروه های ورودی، Navs و نوار ناوبری Components 5 - Forms, Input Groups, Navs, and Navbar

اجزای 6 - Modal، Progress، Scrollspy و Spinners Components 6 - Modal, Progress, Scrollspy, and Spinners

• مدال Modal

• مدال Modal

• جاوا اسکریپت معین Modal JavaScript

• جاوا اسکریپت معین Modal JavaScript

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

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

• Scrollspy Scrollspy

• Scrollspy Scrollspy

• اسپینرها Spinners

• اسپینرها Spinners

• مشکل آزمایشگاه Lab Problem

• مشکل آزمایشگاه Lab Problem

• راه حل آزمایشگاهی Lab Solution

• راه حل آزمایشگاهی Lab Solution

اجزای 6 - Modal، Progress، Scrollspy و Spinners Components 6 - Modal, Progress, Scrollspy, and Spinners

اجزای 7 - پاپوور، نان تست و راهنمای ابزار Components 7 - Popovers, Toasts, and Tooltips

• راهنمای ابزار Tooltip

• راهنمای ابزار Tooltip

• پاپاورها Popovers

• پاپاورها Popovers

• نان تست Toasts

• نان تست Toasts

• برگه تقلب بوت استرپ Bootstrap Cheat Sheet

• برگه تقلب بوت استرپ Bootstrap Cheat Sheet

اجزای 7 - پاپوور، نان تست و راهنمای ابزار Components 7 - Popovers, Toasts, and Tooltips

دسترسی Accessibility

• مقدمه ای بر قابلیت دسترسی Introduction to Accessibility

• مقدمه ای بر قابلیت دسترسی Introduction to Accessibility

• گزینه های دسترسی Accessibility Options

• گزینه های دسترسی Accessibility Options

دسترسی Accessibility

خدمات رفاهی Utilities

• ابزارهای کمکی - Borders، Clearfix، Close Icon، Colors، Display و Embed Utilities - Borders, Clearfix, Close Icon, Colors, Display, and Embed

• ابزارهای کمکی - Borders، Clearfix، Close Icon، Colors، Display و Embed Utilities - Borders, Clearfix, Close Icon, Colors, Display, and Embed

• ابزارهای کاربردی - فلکس، شناور، سرریز، موقعیت، و خوانندگان صفحه Utilities - Flex, Floats, Overflow, Position, and Screen Readers

• ابزارهای کاربردی - فلکس، شناور، سرریز، موقعیت، و خوانندگان صفحه Utilities - Flex, Floats, Overflow, Position, and Screen Readers

• ابزارهای کاربردی - سایه، اندازه، فاصله، پیوند کشیده، متن، تراز عمودی، و دید Utilities - Shadow, Sizing, Spacing, Stretched Link, Text, Vertical Align, and Visibility

• ابزارهای کاربردی - سایه، اندازه، فاصله، پیوند کشیده، متن، تراز عمودی، و دید Utilities - Shadow, Sizing, Spacing, Stretched Link, Text, Vertical Align, and Visibility

• موضوع بندی Theming

• موضوع بندی Theming

خدمات رفاهی Utilities

پروژه 1 Project 1

• معرفی صفحه محصول واحد Single Product Page Intro

• معرفی صفحه محصول واحد Single Product Page Intro

• نمای کلی نشانه گذاری Markup Overview

• نمای کلی نشانه گذاری Markup Overview

• کاهش اندازه برگه های سبک آبشاری (CSS) و جاوا اسکریپت Decreasing Size-of Cascading Style Sheets (CSS) and JavaScript

• کاهش اندازه برگه های سبک آبشاری (CSS) و جاوا اسکریپت Decreasing Size-of Cascading Style Sheets (CSS) and JavaScript

پروژه 1 Project 1

پروژه 2 Project 2

• معرفی وبلاگ Blog Intro

• معرفی وبلاگ Blog Intro

• مرور کد وبلاگ Blog Code Walkthrough

• مرور کد وبلاگ Blog Code Walkthrough

• وبلاگ اضافه کردن صفحه تماس Blog Adding Contact Page

• وبلاگ اضافه کردن صفحه تماس Blog Adding Contact Page

پروژه 2 Project 2

پروژه 3 Project 3

• استوک تصویر مقدمه وب سایت Stock Image Website Intro

• استوک تصویر مقدمه وب سایت Stock Image Website Intro

• تصویر اجمالی کد وب سایت Stock Image Website Code Overview

• تصویر اجمالی کد وب سایت Stock Image Website Code Overview

پروژه 3 Project 3

پروژه 4 Project 4

• معرفی گالری تصاویر Image Gallery Intro

• معرفی گالری تصاویر Image Gallery Intro

• کد زنده هدر گالری تصاویر Image Gallery Header Live Code

• کد زنده هدر گالری تصاویر Image Gallery Header Live Code

• گالری تصاویر در یک طرح ستون شبکه ای Image Gallery in a Grid Column Layout

• گالری تصاویر در یک طرح ستون شبکه ای Image Gallery in a Grid Column Layout

پروژه 4 Project 4

پروژه 5 Project 5

• مقدمه ای بر صفحه فرود Introduction to Landing Page

• مقدمه ای بر صفحه فرود Introduction to Landing Page

• نمای کلی کد Code Overview

• نمای کلی کد Code Overview

پروژه 5 Project 5

پروژه 6 Project 6

• مقدمه ای بر داشبورد مدیریت Introduction to Admin Dashboard

• مقدمه ای بر داشبورد مدیریت Introduction to Admin Dashboard

• نمای کلی طرح داشبورد مدیریت Admin Dashboard Layout Overview

• نمای کلی طرح داشبورد مدیریت Admin Dashboard Layout Overview

پروژه 6 Project 6

پروژه 7 Project 7

• سربرگ نمونه کارها Portfolio Header

• سربرگ نمونه کارها Portfolio Header

• بنر و آیکون ها Banner and Icons

• بنر و آیکون ها Banner and Icons

• نشانه گذاری نمونه کارها و سبک ها Portfolio Markup and Styles

• نشانه گذاری نمونه کارها و سبک ها Portfolio Markup and Styles

• نمونه کارها و جاوا اسکریپت Portfolio Modal and JavaScript

• نمونه کارها و جاوا اسکریپت Portfolio Modal and JavaScript

• فرم Form

• فرم Form

پروژه 7 Project 7

پروژه 8 Project 8

• رزومه معرفی وب سایت Resume Website Intro

• رزومه معرفی وب سایت Resume Website Intro

• بررسی کد وب سایت رزومه Resume Website Code Review

• بررسی کد وب سایت رزومه Resume Website Code Review

پروژه 8 Project 8

پروژه 9 Project 9

• معرفی به زودی Introduction to Coming Soon

• معرفی به زودی Introduction to Coming Soon

• به زودی نشانه گذاری صفحه HTML Coming Soon Page HTML Markup

• به زودی نشانه گذاری صفحه HTML Coming Soon Page HTML Markup

• استایلینگ به زودی - قسمت 1 Coming Soon Styling – Part 1

• استایلینگ به زودی - قسمت 1 Coming Soon Styling – Part 1

• استایلینگ به زودی - قسمت 2 Coming Soon Styling – Part 2

• استایلینگ به زودی - قسمت 2 Coming Soon Styling – Part 2

• به زودی اسلایدر Coming Soon Slider

• به زودی اسلایدر Coming Soon Slider

پروژه 9 Project 9

پروژه 10 Project 10

• مقدمه ای بر برش Introduction to Slicing

• مقدمه ای بر برش Introduction to Slicing

• بخش سرصفحه Header Section

• بخش سرصفحه Header Section

• بخش خدمات Service Section

• بخش خدمات Service Section

• جدول قیمت گذاری و بخش نظرات Pricing Table and Testimonials Sections

• جدول قیمت گذاری و بخش نظرات Pricing Table and Testimonials Sections

• بخش تماس با ما Contact us Section

• بخش تماس با ما Contact us Section

• پاورقی Footer

• پاورقی Footer

پروژه 10 Project 10