آموزش Bootstrap : امروز در ivahid با آموزش بوت استرپ ۴ در خدمت شما هستیم. در این مطلب به شما آموزش می دهیم که چگونه می توانید به سادگی و با استفاده از بوتسترپ ۴ آلفا یک قالب HTML واکنشگرا بسازید. در پایان این آموزش, یاد می گیرید که چطور آن را راه اندازی کنید و همچنین چگونه از برخی از ویژگی های جدیدش استفاده کنید. در مطلب امروز با قسمت اول آموزش بوت استرپ ۴ در خدمت شما هستیم.

در مقاله آموزش بوت استرپ ۴ می آموزید:

  • دانلود فایل های بوتسترپ
  • راه اندازی فایل های لازم
  • نشانه گذاری مقدماتی
  • کار با شبکه ها
  • Jumbotron
  • برخی از کلاس های تایپوگرافی
  • card
  • tooltip های پیشرفته تر بوتسترپ ۴
  • کلاس جداول inverse
  • فرم های مقدماتی

آموزش Bootstrap 4 : قسمت اول

قبل از شروع کار, مطمئن شوید که ویرایشگر کد مانند Sublime text یا Notepad++ رو دارید و کمی هم باید در مورد HTML و CSS بدونید.

منابعی که برای به پایان رساندن این آموزش نیاز دارید:

  • css (شما باید یک stylesheet خالی درون پوشه ی css ایجاد کنید)
  • جی کوئری از طریق Google’s Hosted library  ( https://developers.google.com/speed/libraries/?hl=en )
  • Lato, Open Sans و Raleway Google Fonts
  • Font Awesome
  • تعدادی عکس (شما می توانید تمامی عکس هایی که من در این آموزش استفاده کردم رو دانلود و استفاده کنید)

ساختار پوشه

ساختار پوشه بوت استرپ
ساختار پوشه بوت استرپ

برای این آموزش, ساختار پوشه ی ما شامل ۳ فولدر و ۱ فایل HTML است.

  • HTML – به عنوان فایل اصلی برای همه نشانه گذاری ها
  • پوشه ی img – برای تصاویر
  • پوشه ی css – برای style sheet ها ((CSS
  • پوشه ی js – برای جاوا اسکریپت

فایل ها و پوشه های بالا را در فولدر اصلی قالبتان بسازید.

دانلود بوتسترپ ۴

دو نسخه برای دانلود وجود دارد: نسخه compiled بوتسترپ و نسخه source files بوتسترپ.

با این حال, نسخه compiled آن هنگام نوشتن این مطلب در دسترس نیست. شما می توانید نسخه source files آن را از اینجا دانلود کنید.

دانلود Bootstrap
دانلود Bootstrap

راه اندازی فایل های لازم

برای این قسمت از آموزش بوت استرپ ۴, ما به برداشتن فایل هایی که برای ایجاد قالب واکنشگرا نیاز داریم میپردازیم.

یادداشت: به زودی آموزش نصب و راه اندازی بوتسترپ ۴ آلفا از طریق SASS در ivahid قرار داده میشود.

بعد از دانلود بوتسترپ (نسخه Source files) آنرا از حالت فشرده خارج کرده و فولدر dist آنرا باز کنید. سپس فایل bootstrap.min.css را از فولدر CSS و فایل bootstrap.min.js را از فولدر js کپی کنید و به ترتیب در فولدر های css و js پوشه اصلی قالبتان بریزید.

علاوه بر این, باید فایل tether.min.js را دانلود کنیم. این فایل امکان استفاده از tooltip ها را در بوتسترپ ۴ آلفا ممکن می سازد . درصورتی که این فایل را دانلود کردید آنرا در فولدر js پروژه تان بریزید.

در ادامه همراه شما خواهیم بود با قسمت دوم آموزش Bootstrap 4