آموزش جامع بوت استرپ 4 Bootstrap

بوت استراپ Bootstrap چیست؟

بوت استراپ یک framework متشکل از CSS  و Javascript است . که  به کمک این   framework  در کمترین زمان می توانید وب سایت های واکنشگرا با اولویت نمایش در موبایل طراحی کنید.

Bootstrap مجموعه ای از ابزارهای رایگان برای ایجاد گرافیک صفحات وب و نرم افزارهای تحت وب است که شامل دستورات HTML، CSS و توابع جاوا اسکریپت جهت تولید و نمایش فرم ها، دکمه ها، تب ها، ستون ها و سایر المان های مورد نیاز طراحی وب می باشد

این framework به راحتی با تمام سیستم های مدیریت محتوا مثل جوملا و وردپرس و زبان های Asp.net ,Java, Php هماهنگ شده و می توانید در زمان توسعه صرفه جویی کنید. نسخه جدید Joomla ازآخرین نسخه ی بوت استراپ یعنی Bootstrap 4 استفاده خواهد کرد. استفاده از  Bootstrap 4 کاملا رایگان می باشد.

در ادامه این مطلب با نکاتی درباره کار با Bootstrap 4 آشنا می شوید.

Bootstrap 3 یا Bootstrap 4
برای کسانی که از نسخه سوم بوت استراپ استفاده کرده اند وحالا می خواهند به نسخه چهارم مهاجرت کنند می گویم که نسخه چهارم سریع تر و واکنشگراتر شده و مولفه های بیشتری به آن اضافه شده  است.

واکنشگرا بودن چیست؟

طراحی واکنشگرای صفحات وب یعنی ایجاد وب سایت هایی که به طور خودکار خودشان را برای نمایش بهتر در تمام ابزارها، از کوچکترین تلفن های همراه تا بزرگترین کامپیوترهای دسکتاپ تنظیم کنند.

.

چرا ازBootstrap4 استفاده می کنیم؟ مزایای استفاده  بوت استراپ 4

• سهولت استفاده : هرکسی با ابتدایی ترین دانش درباره ی HTML و CS S می تواند شروع به استفاده از بوت استراپ کند.
• ویژگی های واکنشگرایی :css واکنشگرای بوت استراپ برای موبایل ها ، تبلت ها و کامپیوترهای دسکتاپ تنظیم می شود.
• رویکرد اولویت طراحی در ابزارهای همراه : استایل های بوت استراپ 4 با اولویت نمایش صحیح در دستگاه های موبایل قسمتی از framework اصلی است. این رویکرد در SEO نیزنتایج مثبتی دارد.
• سازگاری بامرورگرها : بوت استراپ 4 باتمام مرورگرهای مدرن ازقبیل Chrome وFirefox ، اینترنت اکسپلورر 10به بالا ، Safari و Opera سازگار است.

Popper   وJquery  ؟

بوت استراپ 4 از Popper.js و Jquery برای مولفه های  Javascript مثل Modal ها و Tooltip ها و Popover ها استفاده می کند. اگر تنها از قسمت  CSS بوت استراپ استفاده می کنید نیازی به آنها نخواهید داشت

چرا معتقدم بوت استرپ بهترین انتخاب برای طراحان سایت است ؟

مزایای بوت استرپ را به 8 دسته تقسیم میکنم :

Responsive Grid

دیگر لازم نیست ساعت ها زمان صرف کد نوشتن برای کدهای Grid کنید ، بوت استرپ بصورت پیش فرض سیستم grid در داخل خود تعبیه کرده است . 
حالا میتوانید مستقیما به سراغ نوشتن محتوی داخل وب سایت بروید ! 

تعریف breakpoint دلخواه برای هر ستون در قالب های extra small , small , medium , large , و extra large . و در صورتی که قالب های پیش فرض مطابق نیازهای شما باشد ، حتی نیاز به تعریف مقادیر هم نخواهید داشت .

تصاویر ریسپانسیو بوت استرپ

بوت استرپ حاوی کدهایی است که بصورت خودکار و بر اساس سایز نمایشگر ، ابعاد تصاویر را تغییر می دهد . فقط کافیست که کلاس .img-responsive را به تصویرتان بدهید ، بقیه کارها بر عهده بوت استرپ خواهد بود .
بوت استرپ ابعاد تصویر را برایتان تغییر خواهد داد .
همچنین ، بوت استرپ می تواند در صورت استفاده از کلاسهای img-circle و img-rounded ، قیافه تصویر را تغییر دهد ، و تمام این ها بدون دخالت شما در کد های CSS نوشته شده انجام می شود .

اجزاء (components) بوت استرپ

در داخل بوت استرپ تعداد زیادی کامپوننت وجود دارد براحتی می توانید از آنها در وب سایتتان استفاده کنید ، از جمله :
نوار ناوبری (Navigation bar)
دراپ داون ها (Dropdowns)

