- مدرس دوره : علی صالحی ( رزومه )
- تعداد ویدیوها : 29 ویدیو
- مدت زمان دوره : 5:38:00
- سطح دوره : پیشرفته
- وضعیت دوره : به اتمام رسیده
- تاریخ آخرین بروزرسانی : 1403/08/09
آموزش BootStrap ورژن 5.1.3 (همراه با پروژه عملی پیشرفته)
یک فریمورک محبوب و رایگان برای توسعه وب است که به ویژه برای طراحی رابط کاربری واکنشگرا (Responsive) استفاده میشود. این فریمورک که توسط توییتر ایجاد شده، به توسعهدهندگان کمک میکند تا بدون نیاز به نوشتن کدهای زیاد CSS و جاوا اسکریپت، وبسایتها و برنامههای وب سریع و کارآمدی بسازند.
ویژگیها و امکانات بوتاسترپ:
طراحی واکنشگرا (Responsive Design):
بوتاسترپ از یک سیستم شبکهبندی (Grid) قدرتمند و انعطافپذیر بهره میبرد که امکان طراحی صفحات وب با ساختار واکنشگرا را فراهم میکند. این بدان معناست که وبسایتها به طور خودکار با اندازه صفحهنمایشهای مختلف (موبایل، تبلت، دسکتاپ) سازگار میشوند.
پیشساخته بودن المانها:
بوتاسترپ دارای مجموعهای از المانهای رابط کاربری آماده مانند دکمهها، فرمها، نوارها، مودالها، کارتها، جداول و ... است. این المانها به طور استاندارد با طراحی زیبا و کاربرپسند ارائه میشوند.
پشتیبانی از جاوا اسکریپت:
بوتاسترپ شامل پلاگینهای جاوا اسکریپت مانند اسلایدرها، مودالها، منوهای دراپدان، تبها و سایر عناصر تعاملی است که به کمک کتابخانه jQuery کار میکنند.
سفارشیسازی آسان:
بوتاسترپ به شما اجازه میدهد که طراحیها را با توجه به نیازهای خاص پروژه خود تغییر داده و یا شخصیسازی کنید. میتوانید رنگها، فونتها، فواصل و سایر خصوصیات را با تغییر در فایلهای CSS یا از طریق SASS تنظیم کنید.
سازگاری با مرورگرها:
بوتاسترپ با اکثر مرورگرهای مدرن سازگار است و مشکلات سازگاری مرورگرهای مختلف را تا حد زیادی رفع میکند.
ساختار اصلی بوتاسترپ:
Grid System: بوتاسترپ از یک سیستم 12 ستونه استفاده میکند که به شما این امکان را میدهد تا چیدمانهای پیچیده و منظم برای صفحات وب بسازید. از کلاسهایی مانند col-md-6، col-lg-4 و... برای تعیین عرض ستونها در اندازههای مختلف نمایشگر استفاده میشود.
CSS و کامپوننتها: شامل استایلها و کلاسهای از پیش تعریفشده برای المانهایی مانند دکمهها (btn)، فرمها (form-control)، جداول (table) و...
JavaScript Components: شامل پلاگینهایی برای المانهای تعاملی مانند نوارهای پیشرفت (Progress Bars)، مودالها (Modals)، دراپدانها (Dropdowns) و...
جمعبندی:
بوتاسترپ ابزاری بسیار مفید برای توسعه سریع و کارآمد وبسایتهای واکنشگرا است و به شما این امکان را میدهد تا بدون نیاز به طراحی مجدد، از کامپوننتهای آماده استفاده کنید و پروژههای حرفهای بسازید.
سرفصل های دوره |
نصب بوت استرپ v5.1.3 |
سیستم گرید بوت استرپ |
Utility Classes |
Display-Shadow-Visible |
Text Utility |
Flex-Utility |
Typography |
جدول ها (Tables) |
Badge & Breadcrumb |
دکمه ها Buttons)) |
کارت ها (Cards) |
کامپوننت لیست |
کاروسل (Carousel) |
Dropdowns |
Modals |
Progress & Spinner |
فرم ها (Forms) |
Toast |
Collapse |
Navigation |
Navigation-bar |
پروژه عملی (صفحه لندینگ فروشگاه) |
پیش نیاز های دوره :
- html , css
فهرستـــ ویدیوها
مدت زمان دوره 5:38:00با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.
معرفی قالب پروژه (همراه با نصب فریمورک)
در این قسمت پروژه عملی و قالبی که قرار هست بعد از اتمام دوره ، روی آن کار کنیم را معرفی کردیم . همچنین روش های نصب این فریمورک را به شما عزیزان آموزش دادیم .
سیستم گرید بوت استرپ
در این قسمت به معرفی سیستم گرید بوت استرپ ، که مهمترین ویژگی این فریمورک برای طراحی ریسپانسیو هست ، میپردازیم
Display & Shadow & Visible
در این قسمت به معرفی کلاس های display , shadow , visible میپردازیم
ساختار Flex در سیستم گرید بوت استرپ
در این قسمت ساختار Flex در سیستم گرید بوت استرپ را مورد بررسی قرار دادیم .
پروژه عملی فروشگاه ساعت (طراحی بخش هدر)
از این قسمت به بعد ، روی پروژه عملی که یک پروژه فروشگاهی هست ، کار خواهیم کرد . در این قسمت بخش هدر صفحه وب را پیاده سازی میکنیم .
پیاده سازی بخش Banner (کاروسل)
در این قسمت بخش Banner صفحه وب را به صورت کاروسل پیاده سازی خواهیم کرد .
نظرات کاربران در رابطه با این دوره