×
تعداد دانشجو
۲,۹۵۳ نفر
۲۳,۰۰۰ تومان ۱۳,۸۰۰ تومان

آموزش بوت استرپ (Bootstrap) برای طراحی صفحات وب

آموزش بوت استرپ (Bootstrap) برای طراحی صفحات وب

تعداد دانشجو
۲,۹۵۳ نفر
مدت زمان
۶ ساعت و ۲۶ دقیقه
هزینه عادی آموزش
۲۳,۰۰۰ تومان
در طرح تخفیف
۱۳,۸۰۰ تومان

(کسب اطلاعات بیشتر +)
محتوای این آموزش
۱۷ بازخورد (مشاهده نظرات)
آموزش بوت استرپ (Bootstrap) برای طراحی صفحات وب

چکیده

Bootstrap یک چارچوب نرم افزاری یا Framework است که شامل توابع و کتابخانه های از پیش آماده شده به زبان HTML و CSS و JavaScript می باشد که به ما این امکان را می دهد تا در صفحات وب خود، با استفاده از کتابخانه های از پیش آماده، المان هایی نظیر: فرم ها، دکمه ها، تب ها و … را ایجاد کرده و رابط کاربری وب سایت خود را توسعه دهیم. با توجه به امکانات ارائه شده توسط Bootstrap و همین طور سادگی استفاده از آن، روز به روز به تعداد وب سایت هایی که از آن استفاده می کنند، افزوده می شود. با توجه به تعداد استفاده کاربران و همین طور امکانات آن، به تازگی به روز رسانی جدیدی برای این ابزار ارائه شده است که با نام Bootstrap 4 شناخته می شود.

مدرس
سید رضا هاشمیان

کارشناسی مهندسی فناوری اطلاعات

مهندس سید رضا هاشمیان، کارشناس فناوری اطلاعات گرایش برنامه نویسی تحت وب هستند. وی به عنوان برنامه نویس تحت وب فعالیت خود را آغاز کرده و همچنین به عنوان مدرس، در موسسات آموزشی مختلف به تدریس تکنولوژی ها و زبان های برنامه نویسی تحت وب می پردازند.

توضیحات تکمیلی

رابط کاربری سایت، همه آنچه کاربر می بیند

صفحات وب در دو قسمت Back end و همین طور Front end تقسیم می شوند. قسمت Back end شامل قطعه کدهایی است که در پس زمینه اجرا می شوند، مانند: قطعه کدهای PHP و یا ASP.Net و کاربر از اجرای آن ها و همین طور نحوه کارکرد آن ها، چیزی مشاهده نمی کند. تنها چیزی که از قسمت Back end در اختیار کاربر قرار می گیرد، نتیجه اجرای کدها می باشد.

اما اصلی ترین و مهم ترین قسمتی که هر کاربر در صفحه وب با آن رو به رو است، بخش Front end می باشد. Front end همان رابط کاربری وب سایت بوده و شامل المان ها و محل قرارگیری آن ها و همین طور نحوه نمایش خروجی دریافت شده از قسمت Back end می باشد.

طراحی رابط کاربری یا Front end، یکی از مشکلات اساسی برنامه نویسان وب می باشد. زیرا طراحی رابط کاربری که زیبا باشد و مورد پسند کاربران واقع شود، کمی سخت می باشد. در حال حاضر وب سایت هایی هستند که به دلیل عدم ارائه رابط کاربری مناسب، کاربران خود را از دست می دهند.

به منظور طراحی رابط کاربری وب سایت، زبان ها و همین طور ابزارهای مختلفی ارائه شده است تا برنامه نویسان بتوانند با استفاده از آن ها، امکانات مورد نظر خود را در صفحات وب، پیاده سازی کرده و رابط کاربری زیبایی را ایجاد کنند. از جمله این ابزارها، ابزار Bootstrap می باشد.

 
Bootstrap، چارچوبی قدرتمند

Bootstrap یک چارچوب نرم افزاری یا Framework است که شامل توابع و کتابخانه های از پیش آماده شده به زبان HTML و CSS و JavaScript می باشد که به ما این امکان را می دهد تا در صفحات وب خود، با استفاده از کتابخانه های از پیش آماده، المان هایی نظیر: فرم ها، دکمه ها، تب ها و … را ایجاد کرده و رابط کاربری وب سایت خود را توسعه دهیم.

