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


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

تاریخ : 20:41


تعداد بازتاب : 19

سلام

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

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

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

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

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

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

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

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

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

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