آموزش دوره Bootstrap 5 - راهنمای کامل گام به گام (2023)

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

شروع کار با بوت استرپ 5 Getting Started with Bootstrap 5

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

• آنچه شما نیاز خواهید داشت What you will need

• سلام دنیا Hello World

• ساختار سند Bootstrap 5 Bootstrap 5 Document Structure

• بخش 1: آزمون Section 1: Quiz

طرح بندی در بوت استرپ 5 Layouts in Bootstrap 5

• نقاط شکست در بوت استرپ 5 Breakpoints in Bootstrap 5

• ظروف Containers

• توری Grid

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

• تودرتو سطرها و ستون ها Nesting Rows and Columns

• تراز عمودی ستون Column Vertical Alignment

• تراز افقی ستون Column Horizontal Alignment

• پیچیدن ستون و شکستن ستون Column Wrapping and Column Breaks

• مرتب سازی مجدد و تنظیم مجدد ستون ها Reordering and Offsetting Columns

• ابزارهای حاشیه Margin Utilities

• ناودان Gutters

• ناودان افقی Horizontal Gutters

• ناودان های عمودی Vertical Gutters

• ناودان افقی و عمودی Horizontal and Vertical Gutters

• بخش 2: آزمون Section 2: Quiz

محتویات در بوت استرپ 5 Contents in Bootstrap 5

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

• عناصر متن درون خطی Inline Text Elements

• اختصارات و نقل قول ها Abbreviations and Blockquotes

• کار با لیست ها Working with Lists

• تصاویر در بوت استرپ Images in Bootstrap

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

• تراز جدول، تودرتو و آناتومی Table Alignment, Nesting and Anatomy

• ارقام در بوت استرپ Figures in Bootstrap

• بخش 3: آزمون Section 3: Quiz

فرم ها در بوت استرپ 5 Forms in Bootstrap 5

• فرم ها در بوت استرپ Forms in Bootstrap

• کنترل فرم Form Control

• چک و رادیو Checks and Radios

• دامنه Range

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

• برچسب های شناور Floating Labels

• طرح بندی فرم Form Layout

• فرم های افقی Horizontal Forms

• فرم های اندازه گیری خودکار Auto Sizing Forms

• فرم های درون خطی Inline Forms

• اعتبار سنجی فرم Form Validation

• بخش 4: آزمون Section 4: Quiz

اجزای موجود در بوت استرپ 5 Components in Bootstrap 5

• آکاردئون Accordions

• هشدارها Alerts

• رد کردن هشدارها Dismissing Alerts

• نشان ها Badges

• خرده نان Breadcrumb

• دکمه ها Buttons

• گروه دکمه Button Group

• نوار ابزار دکمه Button Toolbar

• تغییر گروه دکمه Button Group Alteration

• کارت Card

• اندازه کارت Card Sizing

• ناوبری کارت Card Navigation

• تصاویر کارت Card Images

• سبک های کارت Card Styles

• چرخ فلک Carousel

• کنترل چرخ فلک Carousel Controls

• نشانگرهای چرخ فلک Carousel Indicators

• شرح چرخ فلک Carousel Caption

• جلوه محو شدن چرخ فلک Carousel Fade Effect

• زمان بندی چرخ فلک Carousel Timing

• غیرفعال کردن کشیدن لمس چرخ فلک Disable Carousel Touch Swiping

• چرخ فلک نوع تاریک Carousel Dark Variant

• دکمه بستن Close Button

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

• فروپاشی افقی Horizontal Collapse

• اهداف چندگانه Multiple Targets

• کشویی Dropdowns

• دکمه تقسیم Split Button

• اندازه کشویی Dropdown Sizing

• کشویی تاریک Dark Dropdowns

• مسیرهای کشویی Dropdown Directions

• تراز کشویی و کشویی Dropup and Dropdown Alignment

• آیتم های منو Menu Items

• تراز منو Menu Alignment

• گزینه های تراز کشویی Dropdown Alignment Options

• محتویات منو Menu Contents

• فرم های کشویی Dropdown Forms

• گزینه های کشویی Dropdown Options

• بسته شدن خودکار کشویی Dropdown Auto Close

• گروه لیست List Group

• پیوندها و دکمه های گروه را فهرست کنید List Group Links and Buttons

• فلاش گروه را فهرست کنید List Group Flush

