10 اشتباه رایج Bootstrap که برنامه نویسان باید بدانند

Bootstrap یک مجموعه ابزار قدرتمند است. این ابزار همراه با الگو های اصلی HTML و CSS که شامل بسیاری از اجزای UI است، مشکلاتی نیز به همراه دارد. بسیاری از مشکلات مهم در مستند های Bootstrap ذکر شده است، اما برخی از اشتباه ها نیز بسیار ظریف هستند یا دلایل مبهمی دارند و در اسناد Bootstrap نیامده است. این مقاله برخی از رایج ترین اشتباهات، مشکلات و تصورات غلط هنگام استفاده از Bootstrap را بیان می کند.

در نگاه اول بوت استرپ بسیار ساده به نظر می رسد و در واقع شروع استفاده از Bootstrap کار سختی نیست. مستندات بسیار خوبی در وب سایت بوت استرپ وجود دارد که دارای بسیاری از نمونه های کد HTML و CSS و جاوا اسکریپت است. از آنجا که Bootstrap بسیار ساده و آسان به نظر می رسد، بسیاری از توسعه دهندگان با عجله وارد این فریم ورک می شوند و بنابراین اشتباه می کنند. برای کار با این ابزار ها باید زبان های برنامه نویسی را بیاموزید یا مهارت های پایه برنامه نویسی را داشته باشید.

اشتباه رایج bootstrap شماره 1: تصورات غلط اساسی در مورد فریم ورک

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

Bootstrap یک فریم ورک جامع است، نه بزرگ است و نه عظیم. بوت استرپ همراه با الگو های اصلی HTML و CSS است که شامل بسیاری از اجزای رایج UI است. این ها شامل تایپوگرافی، جداول، فرم ها، دکمه ها، Glyphicons، Dropdowns، دکمه ها و گروه های ورودی، ناوبری، صفحه بندی، برچسب ها و نشان ها، هشدار ها، نمودار های پیشرفت، modal ها، زبانه ها، آکاردئون ها، Carousels و بسیاری عناصر دیگر است. شما می توانید تعدادی از آن ها را انتخاب کرده و با پیکربندی پیش فرض خود، به سرعت یک UI ایجاد کنید که چندین مرورگر، دستگاه و وضوح را با فرمت خوب مدیریت می کند.

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

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

اشتباه شماره 2: برای استفاده از بوت استرپ نیازی به دانستن CSS نیست

اگر فکر می کنید برای استفاده از Bootstrap نیازی به دانستن CSS ندارید، در اشتباه هستید. هر توسعه دهنده اولیه ای باید CSS و HTML5 را یاد بگیرد. Bootstrap در حال حذف بسیاری از قسمت های پیچیده CSS برای راحتی توسعه دهندگان است (مانند پیشوند های خاص) و یک ظاهر طراحی اولیه پیش فرض ارائه می دهد، اما شما هنوز باید CSS را بفهمید تا اشتباه رایج جلوگیری کنید.

در این فریم ورک نیازی به دانستن نحوه کار media queries ندارید، اما باید نحوه طراحی ریسپانسیو را بدانید. منظور بوت استرپ آموزش CSS به شما نیست، اما در صورت تمایل می تواند به شما کمک کند. بررسی کد منبع در LESS یا SASS یک نقطه شروع عالی است.

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

اشتباه شماره 3: تغییر فایل CSS بوت استرپ

با بیان ساده و صریح: فایل bootstrap.css را تغییر ندهید. اگر در فایل bootstrap.css تغییراتی ایجاد کنید، همه چیز خیلی سریع برای شما پیچیده می شود. وقتی می خواهید فایل های Bootstrap را ارتقا دهید، کل طراحی خراب می شود. شما می توانید رنگ های پیش فرض بوت استرپ را در stylesheet خود بازنویسی کنید، استایل ها، margin ها، پدینگ ها و همه چیز را. اصلاً نیازی به تغییر برگه های bootstrap.css نیست.

اگر LESS یا SASS را نمی شناسید، مشکلی نیست. شما می توانید فایل CSS خود را ایجاد کرده و هر چیزی را که از stylesheet اصلی bootstrap.css می خواهید بازنویسی کنید. همانطور که در اشتباه قبلی اشاره کردیم، دانستن CSS اجباری است. selector های CSS جدید خود را ایجاد کنید، از آن در HTML استفاده کنید و تا زمانی که کلاس های CSS خود را بعد از استایل های Bootstrap فراخوانی کنید، تعاریف شما پیش فرض های Bootstrap را بازنویسی می کند.

اشتباه شماره 4: استفاده از همه چیز هایی که bootstrap ارائه می دهد

همانطور که قبلاً ذکر شد، Bootstrap جامع است. بسیاری از اجزای UI، قالب های طراحی HTML و CSS و افزونه های JavaScript را ارائه می دهد. اما لطفاً از بین آن ها انتخاب کنید. لازم نیست از همه ویژگی های Bootstrap استفاده کنید.

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

اشتباه شماره 5: سوءاستفاده از یک دستور modal

modal های بوت استرپ، گفتگویی انعطاف پذیر با حداقل عملکرد مورد نیاز را ارائه می دهند و دارای پیش فرض های هوشمند هستند. اگرچه استفاده از modal آسان است و سفارشی سازی غنی را ارائه می دهد، اما برای جلوگیری از سوء استفاده های رایج، چند نکته را باید در نظر داشته باشیم.