با توجه به امکانات ارائه شده توسط Bootstrap و همین طور سادگی استفاده از آن، روز به روز به تعداد وب سایت هایی که از آن استفاده می کنند، افزوده می شود. با توجه به تعداد استفاده کاربران و همین طور امکانات آن، به تازگی به روز رسانی جدیدی برای این ابزار ارائه شده است که با نام Bootstrap 4 شناخته می شود.

به روز رسانی انجام شده در نسخه چهارم Bootstrap را می توان بزرگ ترین به روز رسانی که تاکنون برای Bootstrap ارائه شده است، دانست. در این به روز رسانی، تغییرات عمده ای در Bootstrap ارائه شده است که از جمله این تغییرات می توان به موارد زیر اشاره کرد:

  • انتقال از Less به Sass
  • بهبود شبکه Grid و استفاده از R.E.M
  • تغییر المان های Panel و Wells و انتقال به Reset Component
  • به روز رسانی Print style ها
  • اضافه شدن کلاس های Responsive جدید
  • اضافه شدن نمونه های جدید
 
فهرست سرفصل ها و رئوس مطالب مطرح شده در این مجموعه آموزشی، در ادامه آمده است:
  • درس یکم: شروع به کار با Bootstrap
  • درس دوم: کار با شبکه Grid در بوت استرپ
  • درس سوم: کار با Flex Box در بوت استرپ
  • درس چهارم: کار با Typography در Bootstrap
  • درس پنجم: کار با رنگ ها
  • درس ششم: کار با جدول ها
  • درس هفتم: کار با تصاویر
  • درس هشتم: کار با Jumbotron در Bootstrap
  • درس نهم: کار با اعلان ها
  • درس دهم: کار با دکمه ها
  • درس یازدهم: کار با دکمه های گروهی
  • درس دوازدهم: کار با نشان Badge ها در بوت استرپ
  • درس سیزدهم: کار با نوارهای پیشرفت
  • درس چهاردهم: کار با صفحه بندی در Bootstrap
  • درس پانزدهم: کار با لیست ها در بوت استرپ
  • درس شانزدهم: کار با Card ها
  • درس هفدهم: کار با لیست های کشویی
  • درس هجدهم: کار با Collapse
  • درس نوزدهم: کار با منوها در بوت استرپ
  • درس بیستم: کار با فرم ها
  • درس بیست و یکم: کار با ورودی ها در Bootstrap
  • درس بیست و دوم: کار با Carousel
  • درس بیست و سوم: کار با Modal ها در Bootstrap
  • درس بیست و چهارم: کار با Tooltip ها
  • درس بیست و پنجم: کار با Popover بوت استرپ
  • درس بیست و ششم: کار با Scrollspy
  • درس بیست و هفتم: کار با کلاس های کمکی در Bootstrap
  • درس بیست و هشتم: پروژه نهایی پیاده سازی قالب وبلاگ
 
مفید برای رشته های
  • مهندسی کامپیوتر
  • مهندسی فناوری اطلاعات (IT)
مشاهده بیشتر مشاهده کمتر

آنچه در این آموزش خواهید دید:

آموزش ویدئویی مورد تائید فرادرس
فایل برنامه ها و پروژه های اجرا شده

نرم افزارهای مرتبط با آموزش

ویرایشگر متن ++Notepad



پیش نمایش‌ها

۱. شروع به کار با Bootstrap

توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید (دانلود پیش‌نمایش - حجم: ۷ مگابایت -- (کلیک کنید +))

۲. کار با شبکه Grid در بوت استرپ

توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید (دانلود پیش‌نمایش - حجم: ۱۱ مگابایت -- (کلیک کنید +))

۳. کار با Flex Box در بوت استرپ

توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید (دانلود پیش‌نمایش - حجم: ۱۶ مگابایت -- (کلیک کنید +))

۴. کار با Typography در Bootstrap

توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید (دانلود پیش‌نمایش - حجم: ۱۲ مگابایت -- (کلیک کنید +))

