آموزش بوت استرپ 4 (BootStrap 4)

در حال تکمیل سرفصل آموزش Bootstrap 4 …

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

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

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

از آنجا که این ابزار بر اساس زبانهایی همچون CSS، HTML، JS & LESS نوشته می شود، موجب سهولت طراحی سایت شده و نیاز طراح سایت به برخی از پیش نیازها را کاهش داده است. ابزار بوت استرپ توسط سایت NASA و GitHub مورد استفاده قرار می گیرد که دلیل اهمیت و اعتبار آن در طراحی سایت است.

امکانات بوت استرپ

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

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

bootstrap social 1170x630 - آموزش بوت استرپ 4 (BootStrap 4)

آموزش Bootstrap 4

مزایای بوت استرپ

استفاده برای موبایل و تبلت

برای طراحی سایت برای موبایل و تبلت ها، استفاده از بوت استرپ در اولویت قرار می گیرد. به این معنا که زمان طراحی باید به ظاهر آن برای موبایل و تبلت توجه کنیم. در این صورت باید بوت استرپ به دو شکل رویکرد Desktop محور و رویکرد Mobile First انجام شود.

پشتیبانی مرورگرها

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

استفاده آسان از بوت استرپ برای طراحی سایت

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

طراحی ریسپانسیو

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

مشکلات و معایب بوت استرپ

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

فصل اول آموزش Bootstrap 4 بوت استرپ

  • بوت استرپ چیست ؟
  • دانلود و نصب بوت استرپ 4
  • دانلود و نصب ادیتور کدنویسی (IDE) ویژوال استودیو کد VSCODE
  • کارایی اینسپکت (Inspect) در مرورگر چیست ؟
  • افزودن کدهای بوت استرپ در فایل HTML
  • کارایی کانتینر (Container , Container Fluid)
  • گرید بندی بوت استرپ (Bootstrap 4 Grids)
  • تایپوگرافی بوت استرپ (Bootstrap 4 Text/Typography)
  • رنگ نوشته در بوت استرپ (Bootstrap 4 Colors)
  • جدول ها در بوت استرپ (Bootstrap 4 Tables)
  • عکس ها در بوت استرپ (Bootstrap 4 Images)
  • کارایی جامبو ترون (jumbotron , jumbotron fluid)
  • هشدار ها در بوت استرپ (Bootstrap 4 Alerts)
  • دکمه در بوت استرپ (Bootstrap 4 Buttons)
  • دکمه های گروهی (Bootstrap 4 Button Groups)
  • نشانه در بوت استرپ (Bootstrap 4 Badges)
  • میله های میزان پیشرفت (Bootstrap 4 Progress Bars)
  • اسپینر ها (Bootstrap 4 Spinners)
  • صفحه بندی / شماره صفحه (Bootstrap 4 Pagination)
  • لیست گروه ها (Bootstrap 4 List Groups)
  • استفاده از کارت (Bootstrap 4 Cards)
  • رها کردن / کشو (Bootstrap 4 Drop downs)
  • قابلیت سقوط (Bootstrap 4 Collapse)
  • ناو ها در بوت استرپ (Bootstrap 4 Navs)
  • نوار پیمایش / منو (Bootstrap 4 Navigation Bar)
  • فرم ها (Bootstrap 4 Forms)
  • ورودی / اینپوت ها (Bootstrap 4 Form Inputs)
  • گروه ورودی (Bootstrap 4 Inputs Group)
  • فرم های سفارشی (Bootstrap 4 Custom Forms)
  • اسلایدر / چرخ فلک! (Bootstrap 4 Carousel)
  • مودال ها / معین (Bootstrap 4 Modal)
  • راهنمای ابزار / تولتیپ (Bootstrap 4 Tooltip)
  • پوپور /جزئیات ابزار شبیه تولتیپ بدون هاور (Bootstrap 4 Popover)
  • نان تست / هشدار زمان دار (Bootstrap 4 Toast)
  • پیمایش / اسکرول (Bootstrap 4 Scroll spy)
  • گزینه های خدمات / کمکی (Bootstrap 4 Utilities)
  • فلکس / فلکس باکس / انعطاف پذیری (Bootstrap 4 Flex)
  • تراز کردن مدیا (فیلم/عکس) با محتوا (Bootstrap 4 Media Objects)
  • فیلتر ها (Bootstrap 4 Filters)

فصل دوم آموزش Bootstrap 4 گرید ها

  • سیستم شبکه ای (Bootstrap 4 Grid System)
  • شبکه انباشته افقی (Bootstrap 4 Grid Stacked-to-horizontal)
  • شبکه بسیار کوچک (Bootstrap 4 Grid Extra Small)
  • شبکه کوچک (Bootstrap 4 Grid Small)
  • شبکه متوسط (Bootstrap 4 Grid Medium)
  • شبکه بزرگ ( Bootstrap 4 Grid Large)
  • شبکه خیلی بزرگ ( Bootstrap 4 Grid Extra Large )
  • چند مثال برای گرید بندی / شبکه کردن (Bootstrap 4 Grid Examples)

فصل سوم آموزش Bootstrap 4 یک مثال

فصل چهارم آموزش بوت استرپ 4 – کلاس ها

  • منبع کلاس ها (Bootstrap 4 Class Reference)
  • هشدار ها (Bootstrap 4 JS Alert)
  • دکمه ها (Bootstrap 4 JS Button)
  • چرخ فلک / اسلاید (Bootstrap 4 JS Carousel)
  • سقوط (Bootstrap 4 JS Collapse)
  • رها کردن / کشویی (Bootstrap JS Dropdown)
  • مودال (Bootstrap JS Modal)
  • پوپور (Bootstrap JS Popover)
  • اسکرول (Bootstrap JS Scrollspy)
  • تب بندی / نشانه کردن (Bootstrap JS Tab)
  • نان تست / هشدار (Bootstrap JS Toasts)
  • تولتیپ /راهنمای ابزار (Bootstrap JS Tooltip)