بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید آموزش طراحی cms با php و mysql ، مشاهده دوره

کامل ترین جدول تفاوت های بوت استرپ 5 و 4 و 3

مقالات طراحی سایت

بوت استرپ یک سیر تحول بسیار جالبی از نسخه 2 تا نسخه نهایی فعلی یعنی 5 را طی نموده است که در این مقاله از نقطه صفر به بررسی ویژگی‌‎ها و تحولات ایجاد شده در مهاجرت به هریک از نسخه‌های جدید بوت استرپ را بررسی و یک جدول دقیق جهت مقایسه خدمتتان ارائه کرده‌ایم پس همراه ما باشید .

15 4,315 5
کامل ترین جدول تفاوت های بوت استرپ 5 و 4 و 3

اگر به دنبال یک مقاله واقعا کاربردی و مفید و ازهرنظر کامل هستید پس در جای خوبی قرار دارید . یکی دیگر از مقالات فوق العاده سایت سئو نود که با زحمت بسیار زیادی برای شما دوستان آماده شده و مطمئنا خوشحال خواهیم شد تا از نظرات شما را در مورد این مقاله مطلع شویم . از آنجایی که مدتی قبل فریمورک محبوب بوت استرپ از نسخه 5 خود رونمایی کرد ، و علی رغم آن بوت استرپ 4 نیز بسیار خوب جا افتاده بود ، به همین خاطر تصمیم گرفتیم تا یک مقاله اساسی و دقیق برای شما علاقمندان به کار با این فریمورک آماده کنیم تا تمامی تفاوت‌های موجود بین بوت استرپ 5 با بوت استرپ 4 و همچنین بوت استرپ 3 را خدمتتان تشریح کنیم . البته توجه کنید که برای آموزش بوت استرپ 3 و 4 و 5 بصورت کامل جهت طراحی قالب سایت در قسمت فرانت‌اند ، تنها در یک پکیج می‌توانید از دوره معرفی شده در زیر استفاده کنید :

اول از هرچیزی یک نکته را خاطر نشان کنیم . از آنجایی که بوت استرپ یک فریمورک جهت سهولت کار و همچنین رسپانسیو سازی پروژه براساس زبان Css است ، پس از این جهت لازم است تا حتما با زبان Css آشنایی های لازم را در حد قابل قبول داشته باشید تا قادر به استفاده از فریم ورک Css نیز باشیم . البته ممکن است اطلاع داشته باشید که فریمورک‌های css تنها به Bootstrap مختوم نیست و فریمورک‌هایی مثل Uikit و TailwindCss و … نیز بسیار معرف و کاربردی هستند اما طرف حساب ما در این مقاله ، بوت استرپ است . اگر علاقمند به یادگیری یک فریمورک جدید در زمینه طراحی با Css باشید می‌توانید از دوره آموزش TailwindCss که توسط مجموعه ما تهیه و تدوین شده است نیز استفاده کنید .

صحبت را از بوت استرپ 2 شروع کنیم ؟

از آنجایی که قصد داریم این مقاله یک محتوای کامل و حتی دانشی و استخدامی باشد ( برای دوستانی که احتمال دارد در شرکت‌های طراحی سایت استخدام شوند و از انها درمورد تفاوت‌های نسخه‌های مختلف بوت استرپ سئوال شود ) لذا صحبت را از همان ب یسم الله شروع کنیم تا نقطه ابهامی نیز برای شما عزیزان وجود نداشته باشد . می‌توان گفت بوت استرپ نسخه 2 در زمان رونمایی خودش ، کاربرد قابل قبولی داشت اما اگر با دامنه کاربرد بوت استرپ 3 و 4 و 5 مقایسه کنیم خواهیم دید که بوت استرپ 2 استقبال چندان چندانی نداشت و طراحان قالب‌های html علاقه زیادی نداشتند تا از بوت استرپ نسخه 2 آنچنان زیاد در طرح های خود استفاده کنند . بوت استرپ 2 در تاریخ August 19, 2011 ارائه شده است .

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

