اگر به عنوان یک توسعه‌دهنده فرانتد فعالیت می کنید باید حتما و حتما به یکی از فریم ورک های 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 ها در کنار ورودهای فرم
- طراحی و پیاده سازی انواع فرم افقی و عمودی
- کار با کلاس های validation شامل need-validations و invalid-feedback و valid-feedback و …
کامپوننت‌های بوت استرپ
- معرفی ساختار آکاردئون یا Accordion
- کار با ابزار پیغام ها یا Alerts
- استفاده از برچسب ها یا Badges
- راه اندازی برید کرامب یا Breadcrumb یا خط راهنمای سایت
- دکمه ها یا Buttons در بوت استرپ
- کار با Card ها و نمایش محصولات
- کار با اسلایدشوها و Carousel
- معرفی DropDown منو یا منوی آبشاری و دکمه‌های چند وضعیتی
- گروه های لیستی و Modal ها
- استفاده از Tab ها و طراحی منوهای بوت استرپی با استفاده از Nav و Narbar
- کار با منوی موبایل Offcanvas
- آموزش صفحه بندی Pagination در بوت استرپ
- کار با Placeholder و Skeleton
- کار با تولتیپ ها و Popover
- کار با Progress Bar یا نوار پیشرفت
- معرفی Scrollspy
- کار با لودینگ ها (Spinners)
- معرفی Utils ها
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای دوره پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.