وبمستر مارکت مکانی برای یافتن مشتریان جدید

طراحی قالب ریسپانسیو با bootstrap چه معایبی دارد

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

طراحی قالب با بوت استرپ چه مزایایی دارد؟

  1. با استفاده از bootstrap به سرعت می توانید یک قالب واکنشگرا طراحی کنید
  2. بوت استرپ به خوبی ابعاد ابزارهای مختلف را می شناسد و نیازی به تحقیق در این مورد ندارید
  3. bootstrap علاوه بر طراحی قالب Responsive امکانات بسیار زیادی در دستان طراحان وب قرار میدهد

بوت استرپ چه معایبی دارد؟

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

کل فایل CSS قالب 450 خط بود و از این 450 خط 190 خط مربوط به مدیاکوئری ها می شد. به عبارت دیگر با اضافه کردن 190 خط کد، قالب را به یک قالب ریسپانسیو تبدیل کردم. مسئله دیگری که باعث جالب تر شدن نتیجه کار شد این بود که نیازی به اعمال تغییرات گسترده در کد HTML وجود نداشت و فقط چند جابجایی ساده بین عناصر صفحه اعمال شد.

حال اگر می خواستم این کار را با bootstrap انجام دهم، ضعفهایی در قالب ایجاد می شد که در ادامه با آنها آشنا می شویم:

افزودن فایل CSS مربوط به Grid system

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

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

برای اینکه Grid system به درستی کار کند باید در عناصر مختلف صفحه کلاسهای زیادی قرار دهید.

به عنوان مثال باید به ساید بار وب سایت این کلاسها را اضافه کنید:

class="col-xs-12 col-sm-6 col-md-8"

برای سایر عناصر نیز باید به همین صورت عمل کنید اما این کار حجم کد HTML نسبت به محتوای صفحه را افزایش می دهد. حال اگر بخواهید بین ساید بار و ستون کناری فاصله ایجاد کنید باید کد فوق به این صورت تغییر کند:

class="col-xs-12 col-sm-6 col-sm-offset-2 col-md-8 col-md-offset-1"

اما درصورتیکه در فایل CSS از مدیا کوئری ها استفاده کنید به هیچکدام از این کدها نیاز نخواهید داشت.

بوت استرپ برای زبان فارسی طراحی نشده است

یک مشکل دیگری که وجود دارد این است که بوت استرپ اساسا برای زبانهایی که راست چین هستند طراحی نشده است و به همین دلیل باید یک فایل CSS دیگر به سورس HTML اضافه کنید که بوت استرپ را راست چین کند. با افزودن این فایل باز هم تعداد درخواستهای مرورگر از سرور و زمان لود صفحه افزایش مییابد.

تعیین فاصله عناصر در بوت استرپ دشوار است

بوت استرپ قالب را بصورت پیش فرض به 12 ستون تبدیل می کند که عرض ستونها به این صورت می باشد:

Extra small devices Phones (<768px): Auto
Small devices Tablets (≥768px): ~62px
Medium devices Desktops (≥992px): ~81px
Large devices Desktops (≥1200px): ~97px

اگر بخواهید درون یکی از ستونهای سایت، ستون جدیدی ایجاد کنید باز هم مجبور هستید که ستون جدید را به 12 قسمت تقسیم کنید و عناصر داخلی را بر این اساس درجه بندی کنید.

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



Abdollah.kaf
18:52 - 1394/04/22
0
0
سلام

فرمودید بوت استرپ برای فارسی زبانان نبوده و برای استفاده در قالب های فارسی rtl باید یک css جدید به اون اضافه کرد ، نخیر این ظور که شما فکر میکنید نیست ، شما هر قسمت از بوت استرپ رو که میخواد در پروژه تون استفاده کنید مثلا "Alert" ها فقط فایل الرت رو باز میکنید و جای تمام لفت و رایت ها رو تغییر میدید و فایل رو کامپیل میکنید حالا سی اس اس ایجاد شده مخصوص تم های فارسی ست بدون هیچ خط کد اضافه ای!

در مورد تعداد ستون ها هم باید بگم 12 ستون تعداد ستون های دیفالت بوت استرپ هست برای اینکه این ستون ها رو به مقدار دلخواه داشته باشید کافی ست وارد فایل گرید بشید و تعداد ستون هاتون رو تنظیم کنید

و در مورد افزودن کلاس ها ، در نهایت پنج خط کد به html شما اضافه میشه این خیلی مهم ؟ حتی کم هم مهم نیست :دی

مهمترین عیب بوت استرپ یا هر فریمورک css گذاشتن استایل های اضافی و بدون نیاز به پروژه ست که همون هم تا حدی قابل کنترل هست! و عیب دیگه اینکه شما به اجبار باید در یک چهار چوب اماده حرکت کنید که البته تا حدی هم مفید
پاسخ مدیر:
علاوه بر موارد فوق، یکی دیگه از معایب بوت استرپ که توی مقاله از قلم افتاد این هست که وقتی بخواید با فایرباگ روی قالب کار کنید با تعداد زیادی کلاس CSS مواجه می شید و این کلاس ها، کار توسعه قالب رو سخت می کنن

وقتی می شه با یه تغییر ساده توی کد HTML و تغییر فایل CSS قالب رو ریسپانسیو کرد چه نیازی هست که این همه فایل و کلاس و تگ به سورس وب سایت اضافه بشه؟
اسماعیل
17:27 - 1395/08/25
0
0
با سلام
بنده اصلا طراحی با بوت استرپ رو نمی پسندم . همونطور که مدیر محترم فرمود دست ادم برای تغییرات و توسعه بعدی بسته میشه. به نظرم بوت استرپ برای طراحی یک قالب ساده وبلاگی مناسبه.
در صورتی که هنگام طراحی قالب با % پیش بریم در نهایت با چند خط مدیاکوئری ها یک قالب کاملا ریسپانسیو به دست میاریم.

یک قالب با بوت استرپ طراحی کردم و در حال حاضر نمی تونم توسعه بدم کلی دردسر ساز شده. نه می تونم از قالب بگذرم و نه میشه درست و حسابی ریسپانسیو کرد.
متن نظر *