آموزش بوت استرپ | آموزش Bootstrap 4 + انجام پروژه های عملی

آموزش بوت استرپ

دوستان و همراهان عزیز آموزش تک به دوره آموزشی جادوی رابط کاربری یا آموزش بوت استرپ خوش اومدید ، خوشحالیم که میتونیم در این دوره آموزشی یکی از بهترین فریم ورک ها در زمینه طراحی سایت و همچنین ریسپانسیو سازی صفحات وب به معنای واقعی کلمه رو خدمتتون معرفی کنیم.توصیه میشود ( دوره آموزشی طراحی سایت ) را نیز مشاهده کنید

Bootstrap 4 یا درکل بوت استرپ چیست؟

همان طور که میدونید زبان های CSS ، HTML و جاوا اسکریپت به عنوان پایه و اساس طراحی صفحات وب شناخته میشوند و ما میتونیم با استفاده از این زبان ها یک صفحه وب کامل رو طراحی بکنیم

خوب حالا چقدر خوب میشه که ما فریم ورکی داشته باشیم که همه این زبان ها رو داخل خودش به صورت یکجا داشته باشه

معرفی میکنیم فریم ورک Bootstrap 4

بوت استرپ 4 یک فریم ورک قدرتمند بر پایه زبان های CSS ، HTML و جاوا اسکریپت هست که طراحی صفحات وب رو با استفاده از یک سری استایل ها و کامپوننت های پیشرفته بسیار سریع و آسان میکنه و علاوه بر این ، نسخه جدید بوت استرپ 4 نسبت به نسخه قبلی خودش یعنی بوت استرپ 3 تغییرات چشم گیری رو داشته که شامل کم حجم تر شدن هسته اصلی این فریم ورک ، اضافه شدن استایل های جدید ، تغییرات ساختاری مانند استفاده از گرید سیستم 5 ردیفی به جای گرید سیستم 4 ردیفی ، تغییر نام کلاس ها بر اساس کاربرد آنها و … که همگی این تغییرات باعث ایجاد یک فریم ورک بسیار منعطف با کدنویسی کمتر و یادگیری راحتتر شده است.

پروژه ساخت پنل مدیریت محتوا :

آموزش بوت استرپ ( Bootstrap 4 )

از اونجایی که این فریم ورک قدرتمند و سریع کار طراحان وب رو بسیار ساده و سریع میکنه تصمیم گرفتیم که در این دوره آموزشی یعنی آموزش بوت استرپ ۴ یا جادوی رابط کاربری ، از مقدماتی تا پیشرفته تمامی مباحث و بخش های مختلف این فریم ورک رو به صورت جزء به جزء مورد بررسی قرار بدیم و اینکه دوستان دقت کنید که شما برای یادگیری این دوره آموزشی نیازی به این ندارید که با بوت استرپ 3 کار کرده باشید یا پیش زمینه ای از بوت استرپ داشته باشید چون ما در این دوره آموزشی بوت استرپ رو از صفر مورد بررسی قرار میدیم و حتی در یک سری از موارد به تفاوت های بوت استرپ 4 با بوت استرپ 3 هم اشاره خواهیم کرد و در نهایت باید اضافه کنم که در انتهای این دوره آموزشی دوتا پروژه حرفه ای شامل پروژه ساخت پنل مدیریت محتوا و پروژه ساخت قالب رو هم باهم خواهیم داشت که دانسته های خودمون رو کاملتر می کنیم.

 

چرا آموزش بوت استرپ برای طراحان وب اهمیت دارد

دوستان همان طور که میدونید وقتی ما شروع به طراحی صفحات سایت میکنیم با بخش های مختلف و متدوالی رو به رو میشیم که باید از پایه با استفاده از کدهای CSS، HTML و جاوا اسکریپت این بخش ها رو پیاده سازی کنیم که در اکثر مواقع پیاده سازی این بخش ها زمان زیادی رو از ما صرف میکنه ، خوب در اینجا نیاز به یک فریم ورک برای طراحی سریع تر و آسان تر این بخش ها احساس میشه که بوت استرپ 4 این کار رو برای ما انجام میده.

