بخش Vip سئو مایند

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

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

ویژگی های جذاب در بوت استرپ 5

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

در این مقاله تغییرات کلی فریمورک بوت استرپ از نسخه 2 تا نسخه 5 آن را دقیقا مورد بررسی قرار داده و ویژگی های بوت استرپ 5 را نیز معرفی خواهیم کرد

8
ویژگی های جذاب در بوت استرپ 5

در این مقاله به بررسی بوت استرپ 5 و ویژگی های جدید و جذابی که به آن اضافه شدند خواهیم پرداخت . از آنجایی که بوت استرپ یکی از فریمورک های بسیار محبوب در زمینه ریسپانسیو سازی قالب وب سایت می باشد ، لذا دانستن برخی ویژگی ها در مورد آن خالی از لطف نیست .

بوت استرپ در نسخه 2 ، که بسیار قدیمی بوده و اکنون به کل منسوخ شده است ، با به کارگیری خاصیت Media در زبان طراحی Css ، حالت های واکنشگرایی را تا حد زیادی در آن زمان برای سایت ها تامین نمود . در آن هنگام که هدف اصلی فقط نمایش تقریبا درست المان ها در دستگاه هایی مثل موبایل و تبلت بود ، بوت استرپ کاری بسیار بزرگ کرده بود . اما کم کم که وب سایت ها رشد کردند و نیاز بیشتری احساس شد ، بوت استرپ نیز کم کم نیاز به رشد را احساس کرد .

بوت استرپ نسخه 2 و 3

بوت استرپ نسخه 2 ، با اینکه از دستورات Media استفاده کرده بود اما یک مشکل بزرگ داشت و آن هم استفاده از واحد های ثایت پیکسل برای اندازه بود که این مورد باعث عدم تغییر اندازه ها در برخی عرض ها شده بود . به همین خاطر بوت استرپ یک جهش از نسخه 2 به نسخه 3 نمود . همانطور که ممکن است بدانید نسخه هر نرم افزار یا کتابخانه ، دارای 3 شماره به شکل 0.0.0 می باشد . اگر یک نرم افزار برای مثال در اولین نسخه بصورت 1.0.0 ارائه شود و در نسخه بعدی بصورت 1.0.4 ارائه شود و رقم سوم آن دچار تغییر شود ، این تغییر به معنی رفعا باگ در برنامه یا کتابخانه است . اگر رقم دوم تغییر کند یعنی برای مثال نسخه جدید بصورت 1.3.0 عرضه شود ، یعنی تغییرات جزئی در برنامه صورت گرفته است . اما اگر اولین رقم تغییر کند یعنی نسخه جدید بصورت 2.0.0 عرضه شود ، یعنی تغیرات اساسی و کلی در برنامه یا کتابخانه صورت گرفته است .

دوره کامل بوت استرپ 5

بوت استرپ زمانی که از نسخه 2 به نسخه 3 مهاجرت نمود ، مشخص بود که تغییر بسیار بزرگی اجرا شده است . در نسخه سوم تکنولوژی قرارگیری المان ها بر روی همان Float بود اما واحد های اندازه گیری از پیکسل به درصد ( % ) تغییر کردند و به این ترتیب یک مشکل بزرگ از میان برداشته شد و المان ها طبق درصد های قرار داده شده ، در تمامی عرض های تعیین شده بخوبی نمایش داده می شدند . بوت استرپ نسخه 3 تا سال های زیادی برای طراحان وب کاربردی بود چرا که در زمان خود یک تحول محسوب می شد و نسبت به نسخه دوم المان های کاربردی بسیار زیادی نیز داشت .

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

بوت استرپ 4 ، شروع انعطاف در طراحی

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

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

با توجه به اینکه Flex در نسخه 4 قرار گرفته بود یک طراحی بسیار منعطف تر با سرعت بیشتر را تامین می نمود . در این بین علاوه بر Flex ، بوت استرپ کلاس های Media را نیز بسیار توسعه داد ، به نوعی که طراح می توانست به کمک دستورات مدیا ، المان هایی همچون Padding و Margin را کنترل کند . ترکیب این ویژگی ها درکنار هم یک انعطاف و سرعت بسیار خارق العاده را در اختیار طراح قرار میداد . اضاف شدن کلاس ها رنگ بیشتر و تنظیم رنگ های بهتر نیز باعث شد تا ظاهر کار نسبت به نسخه 3 بسیار شکیل تر باشد .