• لیست شماره گذاری شده Numbered List

• گروه های لیست افقی Horizontal List Groups

• کلاس های گروهی فهرست متنی Contextual List Group Classes

• لیست گروه با نشان List Group with Badges

• لیست گروه با محتوای سفارشی List Group with Custom Content

• چک باکس ها و رادیوها را فهرست کنید List Group Checkboxes and Radios

• فهرست زبانه های جاوا اسکریپت گروه List Group JavaScript Tabs

• مدال ها Modals

• پس زمینه ایستا Static Backdrop

• پیمایش مطالب طولانی Scrolling Long Content

• عمودی در مرکز Vertically Centered

• Modal Tooltps و Popovers Modal Tooltips and Popovers

• استفاده از Grid System در Modal Using Grid System In Modal

• محتوای مدال متفاوت Varying Modal Content

• جابه‌جایی بین حالت‌ها Toggle Between Modals

• اندازه های مدال اختیاری Optional Modal Sizes

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

• لینک های ناوبری Navigation Links

• نوار کشویی Navbar Dropdown

• نوار کشویی تو در تو Navbar Nested Dropdown

• فرم های نوار ناوبری Navbar Forms

• گروه ورودی نوار ناوبری Navbar Input Group

• Navbar Plain Text Navbar Plain Text

• رنگ‌های نوار ناوبری Navbar Colors

• ظروف Navbar Navbar Containers

• قرار دادن نوار ناوبری Navbar Placement

• پیمایش نوار ناوبری Navbar Scrolling

• نوار ناوبری بوم خاموش است Off Canvas Navbar

• Navs و Tabs Navs and Tabs

• نرم افزار Nav Flex Utilities Nav Flex Utilities

• نوارها و قرص‌ها را با فهرست بازشوی ناوبری کنید Nav Tabs and Pills with Dropdown

• رفتارهای زبانه ها و قرص ها Tabs and Pills Behaviors

• Offcanvas In-Depth Offcanvas In-Depth

• پیمایش خارج از بوم Offcanvas Scrolling

• قرار دادن Offcanvas Offcanvas Placement

• صفحه بندی Pagination

• متغیرهای Placeholders

• Popovers در عمق Popovers In-Depth

• Popover Direction Popover Direction

• پاپاورهای سفارشی Custom Popovers

• با کلیک بعدی رد کنید Dismiss on Next Click

• Popover On Hover را فعال کنید Enable Popover On Hover

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

• ارتفاع و پس زمینه نوار پیشرفت Progress Bar Height and Background

• راه راه و انیمیشن Stripes And Animation

• Scrollspy Scrollspy

• اسپینرها Spinners

• اسپینر در حال رشد Growing Spinner

• تراز اسپینر Spinner Alignment

• اندازه های اسپینر Spinner Sizes

• چرخاننده در دکمه ها Spinner In Buttons

• نان تست Toasts

• تراز نان تست Toast Alignment

• راهنمای ابزار در عمق Tooltips In-Depth

• راهنمای ابزار سفارشی Custom Tooltip

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

• Html در راهنمای ابزار Html in Tooltip

• نکته ابزار در مورد عناصر غیرفعال Tooltip On Disabled Elements

• بخش 5: آزمون Section 5: Quiz

Helpers در Bootstrap 5 Helpers in Bootstrap 5

• روشن کنید Clearfix

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

• لینک های رنگی Colored Links

• نسبت ها Ratios

• موقعیت ها Positions

• پشته ها Stacks

• بصری پنهان Visually Hidden

• پیوند کشیده Stretched Link

• کوتاه کردن متن Text Truncate

• قانون عمودی Vertical Rule

• بخش 6: آزمون Section 6: Quiz

ابزارهای کمکی در بوت استرپ 5 Utilities in Bootstrap 5

• پس زمینه ها Backgrounds

• گرادیان های پس زمینه Background Gradients

• کدورت پس زمینه Background Opacity

• مرز ها Borders

• رنگ لبه Border Color

• کدورت مرزی Border Opacity

• عرض مرز Border Width

• شعاع مرزی Border Radius

• اندازه های حاشیه گرد Rounded Border Sizes

• رنگ های متن Text Colors

• کدورت متن Text Opacity

• 07-12 نمایش Inline و Block 07-12 Display Inline and Block