درحال حاضر تعداد وب سایت‌هایی که هنور با بوت استرپ نسخه 2 طراحی شده و به نسخه‌های بعدی مهاجرت نکرده‌اند بسیار بسیار کم است و شاید اصلا وجود ندارند . البته خاطر نشان کنیم که این فریمورک در زمان ارائه خود باتوجه به نیاز روز و میزان دامنه رشد طراحی سایت ، یک ابزار عظیم به حساب می‌آمد . اما سرعت رشد ابزارها و کدهای زبان Css در یک بازه مشخص ، سرعت گرفت و به همین دلیل بوت استرپ شروع به عیب یابی کرد تا خود را بروز کرده و این دایره رقابت را بنام خود حفظ کند که می‌توان گفت همین موارد نیز دلیل رشد نام بوت استرپ بودند که در زمان درست ، از قافله عقب نماند . پس از مدت کوتاهی ، بوت استرپ نسخه 3 خود را منتشر کرد که در ادامه خواهیم دید در این نسخه چه اتفاقاتی افتاد !

بوت استرپ 3 یک تحول در بوت استرپ

زمانی که بوت استرپ برای اولین بار از نسخه سوم خودش رونمایی کرد در تاریخ August 19, 2013 بود یعنی دقیقا دو سال از ارائه اولین نسخه اساسی بوت استرپ نگذشته بود که نسخه سوم با قدرت بیشتری ارائه شد . پس از ارائه این نسخه از بوت استرپ ، می‌توان گفت کاربران و طراحان در تعداد قابل توجهی ، به استفاده از بوت استرپ نسخه 3 روی آوردند . بوت استرپ 3 حقیقتا نسخه متحول شده‌ای بود . در بوت استرپ 3 ، برای قسمت تقسیم بندی ستون ها وبخش Layout ، خبری از واحدهای پیکسل نبود و اندازه باکس‌ها و ستون‌های بوت استرپ از Px به درصد ( % ) تغییر کرده بود و همه طراحان بخوبی اطلاع داشتند که استفاده از واحد % تا چه اندازه برای ایجاد انعطاف در طراحی بهتر است .

اولین تغییراساسی که در بوت استرپ 3 به چشم خورد ، همین تغییر اندازه‌های بخش Layout به % بود . بوت استرپ 3 از لحاظ دیزاین و طراحی نیز واقعا پیشرفت خوبی داشت و هنوز هم با اینکه بوت استرپ 5 در بازار مشغول به کار است اما بسیاری از سایت‌ها با بوت استرپ نسخه 3 روی کار هستند و کوچکترین مشکلی نیز در نمایش و چیدمان ندارند .

تغییر در ظاهر و همچنین اضافه شدن المان‌های جدیدتر ، اسلایدرهایی بهتر با چند افکت جدید ، ظهور فونت آیکون هایی با نام Glyphicon که البته در زمان خود که کتابخانه‌های آیکون به این اندازه وجود نداشت جذاب بودند ، نسخه جی کوئری بهبود یافته و سرعت و دسترسی بهتر نسبت به نسخه 2 ، همگی از دلایلی بودند که بوت استرپ توانست در زمان ظهور نسخه 3 معروف شده و محبوبیت بالایی را حاصل کند .

بوت استرپ 3 چندین سال به شدت قدرت نمایی کرد و تا مدت‌ها عضو جدایی ناپذیر دست طراحان بود . اما بعد از چندسال با ارائه تکنولوژی‌های جدید در بخش طراحی ، جای خالی برخی موارد در بوت استرپ 3 احساس شد که نیاز بود تا به این سیستم اضافه شوند و مخاطبان نیز بسیار مشتاق بودند تا از فریمورک محبوب خودشان با امکانات جدید استفاده کنند . اما بوت استرپ با انتشار آخرین نسخه بوت استرپ 3 مهر اتمامی بر هسته بوت استرپ 3 زده و مابقی تغییرات را برای ارائه در نسخه 4 نگهداری کرد . پس اکنون باید سراغ نسخه 4 از این ابزار محبوب برویم .