علاوه بر این ویژگی ها ، بوت استرپ بر روی تنظیم اندازه های نمایشگر نیز بسیار کار کرده بود . در نسخه 3 تنها 4 عرض برای نمایشگر های مختلف در نظر گرفته شده بود . یعنی حالت موبایل ،  تبلت ، نمایشگر های خانگی و نمایشگر های بزرگ . یک مشکل بسیار بزرگ در بوت استرپ نسخه 3 زیاد بودن عرض مربوط به موبایل ها بود . به این شکل که از عرض 0 تا 768 پیکسل برای عرض های موبایل محسوب میشد و طراحان محبور بودند از عرض 768 پیکسل به سمت پایین را برای موبایل مد نظر داشته باشند .

در نسخه 4 ، هم حالت های عمودی و هم حالت های افقی موبایل ها مد نظر گرفته شد و عرض 768 پیکسل به عرض 576 کاهش یافت و این یعنی تضمین نمایش اصولی در تمامی دستگاه های موبایل در حالت های عمودی یا افقی . به همین ترتیب عرض های مربوط به تبلت نیز بهبود یافت و همچنین نمایشگر های بسیار بزرگ . این تنظیم عرض ها باعث شد تا قالب هایی که طراحی می شوند با حالت های نمایشی بسیار مناسبی دیزاین شوند . گرافیک کار نیر بسیار بهتر شده بود . دکمه ها ، اسلایدر ها ، منوها و … همگی با ظاهری بهتر عرضه شدند . مواردی همچون Toast ، Spinner و پس زمینه های gradient از جمله سایر ویژگی هایی بودند که در نسخه 4 بیشتر به چشم آمدند .

علاوه بر این بوت استرپ بسیاری از دستورات پرکاربرد همچون Padding , Margin , Display , Width , Height و تمامی دستورات اساسی را به شکل کلاس های قابل کنترل تبدیل کرد تا حداقل کدنویسی در داخل فایل Style.Css انجام شود . همین موراد باعث شدند تا سبک کد نویسی در نسخه 4 تغییر یافته و سرعت به شدت بالایی به پروژه ها تزریق شود . تغییر واحد ها از پیکسل به واحد Rem نیز از جمله تغییرات مسبب انعطاف بود . این موارد مهم ترین و اساسی ترین ویژگی هایی بودند که در نسخه 4 ارائه شدند و نسب به تغییرات بوت استرپ در نسخه 2 به نسخه 3 ، بسیار بیشتر مورد توجه قرار گرفتند . اما اکنون زمان رسیدن به نسخه 5 است .

مهاجرت به بوت استرپ 5 ، تیر خلاص برای همه طراحان

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

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

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

در نسخه سوم بوت استرپ ، آیکون هایی با نام گلیف آیکون ها وجود داشتند که اکنون طراحی بسیار جذابی ندارند و تعداد آنها نیز بسیار کم است . در نسخه 4 این آیکون ها به کل حذف شدند اما در نسخه 5 ، این آیکون ها با طراحی بسیار زیباتر و تعداد به مراتب بیشتر با نام بوت استرپ آیکون بازگشتند . این آیکون ها طراحان را از جهت استفاده از کتابخانه هایی همچون FontAwesome و .. بی نیاز می کرد .

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

اما در نسخه بوت استرپ 5 ، هیچ نیازی به همکاری کتابخانه jQuery نیست و می توانیم تنها با قرار دادن بوت استرپ جی کوئری ، المان های مورد نیاز را فعال کنیم . این سه مورد ، از اصلی ترین ویژگی هایی هستند که در نسخه 5 بوت استرپ بیشتر جذاب بودند .

اما مطمئنا تغییرات جذاب صرفا همین موارد نبود . در نسخه 5 نیز تکنولوژی نمایش بر اساس Flex و همچنین Css Grid استوار شده بود که بازهم انعطاف را برای هر دو قسمت افزایش میداد . بهبود عرض های نمایشی بازهم در بوت استرپ 5 بخوبی نمایان شدند و انعطاف در عرض های بزرگتر باز بهتر شد .

