مهاجرت از بوت استرپ ۳ به ۴


نویسنده : حسین شفیعیان

تاریخ : 20:41


تعداد بازتاب : 37

سلام

خب من طی یه دوره بوت استرپ ۳ رو آموزش دادم و دوستان هم خیلی علاقه نشون دادند و تقریبا دوره خوبی بود، ولی همینطور که اطلاع دارید بوت استرپ ۴ منتشر شد (بالاخره !) و خیلی بهتر و بهینه تر شده و خودم به شخصه ورژن ۴ رو خیلی دوست دارم.

البته بوت استرپ ۳ هنوز ساپورت میشه و شما میتونید مستنداتش رو مطالعه کنید (من مستندات آفلاین ورژن ۳ رو در اینجا هم قرار دادم)

یکی از دوستان به اسم امیر مهدی تو یه کامنت نوشته :

بَه بَه کِههه. بوت‌استرپ ۴ اومد نصف کدهاش تغییر کرده. در کل ساختار بوت‌استرپ یه چیز دیگه شده. نصف چیز‌هایی که از دوره‌ی بوت‌استرپ ۳ خوندیم همه رفت به باد. چه جالب! 🙂

در جواب امیر مهدی جان باید بگم نگران نباش 🙂 من تو این پست بوت استرپ ۴ رو برات توضیح میدم 🙂

ورژن جدید از پایه بازنویسی شده ولی تغییرات به نسبت ورژن ۳ به ۴ کلی بوده و کسی که دوره آموزشی بوت استرپ رو دیده باشه با مشاهده ویدیو این پست میتونه از بوت استرپ ۴ استفاده کنه و در کل همون بوت استرپ خودمونه

ویدیوی این جلسه رو از باکس زیر میتونید دانلود کنید :

دانلود فیلم آموزشی
لینک دانلود42 مگابایت24 دقیقه

 

در جدول زیر من تغییرات رو براتون لیست کردم :

 

کامپوننت بوت استرپ ۳ بوت استرپ ۴
تغییرات عمومی
سورس فایل های css LESS SCSS
بخش اصلی css px rem
سایز فونت پیشفرض 14px 16px
فونت های پیشفرض Helvetica Neue, Helvetica, Arial, sans-serif استفاده از فونت سیستم کاربر
Grids
ستون بندی ها استفاده از ۴ واحد xs, sm, md, lg استفاده از ۵ واحد xs, sm, md, lg, xl
افست ستون ها از col-*-offset-* استفاده میشد مثل col-md-offset-4 از offset-*-* استفاده میشه مثل offset-md-4
جدول
جدول تبره ندارد با کلاس table-dark ایجاد میشه
استایل سرتیتر جدول ندارد با کلاس های thead-light و thead-dark پیاده میشه
جدول فشرده table-condensed table-sm
رسپانسیو استفاده از کلاس table-responsive در تگ div والد استفاده از کلاس table-responsive در تگ table
فرم ها
حالت افقی از کلاس form-horizontal استفاده میشه ساپورت نمیشه
Checkboxes و Radio Buttons از کلاس های radio و radio-inline و checkbox یا checkbox-inline استفاده میشه کلاس های form-check و form-check-label و form-check-input و form-check-inline استفاده میشه
سایز آبجکت های فرم با input-lg و input-sm انجام میشه از کلاس های form-control-lg و form-control-sm استفاده میشه
رنگ بندی آبجکت ها از has-warning استفاده میشه ساپورت نمیشه
فرم سفارشی ندارد دارد
دکمه / button
استایل شامل کلاس های btn-default و btn-info میشه شامل کلاس های btn-secondary و btn-light و btn-dark میشه
دکمه های outline ندارد از کلاس های btn-outline-* برای ساخت استفاده میشه
سایز دکمه از کلاس های btn-xs و btn-sm و btn-lg استفاده میشه شامل کلاس های btn-lg و btn-sm میشه
عکس ها
رسپانسیو از کلاس img-responsive استفاده میشه از کلاس img-fluid استفاده میشه
جهت تصاویر از کلاس های pull-right و pull-left و center-block استفاده میشه از کلاس های m-x-auto و center-block استفاده میشه
منوی کشویی / DropDown
ساختار در تگ های ul و li پیاده میشه در تگ های ul و div پیاده میشه
سرتیتر از کلاس dropdown-header در تگ li استفاده میشه از کلاس dropdown-header در تگ های h1 , h2 و … قابل استفاده است
خط تفکیک کننده / divider از کلاس divider در تگ li استفاده میشه از کلاس divider در تگ div استفاده میشه
غیر فعال کردن آیتم از کلاس disabled در تگ li استفاده میشه از کلاس disabled در تگ a استفاده میشه
دکمه های گروهی / Button Groups
Justified با کلاس btn-group-justified پیاده میشه ساپورت نمیشه
Extra Small با کلاس btn-group-xs پیاده میشه ساپورت نمیشه
منو / Navbars
رنگ بندی از کلاس های navbar-default برای منو روشن و navbar-inverse برای منو تیره استفاده میشه از کلاس های navbar-light و navbar-dark استفاده میشه
جهت منو از کلاس های navbar-right و navbar-left استفاده میشه از کلاس mr-auto استفاده میشه
فرم در منو از کلاس navbar-form استفاده میشه کلاس navbar-form وجود ندارد
منو ثابت از کلاس های navbar-fixed-top و navbar-fixed-bottom استفاده میشه از کلاس های fixed-top و fixed-bottom استفاده میشه
صفحه بندی / Pagination
ساختار با افزودن pagination به تگ ul ایجاد میشه باید کلاس page-item به تگ li و page-link به تگ a اضافه بشه
دکمه بعدی / قبلی با استفاده از کلاس های previous و next پیاده میشه ساپورت نمیشه
گلیف آیکون / Glyphicons
Glyphicons دارد ندارد
لیست گروهی / List Groups
ساختار از کلاس list-group-item در تگ a استفاده میشه از کلاس list-group-item-action در تگ a استفاده میشه
Collapse
ساختار از کلاس in استفاده میشه از کلاس show استفاده میشه
Cards
ساختار پشتیبانی نمیشه / نداره به جای panels, wells و thumbnails در ورژن ۴ استفاده میشود
اسلاید / Carousels
ساختار از کلاس item استفاده میشه از کلاس carousel-item استفاده میشه