یک بعد دیگه از اهمیت آموزش بوت استرپ چیه : 

واکنش گرایی یا ریسپانسیو سازی صحفات وب با Bootstrap 4

یکی دیگه از شاخصه های اصلی بوت استرپ اینه که ما با استفاده از این فریم ورک میتونیم صفحات وب خودمون رو به صورت خیلی حرفه ای و پیشرفته ریسپانسیو کنیم و سایت طراحی شده خودمون رو خیلی راحت میتونیم در دستگاه های دیگه مثل موبایل ، تبلت و انواع دستگاه های با سایز صفحه نمایش مختلف مشاهده کنیم.

با این اوصاف میبینید که ما با یک فریم ورک همه کاره رو به رو هستیم و به همین دلیل هم در آموزش تک عنوان جادوی رابط کاربری رو به این دوره دادیم.

 

خب الان بریم سراغ سرفصل های دوره آموزش بوت استرپ 4 :

جلسه اول : مقدمات کار با Bootstrap 4

• آشنایی با روش های نصب بوت استرپ 4
• آشنایی با کتابخانه Popper.js
• آشنایی با Starter Template
• آشنایی با Meta Viewport

جلسه دوم : Reboot و واحد rem در آموزش بوت استرپ

• آشنایی با مفهوم Reboot در Bootstrap 4
• اشنایی با واحد سایزینگ Root EM یا rem
• توضیح نقطه قوت واحد rem نسبت به px

جلسه سوم : Typography در بوت استرپ 4 – بخش اول

• آشنایی با کلاس های Heading
• آشنایی با text-muted Utility
• آشنایی با کلاس های Display Headings
• آشنایی با کلاس lead
• آشنایی با تگ های استایل دهی Inline Text Elements

جلسه چهارم : Typography در بوت استرپ 4 – بخش دوم

• آشنایی با Abbreviations
• آشنایی با کلاس initialism
• آشنایی با کلاس Blockquotes
• آشنایی با کلاس های Alignment
• آشنایی با کلاس List Unstyled
• آشنایی با کلاس List inline
• اشاره با تفاوت های Typography در بوت استرپ 3 با بوت استرپ 4

جلسه پنجم : Code & Images در آموزش بوت استرپ 4

• آشنایی با ساختار Code
• آشنایی با ساختار Code Blocks
• آشنایی با کلاس pre-scrollable
• آشنایی با ساختار Variables
• آشنایی با ساختار User Input یا تگ kbd
• آشنایی با ساختار Sample Output
• آشنایی با کلاس img fluid
• آشنایی با کلاس img thumbnail
• اشاره به تفاوت های Code & images در Bootstrap 3 و Bootstrap 4

جلسه ششم : Table & Figures در آموزش بوت استرپ

• آشنایی با Tables
• آشنایی با Table head options
• آشنایی با Striped rows
• آشنایی با Bordered table
• آشنایی با Borderless table
• آشنایی با Hoverable rows
• آشنایی با Small table
• آشنایی با Contextual classes
• آشنایی با caption
• اشنایی با Responsive tables یا ریسپانسیو کردن جداول

جلسه هفتم : Border & Clearfix & Closeicon Utilities

• آشنایی با Border
• آشنایی با Additive
• آشنایی با Subtractive
• آشنایی با Border color
• آشنایی با Border-radius
• آشنایی با Sizes
• آشنایی با Clearfix
• آشنایی با CloseIcon

جلسه هشتم : Colors & Embed Utilities  در آموزش بوت استرپ 4

• آشنایی با Colors
• آشنایی با Background color
• آشنایی با تفاوت های Colors در Bootstrap 4 و Bootstrap 3
• آشنایی با embed-responsive
• آشنایی با Aspect ratios

جلسه نهم : مفاهیم ریسپانسیوسازی و Display Utility

• آشنایی با مفهوم واکنش گرایی یا ریسپانسیو
• آشنایی با Viewport
• آشنایی با BreakPoint
• آشنایی با بریک پوینت های مختلف در Bootstrap 4 و تفاوت آن با Bootstrap 3
• آشنایی با Display
• آشنایی با Hiding elements