بوت استرپ نسخه 4 ، من کاهش دهنده شگرف استایل‌ها هستم !

بوت استرپ 3 و کار کردن با آن بسیار لذت بخش بود و تا August 10, 2017 این فریمورک با نغییرات جزئی به کار خود ادامه داد . به عبارتی 4 سال تمام یعنی دوبرابر بیشتر از نسخه 2 ، نسخه 3 ارائه خدمات کرد . اما زمانی که بوت استرپ 4 ظهور کرد شاهد تغییراتی فوق العاده شدیم که می‌توان اینگونه گفت که بوت استرپ در نسخه 4 ، سنگ بنایی را ارائه کرد که تمامی رقیبان نیز کم کم به فکر افتادند تا به این روش ، برای طراح ، کار را ساده کنند و به سبب این سیستم ، در طراحی انعطاف بیشتری داشته باشند .

شگرف‌ترین تغییر در بوت استرپ 4 تغییر کردن ستون ها از ساختار Float به ساختار Flex بود که می‌توان گفت بیش از 90% محدودیت‌هایی در ستون بندی و همچنین چینش را از میان برداشت . زمانی که از تکنولوژی Flex استفاده کنیم ، محدودیت ستون بندی‌هایی که در برخی اندازه‌ها داریم از میان برداشته شدند . برای مثال توسط سیستم گرید بوت استرپ 3 ، قادر نبودیم تا 5 ستون در کنار هم داشته باشیم و ستون‌های هر ردیف یا باید 6 تا بودند ، یا 4 تا یا 3 عدد و در حالت کمتر نیز 1 و 2 ستون .

<div class="d-inline-block w-50 rounded h-50 bg-dark"></div>

زمانی که از Flex استفاده کنیم ، توسط ساختاری که این تکنولوژی در اختیار ما قرار خواهد داد ، می‌توانیم تعداد ستون‌های دلخواه را در بوت استرپ داشته باشیم . همچینن به دلیل استفاده نکردن از حالت Float برای هر کدام از ستون‌ها ، ساختار بندی در وب سایت‌های راست به چپ و مخصوصا فارسی بسیار راحت‌تر بود . تکنولوژی Flex با توجه به ویژگی Direction در تگ html ، چیدمان و جهت صفحه را درنظر گرفته و جهت المان‌های صفحه را بصورت راست به چپ و یا چپ به راست تنظیم می‌کند . اما با این وجود باز هم در بوت استرپ نسخه 4 ، یک کتابخانه راست چین المانی بود که به آن احساس نیاز می‌شد .

رنگ هایی که در بوت استرپ 4 تغییر کردند واقعا جلوه خیلی زیبایی به وب سایت‌ها دادند . بوت استرپ 4 با توسعه نسخه Css خود بر روی زبان Sass این امکان را به طراحان داد تا پا را از حد فراتر گذاشته و دسترسی بهتری به پالت‌های رنگ داشته وسرعت کدنویسی را بهینه کنند . هسته بوت استرپ 4 نسبت به نسخه 3 تماما بازنویسی شده و سرعت آن نیز کاملا بهبود یافته بود . تغییر واحدهای اندازه گیری از Px به rem نیز واقعا شگفت انگیز بود .

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

رنگ های فلت به همراه رنگ ها Dark و Light که به هسته بوت استرپ 4 اضافه شدند نیز جذاب بودند . یکی از اتفاقات دیگر که در نسخه 4 رخ داد ، بهبود سیستم Layout در موبایل بود . نسخه موبایل که در بوت استرپ 3 از عرض 0 تا 767 پیکسل بود در بوت استرپ 4 به 576 پیکسل تغییر یافت که حقیقتا نیز کار درستی بود به این دلیل که عرض 767 برای موبایل حتی در حالت افقی نیز عرض زیادی بود . به همین دلیل بوت استرپ یک ستون بندی دیگر نیز به سیستم Layout خود اضافه کرد که با نام Xl یا همان Extra Large شناخته می‌شود . در واقع 4 عرضی که در بوت استرپ نسخه 3 وجود داشت به 5 عرض در بوت استرپ نسخه 4 تغییر یافت و استایل دهی و ستون بندی در موبایل و تبلت بسیار بهبود یافته و المان‌ها با اندازه و ابعاد منظم‌تری نمایش داده شدند .

