آموزش جامع بوت استرپ 4 Bootstrap
مدرس : محمد امین نجفی
زمان آموزش: 8 ساعت
حجم: 2.5گیگ
وضعیت: تکمیل شده

هزارتومان
85
قیمت:

خرید و دانلود مشاهده سبد خرید
آموزش جامع بوت استرپ 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 :

  1.            Alerts
  2. Badge
  3. Breadcrumb
  4. Buttons
  5. Button group
  6. Card
  7. Carousel
  8. Collapse
  9. Dropdowns
  10. Forms
  11. Input group
  12. Jumbotron
  13. List group
  14. Media object
  15. Modal
  16. Navs
  17. Navbar
  18. Pagination
  19. Progress
  20. Scroll spy
  21. Spinners
  22. Toasts
  23. Tooltips

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

  1. Borders
  2. Close icon
  3. Colors
  4. Display
  5. Embed
  6. Flex
  7. Float
  8. Overflow
  9. Position
  10. Shadows
  11. Sizing
  12. Spacing
  13. Stretched link
  14. Text
  15. Vertical align
  16. Visibility

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

 

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