فیلم آموزش بوت استرپ (Bootstrap 4)
در این بخش فیلم آموزش بوت استرپ (Bootstrap 4) را به زبان فارسی آماده کرده ایم که قالب 16 قسمت و 5 ساعت تهیه شده است. در ادامه به معرفی و تاریخچه بوت استرپ پرداخته و فهرست مطالب این فیلم آموزشی طراحی وب سایت به همراه بخش هایی از آن قرار داده شده است.
بوت استرپ (Bootstrap) چیست ؟
بوت استرپ (Bootstrap) مجموعه ای از ابزار های رایگان می باشد که به منظور ایجاد نرم افزار های تحت وب واکنش گرا استفاده می شود. این ابزار ها شامل کد های CSS ، HTML و توابع JavaScript هستند که کار طراحی وب راحت تر می کنند. Bootstrap قبل از این که به طور جهانی برای طراحی وب سایت ها استفاده شود، توسط جاکوب تورنتون و مارک اتو، به منظور ایجاد چارچوبی یکسان و مشخص در ظاهر ابزار های توییتر بوجود آمد. قبل از ظهور Bootstrap ابزار های زیادی با رویکردی مشابه Bootstrap ایجاده شدند که هیچ یک از آن ها مورد استقبال طراحان وب قرار نگرفت. شرکت توییتر در آگوست سال 2011، فریم ورک Bootstrap را به صورت رایگان و متن باز در اختیار توسعه دهندگان وب قرار داد و بعد از یک سال این فریم ورک به محبوب ترین پروژه در سایت Github تبدیل شد.
تاریخچه کلمه بوت استرپ
کلمه Bootstrap در زبان انگلیسی به معنای خود راه انداز است و کلمه Bootstraping نیز به معنی راه اندازی یک فرآیند به طور مستقل و بدون استفاده از منابع خارجی می باشد. اما این کلمه در علم کامپیوتر تبدیل به کلمه Boot شده است و به معنی شروع کار سیستم می باشد. در زبان انگلیسی کلمه Boot به معنی چکمه یا پوتین می باشد و اغلب پوتین ها در انتهای خود زبانه کوچکی دارند که برای پوشیدن راحت تر پوتین از آن استفاده می شود.
Bootstrap به زبان ساده
یکی از بزرگترین مشکلات علاقمندان طراحی وب سایت و کدنویسان قدیمی، ایجاد ظاهری مناسب و کاربر پسند برای سایت بوده است. موضوع ایجاد ساختار و زیربنای مناسب برای یک سایت و همچنین نمایش خروجی کار به صورت صحیح و در یک فضای کاربر پسند یکی از موضوعات پیچیده و پر اهمیت در طراحی سایت است.
هدف فریم ورک Bootstrap چیست ؟
هدف از ارائه فریم ورک Bootstrap از بین بردن خلاء موجود بین طراحی و کد نویسی و همچنین ترغیب طرحان به استفاده از کدهای استاندارد بوده است. از این رو فریم ورک Bootstrap، دستورات CSS و توابع jQuery مورد نیاز را از قبل نوشته و در اختیار طراحان قرار می دهد تا با استفاده از آن ها بتوانند صفحات مورد نظرشان را به راحتی و در کمترین زمان ایجاد کنند. Bootstrap ابزاری است که به طراحان وب کمک می کند تا نحوه نمایش صفحات وب را بهبود ببخشند و مهمتر از همه این ها، استفاده از این فریم ورک باعث افزایش سرعت طراحی و در نتیجه کاهش زمان مورد نیاز برای اتمام یک پروژه می شود.
سرفصل های آموزش بوت استرپ (Bootstrap 4)
جلسه اول
- معرفی بوت استرپ
- ایجاد پروژه جدید
- ایجاد سطر و ستون در سایت
جلسه دوم
- آموزش شبکه بندی
- استفاده از ستون های در دستگاه ها با اندازه های متفاوت
- استفاده های از col-offset
جلسه سوم
- استفاده از کلاسه ای متنی در بوت استرپ 4
جلسه چهارم
- رنگ های پس زمینه پیش فرض بوت استرپ
- رنگ های متن پیش فرض بوت استرپ
جلسه پنجم
- تصاویر در بوت استرپ
- ایجاد تصاویر با حاشیه گرد
- ایجاد تصاویر واکنش گرا (ریسپانسیو)
- ایجاد جداول واکنش گرا (ریسپانسیو)
- استفاده از کلاس های بوت استرپ جهت استایل دهی به جداول
جلسه ششم
- پیام های هشدار در بوت استرپ
- نمایش پیام با jumbotron
- نشانه ها در بوت استرپ
- دکمه ها و گروه دکمه ها
- گروه دکمه های عمودی
- ایجاد toolbar
جلسه هفتم
- استفاده از کلاس های فرم
- استفاده از کلاس های برچسب عناصر فرم
- استفاده کلاس های چک باکس
- چک باکس های درون خطی
- فرم ها در شبکه بندی
جلسه هشتم
- ایجاد لیست های واکنش گرا
- لیست های درون خطی
- گروه لیست ها
- منوی dropdown و dropUp
جلسه نهم
- ایجاد نوار منو در سایت
- استفاده از منوهای چسبنده به بالا یا پایین
- منوی واکنش گرا (ریسپانسیو)
- SCROLLSPY
جلسه دهم
- نوار پیشرفت در بوت استرپ 4
- صفحه بند در بوت استرپ 4
- استفاده از breadCrub
جلسه یازدهم
- استفاده از carousel جهت ساخت اسلایدشو
- ایجاد نمایشگر تعداد اسلایدها
- ایجاد اسلایدها
- استفاده از دکمه های رفت و برگشت
جلسه دوازدهم
- ایجاد مودال در سایت (سرتیتر، بدنه، فوتر)
- Tooltip در بوت استرپ 4
- popover در بوت استرپ 4
جلسه سیزدهم
- کارت ها در بوت استرپ 4 ( سرتیتر، بدنه، فوتر)
- استفاده از تصاویردر کارت ها
- استفاده از تصاویر به عنوان پیش زمینه
- استفاده از مدیا در بوت استرپ 4
جلسه چهاردهم
- کمک کننده های حاشیه و رنگ و… در بوت استرپ 4
جلسه پانزدهم
- کمک کنندهای float در بوت استرپ 4
- Flex در بوت استرپ 4
جلسه شانزدهم
- COLLAPSE
- ایجاد لیست اکاردئون
- فیلترها در بوت استرپ 4
بهترین آموزشی بود که در مورد Boorstrap دیده بودم. ممنون از سایت زیبا و مفیدتون.
دوره آموزش bootstrap 4 که شما قرار دادین واقعا خیلی خوب و روان آموزش داده شده است لطفا در صورت امکان دوره پروژه محور بوت استرپ 4 را هم با همین مدرس تو سایت قرار بدین. سپاس
به زودی آموزش بوت استرپ به صورت پروژه محور رو هم توی سایت قرار خواهیم داد که در اون نحوه طراحی قالب یک سایت رو با فریم ورک bootstrap 4 آموزش خواهیم داد