فرم‌هایی که با ظاهر بهتر ارائه شدند ، اضافه شدن کلاس های مختلف به row ها و همچنین امکان تغییر در Breakpoint های مختلف از جمله تغییرات خوب در بوت استرپ 4 بود . زمانی که در بوت استرپ 3 حالتی برای یک Div مشخص می‌شد ، از نظر ویژگی padding و margin در تمامی عرض‌ها به همان حالت نمایش داده می‌شد اما به کمک کلاس‌های ( mb  ,  mt  ,   pb  ,  pt …. ) که برای عرض‌های مختلف به شکل ( mb-md  ,  mb-sm ) و … تعریف شده بودند ، توانستیم یک حالت خاص را فقط برای عرض‌های خاصی تعریف کنیم . برای مثال یک Div فقط در حالت موبایل دارای پدینگ از بالا باشد و از عرض‌های موبایل به بالا این پدینگ از بالا حذف شود که از صدقه سر دستورات media در Css بود .

در نسخه بوت استرپ 3 مجبور به نوشتن میزان زیادی کدهای Media بودیم تا بتوانیم این حالت را کنترل کنیم اما با سیستمی که در بوت استرپ 4 برای انواع Breakpoint  ها براساس آیتم‌های min-width و max-width به شکلی هوشمندانه ارائه شد ، قادر شدیم تا با نوشتن اسم صرفا چندین کلاس ، ویژگی‌های مختلف را در حالت‌های متفاوت کنترل کنیم .

همچنین بوت استرپ نسخه 4 ، برای اساسی‌ترین کدهای Css نیز کلاس‌هایی با اسامی مناسب و قابل فهم تعریف کرد . برای مثال کدهایی بصورت w-100 , d-block , d-inline-block , position-relative و .. از جمله کدهایی بودند که در اکثریت المان‌های داخل کد برای استایل دهی به کار می‌رفتند و با استفاده از این کلاس‌ها در کدنویسی بصورت دقیق ، می‌توان ادعا کرد که بیش از 60% کدهای تکراری از فایل style.css ما حذف می‌شدند .

همچنین اضافه شدن کلاس هایی مثل Border , rounded و … که از جمله استایل‌های پرکاربرد در فایل style.css بودند و روند طراحی با استفاده از این کلاس‌ها بسیار راحت شد . تمامی تغییراتی که در بوت استرپ 4 نسبت به نسخه 3 آن وجود دارد را می‌توانید در جدول پایین مشاهده کنید چرا که تغییرات بوت استرپ 4 در نسخه پایانی آن نسبت به بوت استرپ 3 کمی متعدد بود و می‌توان اینگونه گفت که با ظهور بوت استرپ 4 ، بوت استرپ 3 نیز برای طراحی‌های جدید کلا کنار رفت چرا که سیستم Flex و همچنین Grid بندی مناسب درکنار کلاس‌های کمکی بسیار زیاد ، ما را ملزم و مشتاق به مهاجرت از نسخه 3 به نسخه 4 نمود .

اما بوت استرپ نسخه 5

در حال حاضر بوت استرپ 5 ، نسخه آخر بوت استرپ است ( در تاریخ بروزرسانی این مقاله ) و مجموعه ما به شکل کامل در داخل دوره آموزش بوت استرپ ، موارد مربوط به بوت استرپ نسخه 5 را نیز ارائه کرده است . بوت استرپ 5 همانگونه که انتظار میرفت با تغییرات و تحولات بسیار و همچنین امکاناتی اضافه‌تر ارائه شد . دقیقا در تاریخ May 5, 2021 اولین نسخه از بوت استرپ 5 رسما در داخل سایت رونمایی شد و بازهم ما را شگفت زده کرد .

