close
تبلیغات در اینترنت
آموزش بوت استرپ ۴ با یک پروژه عملی: ساخت قالب تک صفحه ای واکنشگرا – قسمت اول
آخرين ارسال هاي تالار گفتمان
کمی طاقت داشته باشید...
عنوان پاسخ بازدید توسط
3 532 khanevadehh
1 599 ali1371
1 453 ali1371
1 589 ali1371
1 518 ali1371
3 1647 ali1371
2 161 ali1371
2 134 ali1371
آموزش بوت استرپ ۴ با یک پروژه عملی: ساخت قالب تک صفحه ای واکنشگرا – قسمت اول
  • بازدید : (65)

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

امروز در وب تستر با آموزش بوت استرپ ۴ در خدمت شما هستیم. در این مطلب به شما آموزش می دیم که چگونه می تونید به سادگی و با استفاده از بوتسترپ ۴ آلفا یک قالب 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
  • تعدادی عکس (شما می توانید تمامی عکس هایی که من در این آموزش استفاده کردم رو دانلود و استفاده کنید)

ساختار پوشه

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 


مطالب مرتبط
بخش نظرات این مطلب
بخش نظرات برای پاسخ به سوالات و یا اظهار نظرات و حمایت های شما در مورد مطلب جاری است.
پس به همین دلیل ازتون ممنون میشیم که سوالات غیرمرتبط با این مطلب را در انجمن های سایت مطرح کنید . در بخش نظرات فقط سوالات مرتبط با مطلب پاسخ داده خواهد شد .
شما نیز نظری برای این مطلب ارسال نمایید:
نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی