“آموزش Bootstrap4 در قالب سه پروژه عملی و کاربردی”
Bootstrap چیست؟
وقتی می‌خواهیم یک صفحه وب را طراحی کنیم باید از طریق html، css ، jquery و… صفحه مورد نظر را کدنویسی کنیم، حال اگر بخواهیم یک صفحه وب را در سریع‌ترین شکل ممکن به صورت واکنش گرا طراحی کنیم بهترین گزینه استفاده از Bootstrap است چون ابزاری‌هایی را در اختیار ما قرار می‌دهد که روند طراحی و کدنویسی را سریع‌تر می‌کند.
طراحی قالب یک وبسایت از پایه زمان‌بر است حتی برای کسانی که چندین سال کار کد نویسی قالب انجام داده‌اند و به زبان‌های html، css، جاوا اسکریپت و… تسلط دارند، تعدادی از طراحان و توسعه‌دهندگان سایت معروف توییتر در جهت رفع این مشکل، فریم ورکی به نام بوت استرپ ارائه کردند که طراحی صفحات وب را برای توسعه دهندگان و طراحان وب آسان‌تر کرد که در حال حاضر تعداد زیادی از طراحان صفحات وب از فریم ورک بوت استرپ استفاده می‌کنند.
ویژگی‌های جدید Bootstrap ورژن ۴ :
- اسباب کشی از LESS به SASS
- بهبود یافتن سیستم Grid
- پشتیبانی توکار از Flex box
- اضافه شدن ویژگی جدید Cards
- ثابت شدن تمام HTML Reset ها داخل یک ماژول جدید با نام Reboot
- قابلیت سفارشی سازی مدرن
- توقف پشتیبانی از IE8 و IE9 و استفاده از واحدهای em و rem
- بازنویسی مجدد پلاگین‌های جاوا اسکریپت در بوت استرپ ۴
- بهبود یافتن مکان قرارگیری خودکار tooltip و popover
- بازنویسی تمام مستندات
- اما در بین این ویژگی‌های اضافه شده در سیستم فریم ورک، یک ویژگی خاص برای کاربران وجود دارد که از آن می‌توان به عنوان یک ویژگی منحصر بفرد در این نسخه نام برد. بوت استرپ ۴ از بوت استرپ ۳ پشتیبانی می‌کند و کاربران می‌توانند بدون نگرانی به توسعه وب با بوت استرپ ۳ پرداخته و پس از عرضه نسخه کامل بوت استرپ ۴، کدهای خود را بهبود دهند.
سرفصل‌های دوره بوتسترپ:
-معرفی دوره:
- معرفی دوره و توضیح پروژه ها
-تایپو گرافی:
- کلاس هدر و display و فونت ها و…
- ایجاد معماری فانکشنال برای پروژه و واکشی اطلاعات از دیتابیس
- کلاس float , fixtop و …
- کلاس های عرض و ارتفاع و border
- آموزش ریسپانسو کردن قالب
-دکمه ها :
- طراحی انواع دکمه ها در بوت استرپ ۴
-Navbar:
- طراحی navbar ریسپانسیو
-List group ها:
- لیست گروپ ها و ایجاد تب با لیست گروپ
-Form group:
- کلاس های فرم ها و فرم گروپ ها
-جداول و alert:
- ایجاد جداول و نمایش پیغام ها با کلاس های alert
-صفحه بندی
-Card:
- کار با انواع card
-سیستم گرید
-Flexbox:
- Flexbox-automargin
-Collapse-Accordion-Tooltips
-modal
-پروژه اول:
- پروژه ساخت سایت استاتیک تک صفحه ای
-پروژه دوم:
- پروژه ساخت پنل مدیریت
-پروژه سوم:
- پروژه ساخت قالب رزومه شخصی
شما می توانید هرگونه سوال یا پیشنهاد خود را از طریق دیدگاه های همین پست مطرح بفرمایید.
نوشته آموزش Bootstrap4 در قالب سه پروژه عملی و کاربردی اولین بار در دانشجویار پدیدار شد.