۵. کار با رنگ ها
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۶. کار با جدول ها
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۷. کار با تصاویر
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۸. کار با Jumbotron در Bootstrap
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۹. کار با اعلان ها
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۰. کار با دکمه ها
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۱. کار با دکمه های گروهی
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۲. کار با نشان Badge ها در بوت استرپ
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۳. کار با نوارهای پیشرفت
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۴. کار با صفحه بندی در Bootstrap
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۵. کار با لیست ها در بوت استرپ
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۶. کار با Card ها
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۷. کار با لیست های کشویی
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۸. کار با Collapse
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۹. کار با منوها در بوت استرپ
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۰. کار با فرم ها
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۱. کار با ورودی ها در Bootstrap
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۲. کار با Carousel
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۳. کار با Modal ها در Bootstrap
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۴. کار با Tooltip ها
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۵. کار با Popover بوت استرپ
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۶. کار با Scrollspy
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۷. کار با کلاس های کمکی در Bootstrap
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۸. پروژه نهایی پیاده سازی قالب وبلاگ
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.

راهنمای سفارش آموزش‌ها

آیا می دانید که تهیه یک آموزش از فرادرس و شروع یادگیری چقدر ساده است؟

(راهنمایی بیشتر +)

در مورد این آموزش یا نحوه تهیه آن سوالی دارید؟
  • با شماره تلفن واحد مخاطبین ۵۷۹۱۶۰۰۰ (پیش شماره ۰۲۱) تماس بگیرید. - تمام ساعات اداری
  • با ما مکاتبه ایمیلی داشته باشید (این لینک). - میانگین زمان پاسخ دهی: ۳۰ دقیقه


اطلاعات تکمیلی

نام آموزش آموزش بوت استرپ (Bootstrap) برای طراحی صفحات وب
ناشر فرادرس
شناسه اثر ۸–۱۲۴۵۲–۰۶۴۹۱۵ (ثبت شده در مرکز رسانه‌های دیجیتال وزارت ارشاد)
کد آموزش FVBF9611
مدت زمان ۶ ساعت و ۲۶ دقیقه
زبان فارسی
نوع آموزش آموزش ویدیویی (لینک دانلود)
حجم دانلود ۸۷۰ مگابایت (کیفیت ویدئو HD‌ با فشرده سازی انحصاری فرادرس)


نظرات

تا کنون ۲,۹۵۳ نفر از این آموزش استفاده کرده اند و ۱۷ نظر ثبت شده است.
فروغ
فروغ

سلام استاد مهربانم
از اموزش عالی تون واقعا ممنونم

صهیب
صهیب

آموزش خوبیه نسبت به قیمتی که داره. به نظرم اگه از اساتیدی استفاده کنید که سرشناس باشن، قطعا آموزش های بهتری هم ارائه میشه.

زهرا
زهرا

دوره از نظر مطالب گفته شده خیلی خوب بود اما محتوای مطالب گفته شده کم بود و نیاز به ارائه توضیحات بیشتری هست.

فاطمه
فاطمه

با تشکر از آموزش هاتون.
یه پیشنهادی داشتم. به نظرم خیلی پشت سر هم و بدون مکث مطالبو توضیح میدید که این از نظر من مخاطب رو خسته میکنه. بنظرم مکث کردن بین صحبت ها و تغییر ولوم صدا خیلی کمک میکنه که مطالبتون برای مخاطب جذاب تر باشه.

0093784110293
0093784110293

تشکر از شما
واقعا آموزش bootstrap خیلی عالی است
ممنون از شما استاد گرامی
موفق و پیروز باشید

سروش
سروش

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

آرمان
آرمان

فکر می کنم تمام آموزش های آقای هاشمیان رو گرفتم، ایشون خیلی مسلط حرف می زنند، انگار قبل از اینکه درسو ضبط کنند، چند بار تمرین کرده بودند.
سرفصلای کامل و مثال های خوبی هم ارائه دادند.

آرمان
آرمان

آموزش خیلی خوبی بود و خیلی به من کمک کرد، من همه‌ی آموزش‌های شما رو تهیه کردم و کاملا راضی هستم.

بنفشه
بنفشه

بسیار عالی!

مجتبی
مجتبی

از نظر محتوایی کامل و خوب بود ولی یه سری مباحث ریزی بیان نشده بود.

رضا
رضا