از جمله مهم ترین تغییرات که در بوت استرپ 5 شاهد آن بودیم 3 تغییر اساسی بود که حقیقتا یک هسته بهینه و کارآمد را برای تمامی طراحی‌ها ارائه کرد :

  • مورد اول حذف شدن جی کوئری ( یعنی برای استفاده از کتابخانه js که داخل خود بوت استرپ برای فعال کردن اسلایدر و منو و آکاردئون و … ارائه شده است ، نیازی به لود شدن کتابخانه jQuery نداریم
  • مورد دوم اضافه شدن بوت استرپ RTL بود که کاری بسیار هوشمندانه در بوت استرپ 5 محسوب می‌شود
  • مورد سوم اضافه شدن بوت استرپ آیکون ها با جلوه و ظاهری فوق العاده با بیش از 1300 آیکون و همچنین کیفیت بالاتر ( این آیکون ها همانطور که بالاتر گفته شد در نسخه 3 وجود داشتند اما در نسخه 4 حذف شدند ولی در نسخه 5 با حالتی بسیار حرفه‌ای برگشتند )

این 3 تغییر از جمله ویژگی‌های اولیه بودند که در مهاجرت به بوت استرپ 5 به شدت نقشی تاثیرگذار داشتند . اما می‌توان گفت بوت استرپ 5 با هسته‌ای بهتر و ظاهری بسیار شیک ظهور کرد . بوت استرپ 5 در قدم اول اینگونه که به نظر رسید دو هدف اصلی داشت . هدف اول بهبود ظاهر کلی پروژه‌ها و هدف دوم حذف وابستگی‌های مختلف و ارائه یک هسته سبک بود . اما نکته‌ای که قابل توجه است این بود که تغییرات در نسخه بوت استرپ 5 نسبت به 4 ، به اندازه‌ای نبودند که در مهاجرت از بوت استرپ 3  به 4 داشتیم . می‌توان گفت بوت استرپ 4 یک نسخه شگفت انگیز در تحولات بوت استرپ بود که نسخه 5 نیز هسته خود را بر همین بستر توسعه داد و ویژگی های جدید را به خود اضافه کرد . به نوعی نسخه 5 ، قدرتمند شده نسخه 4 است اما در قالب یک ورژن جدید و بنام !

اضافه شدن نسخه راست به چپ ، یکی از مزیت‌های فوق العاده بود که تا نسخه 4 از بوت استرپ با این ویژگی مشکل داشتیم و ظهور نسخه RTL داخل خود بوت استرپ 5 به شکل رسمی و استاندارد ، یک مزیت فوق العاده برای ما ایرانیان بود که سایت‌های راست به چپ داریم .

همچنین بالاتر اشاره کردیم که یکی از بخش‌های جالب و بازگشتی در بوت استرپ 5 ، قسمت Bootstrap Icons بود که این فریمورک در نسخه 4 فونت آیکون ها را کاملا حذف کرده بود و به ناچار به سراغ کتابخانه‌هایی مثل FontAwesome می‌رفتیم ، اما در نسخه 5 مجدد با قدرتی بیشتر فونت آیکون‌ها را در قالب بوت استرپ آیکون معرفی کرد که بیش از 1300 آیکون با ظاهری فوق العاده را به ما ارائه نمود .

البته ، می‌توان بدون وابستگی به بوت استرپ در سایر پروژه‌ها نیز از این فونت آیکون‌ها بصورت مجزا استفاده کرد و توانایی رقابت با فونت آیکون‌هایی همچون فونت آسم و … را دارد . مطمئن هستیم که بوت استرپ این نسخه از فونت آیکون‌ها را در نسخه‌های بعدی بسیار ارتقا خواهد داد چراکه محتمل است بدون هدف در نسخه 5 این کتابخانه را ارائه نکرده است .

یکی دیگر از تغییرات بوت استرپ در نسخه 5 اضافه شدن یک عرض دیگر به سیستم Grid بود که کلاس XXl یا همان Extra Extra Large بود و برای عرض‌های بزرگتر از Xl که در نسخه 4 ارائه شده بود تعریف شد . پس به این ترتیب شاهد هستیم که بوت استرپ در هر دو نسخه 4 و 5 ، روی سیستم Grid خود کار کرده است و در هر دو نسخه تغییراتی در سیستم ستون بندی خود برای عرض های مختلف ارائه نموده تا جای‌گیری هر عنصر در صفحه به درستی انجام شود .

در کل در مورد تفاوت های بوت استرپ 5 ، بوت استرپ 4 و بوت استرپ 3 ، جدول زیر می‌تواند کامل‌ترین جدول برای شما باشد تا بخوبی این تفاوت‌ها را درک کنید . امیدواریم این مقاله و جدول تهیه شده برای شما مفید واقع شود .

بوت استرپ 3 بوت استرپ 4 بوت استرپ 5
Body
واحد ها پیکسل هستند واحد ها به rem تغییر پیدا کردند . هر rem معادل 16 px می باشد . همانند نسخه 4
یکسری فونت های پیشفرض تعیین شده اند فونت از سیستم کاربر خوانده می شود همانند نسخه 4
فونت پیشفرض 14 px است فونت پیشفرض 16 px است همانند نسخه 4
کلاس فونت سایز نداریم کلاس فونت سایز نداریم کلاس های fs-* , fw-* , fst-* , lh , display اضافه شدند
text truncate نداریم text truncate نداریم text truncate اضافه شد
Glyphicon داشتیم Glyphicon ها حذف شدند Bootstrap Icon ها اضافه شدند
کتابخانه jQuery نیاز داشتیم کتابخانه jQuery نیاز داشتیم نیازمنده به jQuery نیستیم
کتابخانه RTL نداریم کتابخانه RTL نداریم بوت استرپ RTL اضافه شده است
واحد های فاصله نداریم واحدی های mb-* , mr-* , ml-* , mt-* , pb-* , pr-* , pl-* , pt-* اضافه شدند واحد های left , right با توحه به جهت وب سایت به start , end تغییر کردند
کلاس های عرض و طولی نداریم کلاس های w-100 , w-50 , mw-100 , mh-100 , h-100 , h-50 و… اضافه شدند همانند نسخه 4
کلاس های نمایشی نداریم کلاس های d-block , d-inline , d-inline-block , d-none و… اضافه شدند همانند نسخه 4
pull-right , pull-left float-right , float-left float-start , float-end
Grid
float ها دست و پای ما را بسته بود به کمک تکنولوژی Flex قادر به هر کاری هستیم همانند نسخه 4
کلاس row داریم کلاس row-cols و row-cols-breakpoint… و align-items داریم همانند نسخه 4
کلاس container داریم کلاس container-breakpoint داریم همانند نسخه 4
ستون بندی ها 4 تا هستند ستون بندی ها به 5 افزایش یافته اند ستون بندی ها به 6 افزایش یافته اند
xs-sm-md-lg col-sm-md-lg-xl col-sm-md-lg-xl-xxl
مشخصه های عرض موبایل تا 768 هستند مشخصه های عرض موبایل تا 576 هستند همانند نسخه 4
col-md-offset-* offset-md-* همانند نسخه 4
Tables
جدول مشکی نداریم table-dark | thead-light | thead-dark thead-light | thead-dark => table-dark
table-condenced table-sm table-sm
table-borderless نداریم table-borderless اضافه شده همانند نسخه 4
کلاس table-responsive به div داده می شد table-responsive به همراه breakpoint همانند نسخه 4
Forms
form-horizontal حذف شده همانند نسخه 4
input-lg | input-sm form-control-lg | form-control-sm form-control ها بسیار جذاب تر شدند
haswarning ندارد همانند نسخه 4
Floating Label ندارد Floating Label ندارد Floating Label دارد
input از نوع Range و colorpicker نداریم input از نوع Range داریم input از نوع Range و colorpicker داریم
استایل input ها و .. معمولی هستند استایل Radio و Check بهتر شدند استایل Radio و Check بهتر شدند و حالت Switch اضافه شده است
Buttons
کلاس های دکمه کلاس های btn-light و btn-dark و btn-secondary اضافه شدند همانند نسخه 4
btn-outline ندارد کلاس های btn-outline اضافه شدند . btn-outline-success همانند نسخه 4
کلاس btn xs-sm-lg btn-xs حذف شده است همانند نسخه 4
Images
img-responsive img-fluid همانند نسخه 4
کلاس وسط نداریم d-block و m-x-auto همانند نسخه 4
DropDowns
دراپ داون ها در داخل ul li هستند دراپ داون ها در داخل div li هستند همانند نسخه 4
کلاس divider در تگ li هستند کلاس divider در تگ div قرار دارد همانند نسخه 4
btn-group-justified ساپورت نمیشه همانند نسخه 4
Navbars
کلاس های navbar-default و navbar-reverse کلاس های navbar-light و navbar-dark همانند نسخه 4
navbar-fixed-top | navbar-fixed-bottom fixed-top | fixed-bottom fixed-top | fixed-bottom | sticky-top
Pagination
کلاس pagination به ul داده میشه به li کلاس page-item و به تگ a کلاس page-link داده میشه همانند نسخه 4
previous و next داشتیم نداریم همانند نسخه 4
list group ها با استایل معمولی list-group-flush اضافه شده است همانند نسخه 4
Panels
panel , panel-body , panel-header , panel-footer card , card-body , card-header , card-footer همانند نسخه 4
Slider
item carousel-item همانند نسخه 4
اسلایدر معمولی داریم اسلایدر حالت Fade و لمسی اضافه شده است همان ساختار 4 بعلاوع اسلایدر dark
Other
Modal ها معمولی هستند Modal های وسط چین و اسکرول دار آمدند Modal های فول اسکرین هم اضافه شدند
کلاس های border نداشتیم border و border-color اضافه شدند border-1 تا border-5 اضافه شدند
بک گراند gradient نداریم بک گراند gradient نداریم bg-gradient اضافه شد
breadcrumb ها معمولی هستند همانند نسخه 3 breadcrumb ها استایل بهتری دارند و می توان divider را تغییر داد
آکاردئون ها معمولی هستند آکاردئون ها بهتر شدند آکاردئون با کلاس flush اضافه شدند
دکمه های Close مشکی هستند دکمه های Close مشکی هستند btn-close-white اضافه شده است
tooltip معمولی tooltip با خاصیت نوشتن html tooltip برای svg
Spinner نداشتیم Spinner ها اضافه شدند همانند نسخه 4
Toast نداشتیم Toast ها اضافه شدند همانند نسخه 4
امید قدیمی

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

نقشه راه فرانت

اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید

شاید این مطالب نیز برای شما جالب باشد

استفاده از سلکتور visited برای استایل نویسی بهتر لینک‌ها در طراحی پروژه های وب ! درست ترین حالت برای تغییر استایل لینک ها در حالت visited .

0 60

طراحی دکمه چت داخل واتساپ برای انواع وب سایت ها و همچنین قالب های وردپرسی با کمترین کد بدون نیاز به نصب افزونه 1

0 86
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است

دیدگاه های شما
idill ۰۴ / ۱۴۰۱

خیلی خوب و درست توضیح داده شده فقط میشه از بخش offcanvas واسه ساخت منو موبایل کمک گرفت چون خیلی شبیه اما نمیدونم چجوری فقط دکمش بزارم که توی موبایل بیاد با display مشکل پیش نمیاد ؟

امید قدیمی ۰۴ / ۱۴۰۱

سلام ممنون از نظر لطف شما ، بله میشه استفاده کرد ، به کمک Display ها میشه بله ، فقط در حالت دسکتاپ روی none تنظیم کنید

mahdinew ۰۱ / ۱۴۰۱

درود جناب مهندس با قابلیت هایی که برای بوت استرپ 5 گفته شد با فایل RTL بوت استرپ، مشکل برای ما که سایت فارسی می خوایم طراحی کنم خیلی بهتر و بهینه شده فقط یک سوال اینکه اگه بخوایم سایت دو زبانه داشته باشیم نیاز به هر دو فایل RTL و LTR هست و برای سوئیچ بین اونا باید چکار کرد؟ آیا با تغییر direction مشکل حله یا نیاز به هر دو فایل بوت استرپ هست؟ سپاس فراوان🧡

امید قدیمی ۰۱ / ۱۴۰۱

سلام و عرض ادب ، به این دلیل که بوت استرپ در نسخه 5 بر روی dir و المان های start و end کار کرده ، مشخصات وب سایت شما توسط dir صفحه تنظیم خواهد شد و میتوان گفت تا بیش از 90% وب سایت وجه خود را منظم خواهد کرد . اما جهت کسب اطمینان و اعمال تمامی دیزاین ها در dir های مختلف میتوان متناسب با هر dir ، فایل مربوطه را لود کرد ، جهت سوئیچ بین استایل ها باید dir صفحه بررسی شود که در سیستم هایی مثل وردپرس یسیار راحت است و در سایر سیستم ها میتوان از جاوا اسکریپت برای بررسی ویژگی dir تگ html استفاده کرد و با توجه به آن فایل استایل را در هدر لود کرد .

jam ۱۲ / ۱۴۰۰

سلام در بوت استرپ شماره 5 اگر بخواییم سایت فارسی بشه باید بعد هم بوت استرپ را بزاریم داخل پوشه css و هم بوت استرپ که برای فارسی گذاشته شده ؟ هردو کنار هم یعنی باید باشند که فارسی بشه ؟؟

امید قدیمی ۱۲ / ۱۴۰۰

سلام منظور شما ار فارسی شدن راست به چپ شدن وب سایت هست ؟ اگر منظور شما این موضوع هست ، نیازی به قرار دادن دو فایل استایل نیست شما کافیه فقط فایل bootstrap rtl را داخل پروژه خودتان قرار داده و آدرس دهی کنید .

فیروزخان ۱۲ / ۱۴۰۰

خدا قوت عالی و بی نقص و حقیقتا همانند نظر همه دوستان کامل هست زحمتی که کشیدین برای جمع آوری و بررسی این موارد قابل تقدیر هست برای یادگیری بوت استرپ لازمه که حتما از بوت استرپ 3 شروع کنیم و بریم به 5 ؟ چون میخوام از سایت خوب شما خرید کنم استاد

امید قدیمی ۱۲ / ۱۴۰۰

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

محسن ایزدی ۰۶ / ۱۴۰۰
5

سلام واقعا کامل بود ضمنا من در دوره آموزشی همین سایت هم شرکت کردم و دوماه قبل خریدمش خدا خیرشون بده واقعا یکی از کار درست های آموزشی هستن از همینجا تشکراتم را اعلام میکنم

محمد مهدی سید علوی ۰۶ / ۱۴۰۰
5

جدولش کامله کامله هرکس خواست استفاده کنه من کامل بررسی کردم دقیقه دقیق درآوردن دستشون درد نکنه

joi ۰۶ / ۱۴۰۰

داداش عالی و کامل فوق العاده خودم اینهمه رو درمیاوردم پیر میشدم

امید قدیمی ۰۶ / ۱۴۰۰

ممنون ار لطف شما

samane surgi ۰۳ / ۱۴۰۰

خداروشکر دوره بی نظیر با پشتیبانی بسیار عالی جناب مهندس قدیمی رو بخوبی طی کردم ، إن شاءالله پشت سر هم با آموزش های کامل و کاربردی ایشون به مهارت هام اضافه میکنم. دیگه چی بهتر از این ؟....

مدیر سئو نود ۰۳ / ۱۴۰۰

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

فاطمه سادات ۱۲ / ۱۳۹۹

در یک کلام فوق العاده بود و خیلی کامل

آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود