دوره آموزش بوت استرپ (Bootstrap) مقدماتی تا پیشرفته - کد دوره: 214095

سرفصل‌ها
رایگان 00:14:48

بررسی فریم ورک بوت استرپ (Bootstrap)، ویژگی های بوت استرپ، چرا باید از بوت استرپ استفاده کنیم؟، مسیر یادگیری بوت استرپ (Bootstrap) چیست؟

نحوه نصب بوت استرپ فارسی (نسخه RTL) به همراه وابستگی popper.js و فایل‌های جاوا اسکریپت آن در این بخش ارائه می شود.

کار با Grid ها در بوت استرپ

3
00:12:16

معرفی Grid های ۱۲ تایی بوت استرپ به همراه کلاس های container و row و col به همراه ارائه مثال

معرفی breakpoint ها در بوت استرپ

4
00:10:51

بررسی ابعاد تجهیزات هوشمند مثل موبایل، تبلت، دسکتاپ و تلویزیون، معرفی کلاس‌های sm و md و lg و xl و xxl در بوت استرپ

کار با Gutters و Spacing

5
00:07:51

Gutters به عنوان یک معیار برای سنجش فاصله‌های بین دو ردیف می باشد. با استفاده از Spacing می توان دستورهای p و m که بیانگر padding و margin هستند را تعریف کرد.

مباحث تکمیلی و پیشرفته کار با ستون ها (Columns)

6
00:29:52

معرفی و کار با دستورهای col-* و clearfix، کار با ابزار ordering جهت ترتیب‌بندی ستون‌های یک ردیف، معرفی دستورهای align-items-start و align-items-center و align-items-end در بوت استرپ

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

7
00:23:56

معرفی تایپوگرافی متون و کار با تگ‌های h1 تا h6، کلاس های text-muted و text-truncate، ارائه کلاس lead و display جهت نمایش بهتر عبارت ها، بررسی لیست ها و کلاس های مرتبط با آن، کار با چپ چین و راست چین کردن جمله ها و پاراگراف ها در بوت استرپ

تصاویر و فیگورها (Images & Figures)

8
00:11:41

طراحی ریسپانسیو تصاویر و فیگورها با استفاده از کلاسهای img-fluid و figure-img و figure-caption. ایجاد تصاویر بند انگشتی با img-thumbnail.

جداول (Tables) در بوت استرپ

9
00:25:22

در این بخش به صورت کامل با انواع جداول در بوت استرپ کار کرده و در نهایت ساختار responsive هر جدول را بررسی می کنیم.

کار با فرم ها در بوت استرپ - قسمت اول

10
00:15:50

در این بخش به کلاس form-control و ابعاد فرم ها می پردازیم و سپس با ساختارهای color و file و disabled و readonly و break point ها آشنا می شویم.

کار با فرم ها در بوت استرپ - قسمت دوم

11
00:14:47

کلاس های form-check و form-check-input و form-check-label بررسی و سپس به نحوه کار با کلاس form-switch برای طراحی دکمه های دو وضعیتی می پردازیم. کلاس form-check-inline نیز برای خطی کردن دکمه ها معرفی می شود.

کار با Range ها و لیبیل ها در بوت استرپ

12
00:14:50

در این بخش با کلاس form-range یک اسکرولر قیمت (حداکثر و حداقل قیمت) را نمایش می دهیم و سپس با استفاده از form-floating به تغییر اندازه لبیبل ها در ورودی می پردازیم.

توضیحات دوره

اگر به عنوان یک توسعه‌دهنده فرانتد فعالیت می کنید باید حتما و حتما به یکی از فریم ورک های CSS مسلط بوده و طراحی های خود را مدرن تر و با سرعت بالاتری انجام دهید. امروزه اکثر شرکت های بزرگ در داخل و خارج از کشور یک فریم ورک واحد را به عنوان فریم ورک CSS استفاده می کنند. گاهی این فریم ورک ها توسط خود شرکت ها نوشته می شوند و در برخی از موارد از برترین فریم ورک بهره می برند. اما در هر صورت انتخاب یک فریم ورک قدرتمند در حوزه CSS خیلی سخت نیست و ما به شما یادگیری بوت استرپ (Bootstrap) را توصیه می کنیم.

چرا بوت استرپ (Bootstrap)؟

قبل از انتخاب هر فریم ورکی باید به سرعت توسعه و Community یا همان انجمن گفت و گوی آن بپردازید. اگر یک فریم ورک با سرعت بالایی توسعه پیدا کند قطعا امکانات و ویژگی های بهتری را در اختیار کاربر می گذارد. Community یا انجمن گفت و گو شرایطی را ایجاد می کند تا کاربر به پاسخ تمام سوالات خود برسد. بدون شک بوت استرپ یکی از برترین فریم‌ورک های CSS در دنیا بوده که در حال حاضر سهم بزرگی از بازار را به خود اختصاص داده است.

