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

دسترسی به اطلاعات این آموزش: اطلاعات کلی محتوا و سرفصل ها پیش نمایش و دانلود اطلاعات تکمیلی دیدگاه ها

درباره ناشر

فرادرس
فرادرس

فرادرس بزرگ‌ترین ناشر دیجیتال آموزش‌های تخصصی، دانشگاهی و مهندسی است.

درباره مدرس

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

عضو گروه مدرسین فرادرس

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


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



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 - مورد تایید فنی فرادرس)
    حجم دانلود ۸۷۰ مگابایت     (کیفیت ویدئو HD‌ با فشرده سازی انحصاری فرادرس)
    تعداد DVD یک عدد (در صورت دریافت غیر آنلاین)


    ​راهنمای تهیه آموزش ها

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

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

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

    با شروع یادگیری، یک کلیک فاصله دارید. همین حالا شروع کنید.

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

    هزینه آموزش: ۲۰,۰۰۰ تومان



    سایر آموزش های مهندس سید رضا هاشمیان




    دیدگاه ها

    تا کنون ۵۳۴ نفراز این آموزش استفاده کرده اند.
    1. 5 از 5

      :

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

    2. 0 از 5

      :

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


    نظر شما در مورد این فرادرس چیست؟

    درج دیدگاه

    امتیاز شما به این آموزش:

    *



​همین امروز شروع به آموختن کنید​

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

هزینه آموزش: ۲۰,۰۰۰ تومان


برچسب‌ها: , , , , , , , , , , , , , , , , , , , , , , , ,




فرادرس در رسانه ها و جشنواره ها

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

عضویت در خبرنامه فرادرس

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


تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

فرادرس مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی logo-samandehi پرداخت آنلاین -  بانک ملت پرداخت آنلاین - بانک پارسیان پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان