آموزش بوت استرپ سریع توسط 3 وب سایت پاسخگوی زنده در بوت استرپ 5 - آخرین آپدیت

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

معرفی Introduction

• معرفی Introduction

• فایل های پروژه این دوره را دانلود کنید Download project files of this course

راه اندازی بوت استرپ 5 Starting Bootstrap 5

• Bootstrap 5 و کد ویژوال استودیو را روی Win 10 نصب کنید Install Bootstrap 5 and Visual Studio code on Win 10

• اولین پروژه در Vs Code و Bootstrap First project in Vs Code and Bootstrap

چیدمان ظروف Containers Layout

• قطعات اصلی بوت استرپ و ظروف Main parts of bootstrap and containers

• نقاط شکست در بوت استرپ چیست؟ What is breakpoints in bootstrap?

• ظرف پیش فرض Default container

• ظرف مایع Fluid container

• ظرف پاسخگو Responsive container

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

• سیستم گرید در بوت استرپ برای صفحه وب پاسخگو Grid system in bootstrap for responsive webpage

• سفارشی کردن عرض ستون در شبکه Customize column width in grid

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

• سرفصل ها و تایپوگرافی اولیه Headings and basic typography

• رنگ پس زمینه ویرایشگر کد Vs را تغییر دهید Change background color of Vs code editor

• رنگ متن - رنگ پس زمینه Text color - Background color

• بالشتک و حاشیه ساده Simple padding and margin

• بالشتک و حاشیه پاسخگو Responsive padding and margin

• حاشیه ها در بوت استرپ Borders in bootstrap

• تصویر گرد - گوشه های گرد Round image - Rounded corners

• تراز افقی متن Horizontal text alignment

• نمایش: درون خطی و بلوک Display : inline and block

• ابزارهای متنی Text utilities

• اندازه: عرض و ارتفاع عناصر Sizing: Width and height of elements

پروژه نهایی Bootstrap Basic Components Final project Bootstrap Basic Components

• طراحی قسمت اول در پروژه جدید Vs code Design First part in Vs code new project

• ویدیوی پاسخگو YouTube را اضافه کنید Add Responsive YouTube video

• تصویر واکنش گرا Responsive image

• پروژه: استفاده از تصویر واکنش گرا Project: Using responsive image

• دکمه ها در بوت استرپ Buttons in bootstrap

• پروژه: با استفاده از دکمه بوت استرپ Project: Using bootstrap button

• نوار نوار یا منوی بالا در بوت استرپ Navbar or Top Menu in bootstrap

• پروژه: Navbar پاسخگو طراحی کنید Project: Design responsive Navbar

استفاده از Vs Code در ویندوز 11 Using Vs Code on Windows 11

• نصب vs code در ویندوز 11 Installing vs code on Windows 11

• تغییر تم کد Vs Changing the Vs code theme

• نصب کد Vs پسوندهای مورد نیاز است Installing Vs code required extensions

پروژه 1: وب سایت نمونه کارها Project 1: Portfolio Website

• مقدمه ای بر پروژه 1 (وب سایت نمونه کارها) Introduction to Project 1 (Portfolio website)

• ایجاد پروژه جدید و اضافه کردن بوت استرپ Creating new project and adding the bootstrap

• افزودن منوی بالا توسط نوار ناوبری Adding the top menu by navbar

• طراحی قسمت هدر Designing the header section

• طراحی بخش "درباره ما". Designing “About us” section

• طراحی قسمت اول بخش خدمات Designing first part of “Services” section

• طراحی قسمت دوم بخش خدمات Designing second part of “Services” section

• استفاده از نماد فونت برای افزودن آیکون به موارد Using the font icon to add icons to items

• طراحی بخش "دانلود". Designing “Download” section

• طراحی قسمت اول بخش نمونه کارها Designing first part of “Portfolio” section

• افزودن اقلام به بخش "پرتفولیو". Adding items to “portfolio” section

• اضافه کردن متن و رنگ پشت به موارد نمونه کارها Adding text & back color to portfolio items

• افزودن انیمیشن به آیتم های " نمونه کارها " Adding animation to “portfolio” items

• طراحی بخش "اهدا". Designing “donate” section

• طراحی بخش پاورقی Designing “footer” section

• آیتم های منو را به بخش ها وصل کنید Connect the menu items to sections

• تعریف فونت های مورد نیاز برای وب سایت Defining the required fonts for website

پروژه 2: وب سایت کسب و کار Project 2: Business website

• معرفی پروژه 2: وب سایت تجاری Introduction to Project 2: Business website

• ایجاد پروژه جدید و اضافه کردن بوت استرپ Creating new project and adding the bootstrap

• افزودن منوی بالا توسط نوار ناوبری Adding the top menu by navbar

• طراحی بخش "هدر". Designing “header” section

• طراحی بخش "ویژگی ها". Designing “Features” section

• طراحی بخش "قیمت". Designing “Price” section

• طراحی بخش "درباره ما". Designing “About us” section

• طراحی بخش "تماس با ما". Designing “Contact us” section

• طراحی بخش پاورقی Designing “footer ”section

• آیتم های منو را به بخش ها وصل کنید Connect the menu items to sections

پروژه 3: وب سایت "عصر جدید". Project 3: "New Age" website

• ایجاد پروژه جدید و اضافه کردن بوت استرپ Creating new project & adding bootstrap

• افزودن منوی بالا توسط نوار ناوبری Adding the top menu by navbar

• افزودن فرم مدال به منوی بالا Adding modal form to top menu

• طراحی بخش "هدر". Designing “header” section

• طراحی بخش "آگهی". Designing “Ad” section

• طراحی بخش "ویژگی ها". Designing the “Features” section

• طراحی بخش "اطلاعات بیشتر". Designing “More info” section

• طراحی بخش "اولین دانلود". Designing “First Download” section

• طراحی بخش "دانلود دوم". Designing “Second Download” section

• طراحی بخش پاورقی Designing “Footer” section

• آیتم های منو را به بخش ها وصل کنید Connect menu items to sections

• مشکل را در نشان دادن فرم معین حل کنید Solve the problem on showing modal form