آموزش بوت استرپ ۴ با یک پروژه عملی: ساخت قالب تک صفحه ای واکنشگرا – قسمت اول

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

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

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

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

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

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

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

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

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

• css
• css (شما باید یک stylesheet خالی درون پوشه ی css ایجاد کنید)
• js
• جی کوئری از طریق Google’s Hosted library
• js
• Lato, Open Sans و Raleway Google Fonts
• Font Awesome
• تعدادی عکس (شما می توانید تمامی عکس هایی که من در این آموزش استفاده کردم رو دانلود و استفاده کنید)

ساختار پوشه

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

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

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

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

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

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

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

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

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

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

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

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