میتوانم شکست را بپذیرم اما تلاش نکردن را هرگز!

بوت استرپ

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

بوت‌استرپ مجموعه‌ای برای ساخت ظاهری وب سایت‌ها و برنامه‌های وب است، و یکی از محبوبترین فریم ورکهای css میباشد که از شیوه گرید بندی برای چیدمان صفحات وب استفاده میکند.بوت‌استرپ شامل تمپلت‌های طراحی اچ‌تی‌ام‌ال و سی‌اس‌اس محور برای typography، فرمها، دکمه‌ها، نمودارها، اجزاء راهبری و دیگر اجزاء رابط کاربری و الحاقات اختیاری (JavaScript Extensions) می‌باشد


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

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

تاریخچه کلمه Bootstrap چیست؟
جدای از بحث مربوط به طراحی وب و موارد مربوط به آن، عبارت Bootstrap به تنهایی به معنی “خود راه انداز” بوده و کلمه Bootstraping به معنی راه اندازی یک فرآیند بصورت مستقل و بدون استفاده از منابع خارجی می باشد. این عبارت در علم کامپیوتر کمی کوتاهتر شده و با عنوان Booting بکار میرود، که نشان دهنده فرآیند راه اندازی سیستم و واردسازی اطلاعات اولیه نرم افزار در حافظه کامپیوتر می باشد. معنی کلمه bootstrap
کلمه Boot در زبان انگلیسی به معنی پوتین یا چکمه می باشد، برخی از پوتین ها زبانه کوچکی در انتهای خود دارند که هنگام پوشیدن پوتین برای قرارگرفتن بهتر پا در آن استفاده میشود (چیزی شبیه به پاشنه کش) این زبانه با نام Bootstrap شناخته میشود.

معرفی امکانات Bootstrap
این چارچوب یا Framework با تمامی مرورگرهای استاندارد همخوانی داشته و حتی در نسخه های قدیمی تر مانند اینترنت اکسپلورر 8 نیز ظاهر زیبای خود را حفظ میکند. از نسخه دوم Bootstrap به بعد طراحی واکنشگرا یا رسپانسیو نیز در آن لحاظ شد که موجب نمایش مناسب صفحه در تلفن های هوشمند و تبلت ها میگردد. برای آشنایی بهتر با طراحی واکنشگرا میتوانید به مقاله ای با عنوان طراحی Responsive چیست مراجعه نمایید.
Bootstrap متن باز بوده و در سایت Github برای دانلود رایگان قرارگرفته است. امکان همکاری در این پروژه و شخصی سازی امکانات و ظاهر آن فراهم شده است و تاکنون مستندات مربوط به آن به چندین زبان دنیا ترجمه شده است.
responsive bootstrap با توجه به راست چین بودن نوشتار فارسی و تفاوت چیدمان مطالب با سایت های انگلیسی نیاز به تغییرات اساسی در کدهای CSS و توابع jQuery احساس میشود که با جستجو در اینترنت سایت Bootstrap فارسی را یافتیم. این سایت علاوه بر تغییر کدهای اولیه مستندات و آموزش های مربوط به Bootstrap را نیز به زبان فارسی ارائه داده است که میتواند برای شروع به کار بسیار مناسب باشد.

Bootstrap به زبان ساده!
Bootstrap قصد دارد که خلاء میان طراحی و کدنویسی را از میان برداشته و کدنویسان را ترغیب به استفاده از طراحی های پیش فرض و استاندارد نماید. به همین منظور دستورات CSS و توابع jQuery مورد نیاز را برای شما فراهم کرده است تا شما بتوانید با استفاده از دستورات پیش فرض و رعایت اصول متناسب با طراحی Bootstrap زمان راه اندازی یک پروژه را تا حد زیادی کاهش داده و خروجی آن را متناسب با استانداردهای روز دنیا پیش ببرید.