• نمایش بیش از یک درخواست modal در یک زمان
• Bootstrap modal در پس زمینه ظاهر می شود
• modal در دستگاه های تلفن همراه

اشتباه رایج bootstrap شماره 6: مشکل کامپوننت دکمه ورودی فایل

Bootstrap کامپوننت تعیین شده ای برای دکمه بارگذاری فایل ندارد. یک راه حل ساده و زیبا فقط با استفاده از HTML و CSS می توان با کد نمونه زیر به دست آورد:

<span class="btn btn-default btn-file">
  Browse <input type="file">
</span>

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

اشتباه شماره 7: پیچیدگی بیش از حد با جاوا اسکریپت و نادیده گرفتن ویژگی های "-data"

طراحان یا توسعه دهندگان تازه کار جاوا اسکریپت می توانند به راحتی در توسعه وب غوطه ور شوند و صفحات وب را فقط با استفاده از HTML ،CSS و Bootstrap ایجاد کنند. اگر آن ها در کد نویسی چندان خوب نباشند، می توانند در دام سوء استفاده از جاوا اسکریپت یا بیش از حد پیچیده شدن آن قرار گیرند. ذکر این نکته ضروری است که همه افزونه های Bootstrap می توانند صرفاً از طریق API نشانه گذاری، بدون نوشتن یک خط جاوا اسکریپت استفاده شوند.

به عنوان مثال ما می توانیم یک مودال بوت استرپ را بدون نوشتن هیچ جاوا اسکریپتی فقط با تنظیم "data-toggle = "modal روی عنصر کنترل کننده مانند دکمه یا لنگر فعال کنیم و پارامتر های اضافی را با استفاده از ویژگی های داده ارسال کنیم. در کد زیر، کد HTML را با شناسه #myModal هدف قرار می دهیم. ما مشخص کرده ایم که وقتی کاربر با استفاده از گزینه back-backdrop روی مدال کلیک می کند، حالت آن بسته نمی شود و رویداد کلید escape را غیرفعال کرده ایم که مدالی را با گزینه صفحه کلید بسته می کند. همه در یک خط کد HTML:

<button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

اشتباه شماره 8: نادیده گرفتن ابزار هایی که توسعه بوت استرپ را آسان می کند

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

نتیجه این کار Bootlint است، یک ابزار لینت HTML برای پروژه های Bootstrap. ابزار Bootlint را می توان در مرورگر یا خط فرمان از طریق Node.js استفاده کرد و به طور خودکار صفحات وب Bootstrapped را برای بسیاری از اشتباهات رایج در استفاده از Bootstrap بررسی می کند. افزودن Bootlint به ابزار توسعه وب شما می تواند بسیاری از اشتباهات رایج را که معمولاً توسعه پروژه را کند می کند، حذف کند.

اشتباه شماره 9: مشکلات ناسازگاری مرورگر های قدیمی و IE8

Bootstrap به گونه ای ساخته شده است که در آخرین نسخه های مرورگر های دسکتاپ و تلفن همراه به بهترین نحو کار کند. مرورگر های قدیمی ممکن است اجزا و عناصر را با سبک متفاوتی نمایش دهند، اما همه چیز باید کاملاً کاربردی باشد. پشتیبانی شامل اینترنت اکسپلورر 8 و 9 است، با توجه به این نکته مهم که برخی از ویژگی های CSS3 و عناصر HTML5 به طور کامل توسط این مرورگر ها پشتیبانی نمی شوند.

برای دریافت پشتیبانی کامل از اینترنت اکسپلورر 8 و سایر مرورگر های قدیمی، باید از polyfill برای CSS3 Media Queries Respond.js ،HTML 5 shim که امکان استفاده از عناصر HTML5 را فراهم می کند و برچسب IE مناسب در هدر HTML برای اطمینان حاصل کردن از اینکه IE در حالت سازگاری اجرا نمی شود. هد HTML شما در پایان باید چیزی شبیه به این باشد:

<head>
  ...
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

اشتباه رایج bootstrap شماره 10: نادیده گرفتن بهترین شیوه ها

یکی از سوالات متداول در Stack Overflow این است که چگونه می توان منوی dropdown در Bootstraps را به جای کلیک، در حالت hover باز کرد. در حالی که راه حل این سوال پیچیده نیست و تنها با استفاده از CSS قابل انجام است، این کار توصیه نمی شود. این ویژگی عمداً از چارچوب خارج شده است و این تصمیم طراحی است که توسط تیم توسعه گرفته شده است.

باز هم می توان این کار را انجام داد، اما باید عواقب آن را درک کرد و فهمید که بهترین روش ها وجود دارند، مخصوصاً برای فریم ورک های mobile first. دلیل این مسئله خاص این است که کارکردن عناصر سایت روی حالت hover به کاربرانی که دستگاه های لمسی دارند و باید کلیک کنند، کمکی نمی کند. در چنین دستگاه هایی هیچ گونه hover وجود ندارد، فقط رویداد های لمسی وجود دارد. بنابراین این امر به درستی در دستگاه های لمسی کار نمی کند.

نتیجه گیری اشتباهات بوت استرپ

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

منبع: toptal.com