جلسه دهم : Flex Utility  در آموزش بوت استرپ 4

• آشنایی با Flex
• آشنایی با Direction
• آشنایی با Justify content
• آشنایی با Align items
• آشنایی با Align self
• آشنایی با Fill
• آشنایی با Grow and shrink
• آشنایی با Wrap
• آشنایی با Order
• آشنایی با Align content

جلسه یازدهم : Float & Image Replacement & Position Utilities

• آشنایی با Float
• آشنایی با Float Responsive
• آشنایی با تفاوت های Float در Bootstrap 4 با Bootstrap 3
• آشنایی با Image replacement
• آشنایی با Positions
• آشنایی با Fixed top
• آشنایی با Fixed bottom
• آشنایی با Sticky top

جلسه دوازدهم: Shadows & Sizing & Spacing Utilities

• آشنایی با کلاس های Shadows
• آشنایی با کلاس های Sizing
• آشنایی با کلاس های Spacing

جلسه سیزدهم : Text & Vertical align & Visibility Utilities

• آشنایی با Text alignment
• آشنایی با Text wrapping and overflow
• آشنایی با Word break
• آشنایی با Text transform
• آشنایی با Font weight and italics
• آشنایی با Monospace
• آشنایی با Vertical alignment
• آشنایی با Visibility

جلسه چهاردهم : Overview & GridSystem  در آموزش بوت استرپ – بخش اول

• آشنایی با Container
• آشنایی با Container-fluid
• آشنایی با مفهوم Grid system

جلسه پانزدهم : GridSystem در بوت استرپ – بخش دوم

• آشنایی با Grid options
• آشنایی با Auto-layout columns
• آشنایی با Equal-width
• آشنایی با Setting one column width
• آشنایی با Variable width content
• آشنایی با Equal-width multi-row
• آشنایی با Responsive classes
• آشنایی با All breakpoints
• آشنایی با Stacked to horizontal
• آشنایی با Mix and match

جلسه شانزدهم : GridSystem در بوت استرپ – بخش سوم

• آشنایی با Alignment
• آشنایی با Vertical alignment
• آشنایی با Horizontal alignment
• آشنایی با No gutters
• آشنایی با Column wrapping
• آشنایی با Column breaks
• آشنایی با Reordering
• آشنایی با Offsetting columns
• آشنایی با Margin utilities
• آشنایی با Nesting

جلسه هفدهم : Media Object در آموزش بوت استرپ

• آشنایی با کلاس های Media Object
• آشنایی با Media Nesting
• آشنایی با Media Alignment
• آشنایی با Media Order
• آشنایی با Media list

جلسه هجدهم : Alerts Component در بوت استرپ

• آشنایی با کلاس های Alert
• آشنایی با Alert Link color
• آشنایی با Alert Additional content
• آشنایی با Alert Dismissing
• آشنایی با Alert JavaScript behavior

جلسه نوزدهم : Badges & BreadCrumb Components

• آشنایی با کلاس های Badge
• آشنایی با Badge Contextual variations
• آشنایی با Pill badges
• آشنایی با Badge Links
• آشنایی با کلاس های Breadcrumb

جلسه بیستم : Buttons & ButtonGroup Components

• آشنایی با کلاس های Buttons
• آشنایی با Button tags
• آشنایی با Outline buttons
• آشنایی با Button Sizes
• آشنایی با Button Active state
• آشنایی با Button Disabled state
• آشنایی با Button Toggle states
• آشنایی با Checkbox and radio buttons
• آشنایی با کلاس های Button group
• آشنایی با Button toolbar
• آشنایی با Button Group Sizing
• آشنایی با Button Group Nesting
• آشنایی با Button Group Vertical variation

جلسه بیست و یکم : Cards Component در بوت استرپ – بخش اول

• آشنایی با کلاس های Cards
• آشنایی با Cards Content types
• آشنایی با تفاوت های Cards در Bootstrap 4 و Bootstrap 3
• آشنایی با Cards Titles, text, and links
• آشنایی با Cards Images
• آشنایی با Cards List groups
• آشنایی با Cards Kitchen sink
• آشنایی با Cards Header and footer