• پنهان کردن عناصر Hiding Elements

• نمایش در چاپ Display In Print

• فلکس Flex

• جهت فلکس Flex Direction

• محتوای Flex Justify Flex Justify Content

• Flex Align اقلام Flex Align Items

• Flex Align Self Flex Align Self

• فلکس پر Flex Fill

• Flex Grow And Shrink Flex Grow And Shrink

• حاشیه های خودکار فلکس Flex Auto Margins

• Flex With Align Items Flex With Align Items

• فلکس راپ Flex Wrap

• سفارش فلکس Flex Order

• Flex Align محتوا Flex Align Content

• Flex Media Object Flex Media Object

• شناور پاسخگو Responsive Float

• فعل و انفعالات Interactions

• کدورت Opacity

• سرریز Overflow

• موقعیت Position

• عناصر مرکز موقعیت Position Center Elements

• عناصر مرکز را در لبه ها قرار دهید Position Center Elements Within Edges

• نمونه های موقعیت قسمت 1 Position Examples Part 1

• مثال موقعیت قسمت 2 Position Example Part 2

• سایه Shadow

• سایز بندی Sizing

• فاصله گذاری Spacing

• شکاف Gap

• تراز متن Text Alignment

• بسته بندی متن Text Wrap

• شکست متن Text Break

• تبدیل متن Text Transform

• اندازه فونت Font Size

• وزن فونت و حروف کج Font Weights And Italics

• ارتفاع خط Line Height

• مونوسکوپی Monoscope

• بازنشانی رنگ Reset Color

• تزیین متن Text Decoration

• چیدمان عمودی Vertical Alignment

• دید Visibility

• آیکون های بوت استرپ Bootstrap Icons

• بخش 7: آزمون Section 7: Quiz

پروژه 1: وب EMS با بوت استرپ 5 Project 1: EMS Web with Bootstrap 5

• مقدمه ای بر پروژه کاربردی EMS2.0 Introduction to EMS2.0 Application Project

• ایجاد صفحه ورود Creating the Login Page

• ایجاد Dash Nav و لوگوی برند Creating Dash Nav and Brand Logo

• ایجاد Navbar Toggler Creating the Navbar Toggler

• ایجاد موارد نوار ناوبری Creating Navbar Items

• ایجاد فیلدهای فرم برای Navbar Creating Form Fields for Navbar

• ایجاد کارت برای داشبورد Creating Cards for Dashboard

• ایجاد صفحه لیست کارکنان Creating Employees List Page

• ایجاد نوار کناری صفحه کارکنان Creating Employees Page Sidebar

• ایجاد جدول لیست کارکنان Creating Employees List Table

• ایجاد Add Employee Modal Creating Add Employee Modal

• ایجاد فرم Add Employee Modal Creating Add Employee Modal Form

• ایجاد مدال جزئیات برای لیست کارمندان Creating Details Modal for Employee List

• ایجاد جزئیات ویرایش برای لیست کارکنان Creating Edit Details for Employee List

• ایجاد Delete Modal برای لیست کارکنان Creating Delete Modal for Employees List

• ایجاد صفحه فهرست مشاغل Creating Jobs List Page

• به روز رسانی صفحه فهرست مشاغل Updating the Job List Page

• ایجاد جدول لیست مشاغل Creating Job List Table

• ایجاد Add Job Modal Creating Add Job Modal

• ایجاد جزئیات برای شغل Creating Details Modal for Job

• ایجاد جزئیات ویرایش برای Job Modal Creating Edit Details for Job Modal

• ایجاد Delete Modal برای لیست مشاغل Creating Delete Modal for Job List

پروژه 2: برنامه وبلاگ با بوت استرپ 5 Project 2: Blog App with Bootstrap 5

• معرفی پروژه وبلاگ Blog Project Introduction

• آنچه برای ساخت قالب مورد نیاز است What's required for Template Building

• ایجاد فایل ایندکس Creating the index file

• ایجاد Navbar و لوگوی برند Creating the Navbar and brand logo

• ایجاد Navbar Toggler Creating Navbar Toggler

• ایجاد موارد نوار ناوبری Creating Navbar Items

• ایجاد فیلد جستجو Creating the search field

• ساخت بنر خانه Creating the home banner

• ایجاد حالت اشتراک Creating the subscribe modal

• ایجاد بخش پست های صفحه اصلی Creating Home Posts Section