المان هایی که بصورت کلاس بندی جهت انعطاف در نسخه 4 قرار داده شده بودند در نسخه 5 نیز به مراتب بهتر شدند و همان سرعت بالای کدنویسی در نسخه 5 بازهم بیشتر شد .

علاوه بر همه این موارد ، در هر نسخه بوت استرپ ، گرافیک و ظاهر کار نیز بهتر می شد و در نسخه 5 ، المان های گرافیکی همچون اسلایدر ها ، آکاردئون ها ، منو ها و … با ظاهر بهتری نمایش داده شدند .

ترکیب رنگ ها به کمک پیش پردازنده Sass نیز یکی دیگر از ویژگی های بسیار جذاب در بوت استرپ 5 بود . طیف رنگ هایی که در نسخه 4 اضافه شده و تنظیم شدند در نسخه 5 نیز به همان منوال حفظ شده و به کمک پیش پردازنده Sass ، تعریف این رنگ ها در طیف های مختلف بیسیار راحت تر بودند .

بوت استرپ از نسخه 3 ، توجه بسیار زیادی به دو قسمت جداول و فرم ها داشت . هم بخش جدول ها و هم بخش فرم ها در بوت استرپ 4 ( که به نوعی تحول ظاهری و گرافیکی نیز نام دارد ) بسیار شکیل تر از نسخه 3 شدند . در نسخه 5 تقریبا همین ساختار با کمی تغییر در ظاهر بخش هایی مثل چک باکس و رادیو باتن ها و همچنین اضافه شدن قسمت Floating Label تکمیل شد .

قسمت های دیگری نیز همچون Modal های فول اسکرین و اسلایدر dark نیز تغییرات این نسخه نسبت به نسخه 4 بود .

شروع یادگیری بوت استرپ 5

اگر قصد داریم تا یادگیری بوت استرپ را شروع کنیم مطنئنا باید بروز کار کنیم و از آموزش های روز استفاده کنیم . مطمئنا یادگیری بوت استرپ نسخه 2 در حال حاضر غیر ممکن است چرا که کلا داکیومنت آن در سایت خود بوت استرپ برداشته شده و عملا به درد نخواهد خورد . اما در مورد نسخه 3 میتوان گفت اگر شما زمان کافی برای یادگیری داشتید و قصد دارید تا یک متخصص در زمینه طراحی باشد می توانید از نسخه 3 بوت استرپ یادگیری را آغاز نمائید . اما یادگیری بوت استرپ 3 چه کمکی به یادگیری نسخه های بعدی خواهد کرد ؟؟؟

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

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

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

ادمین

انتقال دانش زمانی ارزشمند است که در حوزه ارائه شده به شکل کامل و بی نقص باشد . در دوره های آموزشی و مقالاتی که برای شما عزیزان به اشتراک میگذارم ، تمامی تلاش خود را میکنم تا همه نیاز های شما را پوشش دهم .

آموزش های فرانت

اولین بخش از طراحی یک وب سایت را قسمت فرانت آن تشکیل می دهد . بنابراین برای حرکت در مسیری درست باید ابتدا در این بخش مهارت های لازم را بدست آورد .

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

با رعایت 4 فاکتور اصلی در یادگیری مهارت های طراحی سایت ، می توانید در کوتاه ترین زمان ، توانایی رسیدن به بازارکار و درآمد را داشته باشید . در این مقاله این 4 مورد را معرفی و بررسی خواهیم کرد .

4

آیا Html یک زبان برنامه نویسی است ؟ و چگونه میتوان به کمک Html برنامه نویسی کرد و یک وب سایت داشت ؟ بررسی ویژگی زبان های برنامه نویسی ، طراحی و نشانه گذاری

2
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است
دیدگاه های شما
امین آبادی ۱۲ / ۱۴۰۰

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

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

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

سهیلا مددی ۱۲ / ۱۴۰۰

خسته نباشید برای طراحی قالب در زمینه فروش فالور میشه با بوت استرپ کار کرد ؟

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

با سلام بله بسیار عالیه

javid ۱۰ / ۱۴۰۰

سلام بدون بوت استرپ راست چین توی ورژن 4 پس باید چیکار کرد ؟

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

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

saye ۱۰ / ۱۴۰۰

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

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

سلام ، یادگیری جی کوئری برای طراحی ، ارتباطی به بوت استرپ ندارد