فهرست سرفصل ها و رئوس مطالب مطرح شده در این مجموعه آموزشی
  • درس 1 : معرفی فریم ورک بوت استرپ Bootstrap
  • درس ۲ : شروع بوت استرپ Bootstrap
  • درس ۳ :‌ آموزش سیستم شبکه بندی در بوت استرپ (Bootstrap Grid System )
  • درس ۴ : بررسی کلاس clearfix , visible در بوت استرپ Bootstrap
  • درس ۵ : بررسی کلاس ها Offset , Push , pull در بوت استرپ Bootstrap
  • درس ۶ : تایپوگرافی در بوت استرپ Bootstrap
  • درس ۷ : آموزش ایجاد جدول در بوت استرپ Bootstrap
  • درس ۸ :‌ ریسپانسیو کردن جدول در Bootstrap
  • درس ۹ : آموزش ایجاد تصاویر ریسپانسیو در بوت استرپ Bootstrap
  • درس ۱۰ : اطلاعیه ها ( alert ) در بوت استرپ Bootstrap
  • درس ۱۱ : آموزش ایجاد دکمه ها در بوت استرپ Bootstrap
  • درس ۱۲ : آموزش استفاده از آیکون فونت در بوت استرپ Bootstrap
  • درس ۱۳ : آموزش نوار پیشرفت در بوت استرپ ( Progress Bar )
  • درس ۱۴ : منوی آکاردئونی در بوت استرپ
  • درس ۱۵ : آموزش ایجاد فرم در بوت استرپ Bootstrap
  • درس ۱۶ : آموزش ایجاد فرم در بوت استرپ ( 2 )
  • درس ۱۷ :‌ ایجاد تولتیپ در Bootstrap
  • درس ۱۸ : آموزش Modal در بوت استرپ Bootstrap
  • درس ۱۹ : آموزش ساخت اسلایدر در بوت استرپ carousel slider ) Bootstrap )
  • درس ۲۰ : طراحی قالب Landing Page ( ساخت منوی ریسپانسیو با بوت استرپ )
  • درس ۲۱ : طراحی قالب Landing Page با بوت استرپ ( اتمام بخش header )
  • درس ۲۲ : طراحی قالب Landing Page با bootstrap ( بخش درباره ما )
  • درس ۲۳ : طراحی قالب Landing Page با بوت استرپ ( بخش خدمات )
  • درس ۲۴ : طراحی قالب landing page با بوت استرپ ( بخش portfolio و تماس با ما )
  • درس ۲۵ : طراحی قالب Landing Page با بوت استرپ ( بخش آخر )
  • درس ۲۶ :‌ طراحی قالب مجله خبری/گردشگری با بوت استرپ ( توضیحات در مورد قالب )
  • درس ۲۷ :‌ طراحی قالب مجله خبری/گردشگری با bootstrap ( توضیحاتی در مورد png و svg )
  • درس ۲۸ :‌ طراحی قالب مجله خبری/گردشگری با بوت استرپ ( طراحی منو )
  • درس ۲۹ :‌ طراحی قالب مجله خبری/گردشگری با بوت استرپ ( طراحی اسلایدر )
  • درس ۳۰ :‌ طراحی قالب مجله خبری/گردشگری با bootstrap ( طراحی بخشِ پست )
  • درس 31 :‌ طراحی تم مجله خبری/گردشگری با بوت استرپ ( بخش ساید بار )
  • درس ۳۲ :‌ طراحی قالب مجله خبری/گردشگری با bootstrap ( طراحی فوتر )
  • درس ۳۳ – افزودن animatescroll به طرح Landing Page
  • درس ۳۴ – سورس فایل های دوره بوت استرپ

برای یادگیری Bootstrap چه چیز را باید از قبل بدانیم !
قبل از اینکه مطالعه ی آموزش Bootstrap (بوت استرپ) را شروع کنید، شما باید دانش پایه ای(حداقلی) از موارد زیر را داشته باشید

  1. سی‌اس‌اس - (CSS)
  2. اچ‌تی‌ام‌ال - (HTML)
  3. جاوااسکریپت - (JavaScript)
  4. جی‌کوئری - (jQuery)

موردی یافت نشد