ما بوت استرپ (Boostrap) را یاد می گیریم که بتوانیم پروژه های خود را سریع تر از قبل کدنویسی و طراحی کنیم. بوت استرپ ابزارهای قدرتمند و رایگانی را در اختیار مخاطبانش قرار می دهد که پیاده سازی یک ساختار را که قبلا ساعت ها زمان می برد در کمتر از چند ثانیه انجام دهد. در ادامه برخی از ویژگی های کلیدی این فریم ورک را بررسی خواهیم کرد:

ویژگی های بوت استرپ (Bootstrap)

یادگیری بسیار راحت: از برترین ویژگی های این فریم ورک می توان به یادگیری سریع و بدون دردسر آن اشاره کرد. البته لازم به ذکر است که برای کار با این فریم ورک باید به زبان های HTML‌ و CSS مسلط باشید.

ساختار گرید منظم

Grid یا گرید به عنوان یکی از چارچوب های پروژه شناخته می شود که در بوت استرپ به یک صفحه با ۱۲ قسمت مساوی تقسیم شده و متناسب با سایز صفحه این گریدها تغییر می کند.

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

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

لیست عظیمی از کامپوننت ها

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

واکنش گرا

فریم ورک بوت استرپ از قابلیت واکنش گرا (Responsive) بهتره می برد و این ویژگی باعث می شود تا صفحات شما بدون هیچ مشکلی در تجهیزات دیگر مانند موبایل، تبلت و ... نمایش داده شود.

مستندات واضح

وب سایت بوت استرپ (Bootstrap) یکی از بهترین مستندات را درباره فریم ورک خود ارائه داده است که شما با مطالعه آن می توانید به تمام مشکلات خود پاسخ دهید.

مخاطب این دوره چه کسانی هستند؟

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

سرفصل های دوره بوت استرپ (Bootstrap)

مقدمه و معرفی

  • بررسی مقدماتی بوت استرپ (Bootstrap)
  • بررسی دلایل انتخاب یک فریم ورک CSS
  • معرفی مسیر یادگیری طراحی UI و UX یک وب سایت

نصب و راه اندازی اولیه

  • پیاده سازی یک پروژه بوت استرپ از صفر
  • راه اندازی فایل های جانبی CSS و JS
  • دانلود بوت استرپ فارسی از وب سایت مرجع
  • نوشتن اولین کد با استفاده از HTML‌ و CSS در قالب بوت استرپ

گریدها (Bootstrap Grid Systems)

  • معرفی Grid ها در بوت استرپ
  • کار با کلاس های container و row و col
  • معرفی breakpoint های یک grid

مباحث پیشرفته ستون‌ها (Columns)

  • کار با ستون‌های ترکیبی (col-sm و col-md و ...)
  • ترتیب‌بندی ستون‌های یک ردیف با کلاس order
  • آفست دادن به ستون های یک ردیف با کلاس offset
  • جهت دادن به ستون های یک ردیف با کلاس های align-items-start و align-items-center و align-item-end
  • قرار دادن ستون ها در یک ردیف مجزا بدون استفاده از کلاس row
  • معرفی عبارت clearfix در CSS و کار با کلاس clearfix

Gutters و Spacing

  • معرفی Gutters در بوت استرپ
  • معرفی Spacing در بوت استرپ به همراه اعداد و spacer ها
  • معرفی Notation ها یا نمادهای p و m و x و y و استفاده ترکیبی آنها با spacer ها

تایپوگرافی (Typography)

  • معرفی تایپوگرافی در بوت استرپ
  • بررسی تگ های h1 و h2 و h3 و h4 و h5 و h6
  • استفاده از کلاس text-muted
  • کار با کلاس‌های display-1 و display-2 و display-3 و display-4 و display-5 و display-6
  • بررسی کلاس lead
  • معرفی کلاس های مرتب با متون توکار مثل هایلایت، زیر خط دار، خط زدن متن، بولد کردن و ...
  • کار با نقل قول ها یا Blockquotes
  • معرفی Alignment یا جهت گیری در بوت استرپ به همراه بررسی کلاس های text-center و text-left و text-right و text-end
  • کار با لیست ها (Lists) و کلاس list-unstyled و list-inline و list-inline-item
  • کار با کلاس text-truncate جهت برش متون

تصاویر (Figure & Image)

  • کار با کلاس های img-fluid و img-thumbnail
  • معرفی کلاس های figure و figure-caption و figure-img
  • کار با کلاس های rounded و float-start و float-end

جداول (Tables)

  • معرفی کلاس table
  • کار با انواع رنگ بندی جداول
  • استفاده از قابلیت table-hover و table-striped
  • کار با حاشیه جداول با دستور table-bordered
  • معرفی دستورهای table-borderless و table-primary
  • تغییر ابعاد padding جداول بوت استرپ با دستور table-sm
  • معرفی ساختار رسپانسیو (Responsive) جداول در بوت استرپ
  • استفاده از فوتر و کپشن برای جداول
  • تغییر دادن رنگ سلول ها و سطرها با دستور table-active