جلسه بیست و دوم : Cards Component در بوت استرپ – بخش دوم

• آشنایی با Cards Sizing
• آشنایی با Cards Using grid markup
• آشنایی با Cards Using utilities
• آشنایی با Cards Using custom CSS
• آشنایی با Cards Text alignment
• آشنایی با Cards Navigation
• آشنایی با Cards Image caps
• آشنایی با Cards Image overlays
• آشنایی با Card styles
• آشنایی با Cards Border
• آشنایی با Card groups
• آشنایی با Card decks
• آشنایی با Card columns

جلسه بیست و سوم : Carousel Component در آموزش بوت استرپ

• آشنایی با کلاس های Carousel
• آشنایی با Carousel Slides only
• آشنایی با Carousel With controls
• آشنایی با Carousel With indicators
• آشنایی با Carousel With captions
• آشنایی با Carousel Crossfade
• آشنایی با Carousel Via JavaScript

جلسه بیست و چهارم : Collapse Component در آموزش بوت استرپ

• آشنایی با کلاس های Collapse
• آشنایی با Collapse Multiple targets
• آشنایی با Collapse Accordion
• آشنایی با Collapse Via JavaScript

جلسه بیست و پنجم : Dropdowns Component در آموزش بوت استرپ

• آشنایی با کلاس های Dropdowns
• آشنایی با Dropdowns Single button
• آشنایی با Dropdowns Split button
• آشنایی با Dropdowns Sizing
• آشنایی با Dropdowns Directions
• آشنایی با Dropdowns Menu items
• آشنایی با Dropdowns Active
• آشنایی با Dropdowns Disabled
• آشنایی با Dropdowns Menu alignment
• آشنایی با Dropdown Headers
• آشنایی با Dropdown Dividers
• آشنایی با Dropdowns Text
• آشنایی با Dropdown Forms
• آشنایی با Dropdown options

جلسه بیست و ششم : Forms Component در بوت استرپ 4 – بخش اول

• آشنایی با کلاس های Forms
• آشنایی با Forms Overview
• آشنایی با Form controls
• آشنایی با Forms Sizing
• آشنایی با Forms Readonly
• آشنایی با Forms Readonly plain text
• آشنایی با Forms Range Inputs
• آشنایی با Forms Checkboxes and radios
• آشنایی با Form groups
• آشنایی با Form grid
• آشنایی با Form row
• آشنایی با Horizontal form
• آشنایی با Horizontal form label sizing
• آشنایی با Column sizing
• آشنایی با Auto-sizing
• آشنایی با Inline forms
• آشنایی با Forms Help text

جلسه بیست و هفتم : Forms Component در بوت استرپ – بخش دوم

• آشنایی با Disabled forms
• آشنایی با Form Validation
• آشنایی با Forms Browser defaults
• آشنایی با Forms Server side
• آشنایی با Forms Supported elements
• آشنایی با Form Tooltips
• آشنایی با Custom forms

جلسه بیست و هشتم : Input group & Jumbotron Components

• آشنایی با کلاس های Input group
• آشنایی با Input group Wrapping
• آشنایی با Input group Sizing
• آشنایی با Input group Checkboxes and radios
• آشنایی با Input group Multiple inputs
• آشنایی با Input group Multiple addons
• آشنایی با Input group Button addons
• آشنایی با Input group Buttons with dropdowns
• آشنایی با Input group Segmented buttons
• آشنایی با Input group Custom forms
• آشنایی با کلاس های Jumbotron

جلسه بیست و نهم : List group Component در بوت استرپ

• آشنایی با کلاس های List group
• آشنایی با List group Active items
• آشنایی با List group Disabled items
• آشنایی با List group Links and buttons
• آشنایی با List group Flush
• آشنایی با List group Contextual classes
• آشنایی با List group With badges
• آشنایی با List group Custom content
• آشنایی با List group JavaScript behavior

جلسه سی ام : Modal Component در آموزش بوت استرپ