• ایجاد پاورقی وبلاگ Creating Blog Footer

• افزودن افکت های سفارشی به نوار ناوبری Adding Custom Effects to Navbar

• ایجاد هدر صفحه پیش فرض Creating Default Page Header

• ایجاد حلقه پست برای صفحه پیش فرض Creating Post Loop for Default Page

• ایجاد فرم اشتراک نوار کناری Creating Sidebar Subscribe Form

• ایجاد دسته ها و ابزارک های آرشیو Creating Categories and Archive Widgets

• ایجاد صفحه و ناحیه محتوای پست Creating Page and Post Content Area

• ایجاد فرم نظر برای پست ها Creating Comment Form for Posts

• ایجاد صفحه جستجو Creating the Search Page

• پیوند دادن همه چیز با هم Linking Everything Together

پروژه 3: پروژه آموزش در دنیای واقعی Project 3: Real-World Education Project

• مقدمه ای بر پروژه Introduction to Project

• راه اندازی پوشه پروژه Setting up Project Folder

• ایجاد Navbar و نام تجاری Creating Navbar and Brand

• ایجاد Navbar Toggler Creating Navbar Toggler

• ایجاد موارد Nav Creating Nav Items

• ایجاد فیلد جستجوی نوار ناوبری Creating Navbar Search Field

• ایجاد دکمه های ثبت نام و ورود نوار ناوبر Creating Navbar Sign-up and Login Buttons

• ایجاد متن بنر Creating the Banner Text

• افزودن تصویر بنر Adding Banner Image

• ایجاد مجموعه ویژگی های سایت Creating Site Feature Set

• ایجاد سربرگ حلقه دوره Creating Course Loop Header

• ایجاد فیلتر حلقه دوره Creating Course Loop Filter

• ایجاد سرصفحه فهرست حلقه دوره Creating Course Loop List Header

• ایجاد آیتم فهرست واحد درسی Creating Single Course List Item

• ایجاد موارد تکراری دوره Creating Duplicates of Course Items

• ایجاد محتوای صفحه اصلی Creating Home Page Content

• افزودن تصویر محتوای خانه Adding Home Content Image

• ایجاد منطقه اشتراک Creating Subscribe Area

• ایجاد پاورقی اصلی Creating Main Footer

• ایجاد آدرس پاورقی Creating Footer Address

• ایجاد آیتم های پیوند برای پاورقی Creating Link Items for Footer

• ایجاد آیکون های اجتماعی Creating Social Icons

• ایجاد اطلاعات حق چاپ Creating Copyright Info

• ایجاد پاورقی چسبنده Creating Sticky Footer

• ایجاد درباره سرصفحه صفحه Creating About Page Header

• ایجاد بخش درباره محتوا Creating About Content Section

• ایجاد صفحه دوره ها Creating the courses page

• ایجاد صفحه واحد دوره و Breadcrumb Creating Single Course page and Breadcrumb

• ایجاد توضیحات سرصفحه و متا داده Creating Course Header Description and Meta Data

• ایجاد متا داده های دوره Creating Course Meta Data

• افزودن آیکون به داده های متا دوره Adding Icons to Course Meta Data

• اضافه کردن دکمه های دوره Adding Course Buttons

• ایجاد تصویر دوره واحد Creating Single Course Image

• ایجاد محتوای واحد درسی Creating Single Course Contents

• ایجاد سربرگ سوالات متداول Creating FAQ Header

• ایجاد لیست سوالات متداول Creating FAQ List

• ایجاد فرم ارسال سوال Creating Post Question Form

• ایجاد صفحه و سربرگ وبلاگ Creating Blog Page and Header

• ایجاد لیست پست های وبلاگ Creating Blog Posts List

• ایجاد نوار کناری وبلاگ Creating Blog Sidebar

• ایجاد Subscribe Modal Creating Subscribe Modal

• ایجاد فرم اشتراک Creating the subscribe form

• ایجاد صفحه پست واحد Creating Single Post Page

• ایجاد هدر صفحه تماس Creating Contact Page Header

• ایجاد کارت های صفحه تماس Creating Contact Page Cards

• ایجاد Contact Modal Creating Contact Modal

• پیوند دادن همه چیز با هم Linking Everything Together

• پیوند دادن همه چیز با هم Linking Everything Together