فرم ها در بوت استرپ

  • معرفی فرم ها
  • کار با کلاس form-control
  • معرفی کلاس های form-label و form-control-plaintext
  • بررسی ساختارهای disabled و readonly در فرم ها
  • معرفی ابعاد فرم ها با دستورهای break point
  • کار با کلاس form-control-color و datalist ها
  • نحوه آپلود فایل با استفاده از فرم ها در بوت استرپ (کلاس file)
  • معرفی کلاس form-select برای Select Box ها
  • کار با Checkbox ها و Radio Button ها
  • معرفی کلاس form-check و form-check-input و form-check-label
  • کار با کلاس form-switch برای دکمه های دو وضعیتی
  • افقی کردن فرم ها با کلاس form-check-inline
  • آموزش نحوه disable یا غیر فعال کردن دکمه های رادیویی و checkbox
  • کار با نوارهای range با کلاس form-range
  • تعیین مقدار min و max برای range یک اسکرولر
  • بررسی کلاس form-floating جهت نمایش label ها در کنار ورودهای فرم
افزودن به سبد خرید
195000 تومان
کارما دریافت 25 کارما با شرکت در این دوره
استفاده بیش از یک نفر از این محصول غیرقانونی و از لحاظ شرعی حرام می‌باشد.
میزان پیشرفت دوره:
٪38
14 نفر
شرکت کرده‌اند
8 نظر
ثبت شده است
امتیاز (1 رای)
تاریخ انتشار:
1399-12-5
وضعیت دوره:
در حال برگزاری
تعداد جلسات:
12
مدت زمان:
03:15:00
حجم کل:
گیگابایت
سطح:
تمام سطوح
مسعود صالحی
مدرس: مسعود صالحی
1345 کارما
بیش از ۲ سال عضویت در روکسو بیش از ۲ سال عضویت در روکسو
دارای 1000 کارما دارای 1000 کارما
دارای 10 پاسخ صحیح دارای 10 پاسخ صحیح
ارسال کننده پاسخ با 25 رای ارسال کننده پاسخ با 25 رای

دیدگاه‌های شما (8 دیدگاه)

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

me.rashno@gmail.com
میثم ر
28 فروردین 1400
من اشتراک ویژه گرفتم ولی ویدئو ها دیر لود میشه با وی پی ان هم که سایت اجرا نمیشه امکان دانلود هم نیست عملا پولم دور ریختم

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

تیم مدیریت روکسو
تیم مدیریت روکسو
07 اردیبهشت 1400

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

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

laya.zabihi@yahoo.com
لعیا ذبیحی
14 فروردین 1400
میشه بگین این دوره تقریبا کی تکمیل میشه>؟

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

تیم مدیریت روکسو
تیم مدیریت روکسو
14 فروردین 1400

سلام، فصل های دوره به صورت هفتگی آپدیت می شوند و نهایتا تا یک ماه آینده این دوره به اتمام می رسد.

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

mehdiderki07@gmail.com
محمد مهدی درکی
05 فروردین 1400
این دوره تکمیل شدست؟

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

تیم مدیریت روکسو
تیم مدیریت روکسو
06 فروردین 1400

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

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

مجید مردانه
مجید مردانه
02 فروردین 1400
سلام مهندس علت اینکه left و right رو برداشتن چیزی که به ذهن من میرسه اینه که ارتباط مستقیم با پشتیبانی از rtl داره و برای اینه که اگه شما بین rtl و ltr سوئیچ کردین مشکلی پیش نیاد. ویژگی های end و start نسبی هستن و در واقع زمانی که شما در حالت rtl هستین، end به معنای چپ هست و زمانی که ltr هستین به معنای راست. برای اینه که دوباره کاری نشه و مجبور نشین چپ چین و راست چینتون رو تغییر بدین با تغییر direction

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

mortezahayati509@gmail.com
پرهام پیرحیاتی
27 اسفند 1399
این الان bootstrap4 هست؟

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

مسعود صالحی
مسعود صالحی
27 اسفند 1399
سلام در این دوره بوت استرپ 5 یا Bootstrap 5 تدریس شده است.

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

pasha.kouroghli@mail.com
پاشا کوراغلی
27 اسفند 1399
مهندس سلام وقتتون بخیر کاره پاپر ها دقیقا چی هستش؟

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

تیم مدیریت روکسو
تیم مدیریت روکسو
27 اسفند 1399

سلام، لطفا سوالات فنی خودتون رو از طریق وب سایت روکسو کیو به آدرس www.roxo.ir/q مطرح کنید.

با تشکر

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

mohammadcom761@gmail.com
محمد شهریارپناه
09 اسفند 1399
سلام ، جناب صالحی برای ساخت یه پنل ادمین در بک اند با بوت استرپ این دوره کفایت می کنه ؟

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

مسعود صالحی
مسعود صالحی
10 اسفند 1399
سلام، بله این دوره صفر تا صد بوت استرپ را شامل می شود و پس از گذراندن آن نیاز به دوره یا منبع دیگری نیست.

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

omidrayaneh@gmail.com
امید صادقی
08 اسفند 1399
ممنون از دوره جدیدتون D:

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

پیگیری مطالب جذاب و تخفیف‌ها

اینستاگرام روکسو تلگرام روکسو ایمیل و خبرنامه روکسو