دیدگاه شما در مورد این پست :



دیدگاه های کاربران

  • رضا گفت:

    خیلی عالی. ممنونم ازتون
    فقط آقای شفیعیان ، اون راستچین هایی که برای بوت استرپ 4 گفتید ، برای beta2 یا beta 3 این ورژن از بوت استرپ هستن . آیا مشکلی ایجاد میکنه؟

    • حسین شفیعیان گفت:

      خاهش
      من خودم از اون سورس ها استفاده نمیکنم ، معمولا تو هر پروژه خودم راستچینش میکنم . سخت نیست با rtl کردن direction و right کردن text-align تگ body شروع میشه

  • نیما پارسایی گفت:

    سلام چه عجب بالاخره ما شما رو پیدا کردیم…. اموزش های وردپرس رو هم ادامه بده من خیلی جاها آموزش وردپرس دیدم برای دانلود گذاشته بودن ولی چون با آموزش های شما حال میکنم منتظر موندم….
    #مخلص

    • حسین شفیعیان گفت:

      سلام نیما جان
      لطف داری عزیز ، باش حتما 🙂

      • نیما پارسایی گفت:

        چیشد آقا حسین؟ 40 دقیقه بیشتر وقت نمیگیره ها 🙁 اذیت نکن آموزش های وردپرس رو ادامه بده

        • حسین شفیعیان گفت:

          بیشتر از ۴۰ دقیقه وقت برای یه ویدیوی آموزشی صرف میشه نیما جان 🙂
          باشه چشم ، قسمت بعدی رو همین امشب ضبط میکنم

  • محمد گفت:

    مرسی حسین جان من طرفدارتم
    مرسی
    عالی بود

  • رضا گفت:

    * دوستان پیشنهاد میکنم به بوت استرپ 4 نیاید !
    خیلی از گزینه هاش حذف شده و مشکلات زیادی به بار آورده برای مثال تو مرورگر فایرفاکس ، منو کار نمیکنه.
    و اینکه مثلا دیگه گزینه هایی مثل hidden-md hidden-sm و… رو نداریم. کار کردن با این ورژن هم خیلی سخت هستش.
    همون 3.3.7 خودمون که آقای شفیعیان هم آموزش دادن ، خوبه.

  • آزاده کرمی گفت:

    با سلام
    وقت به خیر
    من با نرم افزار نت بینز برنامه نویسی انجام میدم، وقتی فایل css بوت استرپ 4 رو به پروژه اضافه میکنم تو پارسینگ کامپایل مشکل وجود داره و خطایی با عنوان error parsing file به وجود میاد و به هیچ وجه glyphicon ، carousel و.. لود نمیشه.
    لطفا در صورت امکان منو راهنمایی کنید
    با تشکر

    • حسین شفیعیان گفت:

      سلام
      من تجربه استفاده از نت بینز رو نداشتم ، ولی بوت استرپ ۴ اصلا گلیف آیکون نداره !

      • آزاده کرمی گفت:

        عذر میخوام برای اینکه بوت استرپ 3 بتونه گلیف آیکنای جدید (مثل گلیف آیکن اسلاید) رو بشناسه باید چه کار کرد؟
        ممنونم

  • mehdi گفت:

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

  • علی گلکار گفت:

    عشقی به مولا 😁😉

  • فرشاد گفت:

    استاد فوق العاده هستی،مراقب خودت باش یه وقت چشم نخوری

  • Briska گفت:

    سلام آقای شفیعیان خیلی ممنون از آموزش های خوبتون
    فقط یه سوال
    چرا فایل Bootstrap 4 صدا نداره؟؟؟

    • حسین شفیعیان گفت:

      سلام
      صدا داره ، از کدک ها برای پلی کردن ویدیو استفاده کنید

  • طاهر گفت:

    والا من که هر کاری کردم نتونستم یه فونت جدید اضافه کنم

  • زهره گفت:

    خسته نباشید خیلی عالیه
    آی لاو یوووو

    • حسین شفیعیان گفت:

      خاهش
      من متعلق به همتونم 🙂

      • زهره گفت:

        شما عزیزید
        مخصوصا وقتی میگید من حسین شفیعیان هستم مدیر سایت آقای برررنامه نویس دات نت

  • behzad گفت:

    اقا ناموسن دمت گرم . من از 0 شروع کردم به طراحی قالب. با دیدن ویدیو های اموزشی شما الان به عنوان web developer توی 2تا شرکت مشغول شدم . فول تایم درحال کارم . خدا خیرت بده . ایشالا یه زن خوب گیرت بیاد. ; – )))

    • حسین شفیعیان گفت:

      بهزاد عزیز
      خیلی خوشحالم که برات مفید بوده ، هر جا هستی موفق باشی

  • حسین تربتی گفت:

    سلام آقای شفیعیان
    چرا اکثر برنامه نویس ها از لینوکس و مکینتاژ استفاده می کنند؟!

    • حسین شفیعیان گفت:

      سلام
      چون از ویندوز خوششون نمیاد 🙂
      اگه اوضاع مالیشون خوب باشه مک دارن ، اگر نه لینوکس

  • مجیب الرحمن گفت:

    سلام به اقا حسین گل
    فقط میخوام شدیدا تشکر کنم
    من معمولا نظر نمیدم تو سایت ها مگر اینکه واقعا از کسی متشکر باشم و یا اینکه به اصطلاح از کسی شاکی باشم خخخخ
    بازم ممنون اقا حسین گل…

  • داوود گفت:

    سلام
    مرسی جناب شفیعیان
    سیستم Git و Github چیه؟!

    • حسین شفیعیان گفت:

      گیت یه برنامه برای مدیریت پروژه هست
      گیت هاب یه سایت هست که گیت رو به صورت یک سرویس به کاربرانش میده

  • فرهاد گفت:

    سلام
    مثل همیشه عاااااااااااااااااااااااااااالی

  • احمد گفت:

    سلام جناب شفیعیان
    چرا برای طراحی قالب از فریم ورک استفاده میکنند؟!
    مگه برای طراحی قالب از فتوشاپ استفاده نمیکنند و بعد PSD رو به HTML , CSS تبدیل کنند.

  • لوتوس گفت:

    سلام خسته نباشيد ممنون از مطالب آموزندتون،ميخواستم بپرسم امكانش هست سايتي كه با bootstrap 3نوشته شده رو به 4تغيير بديم؟سايت روي هاست هست ممكنه بهم بريزه؟