طراحی وب سایت رسپانسیو - چند خصوصیات جدید در بوت استرپ4

اگر  در طراحی وب سایت رسپانسیو( responsive) فعالیت کرده باشید، با کلمه بوت استرپ(bootstrap) آشنایی دارید. یکی از بهترین فریم ورک های HTML و CSS و javascript برای طراحی وب سایت واکنش گرا ( رسپانسیو) می باشد.بوت استرپ دارای چندین ورژن مختلف است که توسط طراحان وب استفاده می شود.

دراین مقاله ما برروی آخرین ورژن بوت استرپ یعنی بوت استرپ4 تمرکز میکنیم. این ورژن نسبت به قبل تغییراتی داشته است که ما سعی کرده ایم در اینجا مهمترین این تغییرات را بیان نماییم. البته ممکن است که شما آنها را شنیده باشید اما بهتر است که آنها را بدانید و به کار ببرید.

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

چند خصوصیات جدید بوت استرپ 4 در طراحی وب سایت رسپانسیو(responsive)

1. Sass بر Less غالب است

توسعه دهندگان بوت استرپ( bootstrap) تا الان بیشتر از Less برای طراحی وب سایت رسپانسیو( واکنش گرا) استفاده می کردند.اما در بوت استرپ 4، Less توسط Sass جایگزین شده است. این مساله بیشتر محبوب توسعه دهندگان و برنامه نویسان می باشد، چونکه استفاده از آن بسیار آسان است و نسبت به قبلی قدرت بیشتری دارد.

در شکل زیر تفاوت بین Less و Sass در یک کامپایلر به نام Libsass Sass که به زبان C/C++ نوشته شده است نشان داده ایم.همانطور که مشاهده می کنید بوت استرپ در Sass سریعتر کامپایل می گردد.

2. طبقه بندی گرید بسته به اندازه صفحه

در بوت استرپ 3 ما چهار کلاس گرید برای ستون ها در طراحی وب سایت واکنش گرا( رسپانسیو) داشتیم که عبارت بودند از:

•col-xs-XX برای صفحات موبایل

•Col-sm-XX برای صفحات تبلت ها

•Col-md-XX برای صفحات دسکتاپ

•Col-lg-XX برای صفحات بزرگتر

در بوت استرپ 4(bootstrap4)، برای صفحات با اندازه کوچکتر از 480 پیکسل یک کلاس دیگر گرید تعریف شده است. این کلاس برای ابزارهای خیلی کوچک که البته شاید کم باشند، تعریف شده است.

3. تعریف واحد های مرتبط CSS

در بوت استرپ 4 از مرورگر اکسپلورر 8 هیچ گونه پشتیبانی نمی گردد. ورژن های مرورگر اکسپلورر نمی توانند دستورات CSS را اجرا کنند.

در بوت استرپ 4 به جای استفاده از واحد پیکسل، از REM یا EM استفاده می شود.

4. کارت های بوت استرپ

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

5. مدل ریبوت جدید

برای طراحی وب سایت به صورت رسپانسیو در بوت استرپ4، انتخاب کننده های CSS اصلی و استایل های ریست به صورت واحد در آمده اند که از فایل SCSS استفاده کنند. فایل ریست normalize.css قبلی، حالا جایگزین شده است.  با این حرکت مناسب، خصوصیات box-sizing در CSS هر لایه رسپانسیو را بهینه تر می نماید.