آموزش خوب بود ولی می توانست سرفصل ها کامل تر باشد. این اموزش را از آموزشگاه دیگری هم تهیه کرده بودم آموزش فرادرس بهتر بود. پیشنهاد می کنم آموزش های فرادرس را به صورت INTERACTIVE قرار دهید تا دانشجویان مرحله به مرحله پیشرفت کنند و تسلط کافی را در اموزش بدست آوردند.

مهمان
مهمان

سلام و عرض ادب
من این اموزش رو خریدم
به نظر میرسه اموزش خوبی باشه خیلی ممنون

عباسی
عباسی

بسیار عالییی فن بیان خوب و کیفیت بالا
فقط میشد کمی دقیقتر و جزئی تر باشه
ممنون از سایت خوبتون

سمانه
سمانه

درود و وقت بخیر.
بوت استرپ (bootstrap) فریم ورکیه که در طراحی سایت رسپانسیو استفاده می‌شه. بیشتر کسایی از این فریم ورک استفاده می‌کنن که از نظر زمانی عجله دارند، وگرنه هیچ تفاوتی از نظر سئو بین سایتی که با این فریم ورک طراحی شده با سایتی که به صورت دستی ساخته شده باشد، وجود نداره. و به تنها چیزی که برای استفاده از این فریم ورک نیاز داریم، دانش ابتدایی درخصوص HTML و CSS هستش. من پیش نمایش این دوره رو دیدم. سپاس فراااااوان از استاد دوره جناب آقای مهندس هاشمیان برای بیان شیوا و رسا و پربار شون. با اینکه این دوره تمام مباحث بوت استرپ 4 رو در بر میگیره و شاید در ابتدا سنگین به نظر بیاد، اما کلام آقای مهندس هاشمیان و قدرت محاوره تخصصی اما ساده ایشون، اشتیاق من رو برای یادگیری چند برابر کرد و میدونم به هیچ عنوان خسته نمیشم اگر این آموزش ادامه دار باشه.

azita
azita

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

مهرداد
مهرداد

سلام خسنه نباشید و تشکر از زحمات شما بابت فراهم کردن نیاز من و سایر دانشجویان و همچنین تشکر میکنم بابت اینکه توانسته اید لذت و تفریح بسیار شیرین یادگیری را برای ما هدیه داده اید. من از تماشای ویدیوهای شما لذت میبرم. تک تک ثانیه های ویدیو ها برام شیرین و لذت بخشه. ممنون

محمد
محمد

سلام
قطعا در حال حاضر بهترین فریم ورک برای ریسپانسیو کردن یک وب سایت , بوت استرپ می باشد .
این فریم ورک کاملا رایگان قادر خواهد بود تا به صورت بسیار ساده و آسان , وب سایت شما را به بهترین نوع ممکن ریسپانسیو نماید .
اما یکی از مشکلاتی که این فریم ورک دارا می باشد , عدم استفاده از شیوه نوشتاری RTL می باشد که ما برای ساخت وب سایت های فارسی نیازمند آن هستیم که من امید وار بودم که استاد آنرا تدریس کرده باشند .
در کل آموزش خوبیه و در طراحی قالب برای ورد پرس هم مورد استفاده قرار میگیرد.
بنده تهیه کردم و به شما هم پیشنهاد میکنم


برچسب‌ها:
Bootstrap | بوت استرپ | شروع به کار با Bootstrap | طراحی صفحات وب با Bootstrap | طراحی صفحات وب با بوت استرپ | کار با Card ها | کار با Collapse | کار با Jumbotron در Bootstrap | کار با Modal ها در Bootstrap | کار با Popover بوت استرپ | کار با Scrollspy در Bootstrap | کار با Tooltip ها در Bootstrap | کار با Typography در Bootstrap | کار با دکمه های گروهی در Bootstrap | کار با رنگ ها در Bootstrap | کار با شبکه Grid در Bootstrap | کار با صفحه بندی در Bootstrap | کار با فرم ها در Bootstrap | کار با کلاس های کمکی در Bootstrap | کار با لیست ها در بوت استرپ | کار با لیست های کشویی در Bootstrap | کار با منوها در Bootstrap | کار با نشان Badge ها در بوت استرپ | کار با ورودی ها در Bootstrap | نسخه 4 فریمورک Bootstrap
مشاهده بیشتر مشاهده کمتر