نوار پیشرفت کار (Progress bars)
Thumbnails
و خیلی چیزهای دیگر ...
این کامپوننت ها نه فقط ظاهر زیبایی در وب سایت شما دارند بلکه می توانید مطمئن باشید که همه کاربران با هر وسیله ای که وب سایت شما را مشاهده کنند، آن را یکسان می بینند .

JavaScript بوت استرپ

هنوز کافی نیست ؟ JQuery را امتحان کنید ! 
بوت استرپ به کاربرانش این امکان را می دهد که از تعداد زیادی پلاگین های JQuery استفاده کنند . JQuery به شما این امکان را می دهد که از قابلیت هایی مانند تعامل در صفحات ، ایجاد popup های متنوع ، تصاویر چرخ و فلکی (Image carousels) و پلاگینی بنام “scrollspy” که باعث می شود نوار ناوبری (navigation bar) با اسکرول کردن صفحه بهینه شود ( این یکی رو من خیلی دوست دارم ) و خیلی چیزهای دیگر ، استفاده کنید .

سفارشی سازی (Customizability) بوت استرپ

یکی از اصلی ترین انتقاداتی که به فریم ورک هایی مانند بوت استرپ می شود اینست که بدلیل حجم بالای فایل مربوطه ، سرعت بالا آمدن وب سایت یا برنامه تحت وب برای اولین بار ، کند خواهد بود . اما در آخرین ورژن بوت استرپ ، سایز فایل CSS آن حدود 119 کیلوبایت است که در مقابل اندازه فایل های تصویر و ویدیو بکار رفته در وب سایت ناچیز بنظر می آید .

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

انجمن ها (Community) بوت استرپ

بخاطر داشتن تعداد زیادی پروژه متن باز (Open Source Project) ، تعداد بیشماری طراح و برنامه نویس در جوامع مجازی مربوط به بوت استرپ با هم در ارتباطند . بخاطر حضور در GitHub ، کدنویسان حرفه ای می توانند در بهینه سازی ساختار کدهای بوت استرپ مشارکت کنند . همچنین در این انجمن ها ، همه افراد می توانند مشارکت کرده و تجربیاتشان را در اختیار سایر کاربران قرار دهند . 
بوت استرپ یک حساب فعال در توییتر ، یک وبلاگ و حتی یک حساب مستقل در Slack دارد . این موارد غیر از برنامه نویسانی است که در سایت Stack Overflow به شما در حل مشکلاتتان یاری می رسانند ، فقط کافیست سوالاتتان را در زیر موضوع bootstrap-4 مطرح کنید .

قالب ها (Template) اکسترنال بوت

با افزایش محبوبیت ، کاربران شروع به ساخت قالب هایی بر اساس بوت استرپ کردند تا پروسه ساخت وب سایت را حتی ساده تر کنند . تعداد زیادی وب سایت وجود دارند که قالب های مجانی و غیر مجانی بر اساس بوت استرپ ارائه می کنند . 
در اینجا چند تا از این وب سایت ها را آورده ایم :

Bootstrap در ابتدا توسط مارک اتو و جاکوب تورنتون و در جهت ایجاد یک چارچوب ظاهری مشخص و یکسان در ابزارهای توییتر طراحی و نوشته شد. قبل از شروع این پروژه نمونه های زیادی با همین رویکرد ایجاد شده بود که همگی با سرنوشتی مشابه و عدم استقبال طراحان وب دنیا مواجه شده بودند. به دلیل وجود مشکلات اساسی در نمونه های دیگر، سازنده اصلی توییتر یا همان مارک اتو تصمیم به ساخت یک سیستم داخلی و قدرتمند برای خود با نام Bootstrap گرفت.

1. معرفی و بررسی Bootstrap
2. استفاده از Bootstrap
3. تعریف و استفاده از Containers
4. تعریف و استفاده از Grid System
5. تعریف و استفاده از Typography
6. تعریف و استفاده از Colors
7. تعریف و استفاده از Tables
8. تعریف و استفاده از Images

تعریف و استفاده از انواع Components :

9.            Alerts
10. Badge
11. Breadcrumb
12. Buttons
13. Button group
14. Card
15. Carousel
16. Collapse
17. Dropdowns
18. Forms
19. Input group
20. Jumbotron
21. List group
22. Media object
23. Modal
24. Navs
25. Navbar
26. Pagination
27. Progress
28. Scroll spy
29. Spinners
30. Toasts
31. Tooltips

تعریف و استفاده از انواع Utilities :

32. Borders
33. Close icon
34. Colors
35. Display
36. Embed
37. Flex
38. Float
39. Overflow
40. Position
41. Shadows
42. Sizing
43. Spacing
44. Stretched link
45. Text
46. Vertical align
47. Visibility

43)  طراحی وب سایت با Bootstrap (پروژه نهایی)

تعداد کلی فیلم ها : 59 عدد