• آشنایی با کلاس های Modal
• آشنایی با Modal components
• آشنایی با Modal Scrolling long content
• آشنایی با Modal Vertically centered
• آشنایی با Modal Tooltips and popovers
• آشنایی با Modal Using the grid
• آشنایی با Modal Varying modal content
• آشنایی با Modal Via JavaScript

جلسه سی و یکم : Navs Component در آموزش بوت استرپ

• آشنایی با کلاس های Navs
• آشنایی با Navs Horizontal alignment
• آشنایی با Navs Vertical
• آشنایی با Nav Tabs
• آشنایی با Nav Pills
• آشنایی با Navs Fill and justify
• آشنایی با Navs Working with flex utilities
• آشنایی با Nav Tabs with dropdowns
• آشنایی با Nav Pills with dropdowns
• آشنایی با Navs JavaScript behavior

جلسه سی و دوم : Navbar Component در آموزش بوت استرپ

• آشنایی با کلاس های Navbar
• آشنایی با Navbar Brand
• آشنایی با Navbar Nav
• آشنایی با Navbar Forms
• آشنایی با Navbar Text
• آشنایی با Navbar Color schemes
• آشنایی با Navbar Containers
• آشنایی با Navbar Placement
• آشنایی با Navbar Responsive behaviors
• آشنایی با Navbar External content

جلسه سی و سوم : Pagination & Popovers & Progress & Scrollspy Components

• آشنایی با کلاس های Pagination
• آشنایی با Pagination Working with icons
• آشنایی با Pagination Disabled and active states
• آشنایی با Pagination Sizing
• آشنایی با Pagination Alignment
• آشنایی با کلاس های Popovers
• آشنایی با Enable popovers
• آشنایی با Popovers Four directions
• آشنایی با Popovers Dismiss on next click
• آشنایی با Popovers Disabled elements
• آشنایی با کلاس های Progress
• آشنایی با Progress Labels
• آشنایی با Progress Height
• آشنایی با Progress Backgrounds
• آشنایی با Progress Multiple bars
• آشنایی با Progress Striped
• آشنایی با Progress Animated stripes
• آشنایی با کلاس های Scrollspy
• آشنایی با Scrollspy in navbar
• آشنایی با Scrollspy with nested nav
• آشنایی با Scrollspy with list-group

جلسه سی و چهارم: Spinners & Toasts & Tooltips Components

• آشنایی با کلاس های Spinners
• آشنایی با Spinners Border spinner
• آشنایی با Spinners Colors
• آشنایی با Growing Spinner
• آشنایی با Spinners Alignment
• آشنایی با Spinners Placement
• آشنایی با Spinners Size
• آشنایی با Spinners Buttons
• آشنایی با کلاس های Toasts
• آشنایی با Toasts Basic
• آشنایی با Toasts Translucent
• آشنایی با Toasts Stacking
• آشنایی با Toasts Placement
• آشنایی با Toasts JavaScript behavior
• آشنایی با کلاس های Tooltips
• آشنایی با Enable tooltips everywhere

جلسه سی و پنجم : Right to Left در آموزش بوت استرپ

• راست چین کردن بوت استرپ 4 به صورت دستی توسط خودمان
• راست چین کردن بوت استرپ 4 با استفاده از یک کتابخانه آماده

جلسه سی و ششم : پروژه ساخت پنل مدیریت محتوا – بخش اول

جلسه سی و هفتم : پروژه ساخت پنل مدیریت محتوا – بخش دوم

جلسه سی و هشتم : پروژه ساخت پنل مدیریت محتوا – بخش سوم

جلسه سی و نهم: پروژه ساخت پنل مدیریت محتوا – بخش چهارم

جلسه چهلم : پروژه ساخت پنل مدیریت محتوا – بخش پنجم

جلسه چهل و یکم : پروژه ساخت قالب با بوت استرپ 4 – بخش اول

جلسه چهل و دوم : پروژه ساخت قالب با بوت استرپ 4 – بخش دوم

جلسه چهل و سوم : پروژه ساخت قالب با بوت استرپ 4 – بخش سوم

جلسه چهل و چهارم : پروژه ساخت قالب با بوت استرپ 4 – بخش چهارم