بوت استرپ یک ابزار ضروری برای توسعه دهندگان front-end است.
احتمالا دیدگاه شما نسبت به بوت استرپ این است که یک ابزار مفید است، اما این ابزار برای چه مواردی استفاده می شود؟ و واقعا چگونه به توسعه دهندگان وب کمک می کند؟
این ابزار توسعه برنامه وب، توسط کارکنان سابق توییتر Mark Otto و Jacob Thornton (تصویر زیر) ایجاد شده است.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
وب سایت رسمی بوت استرپ، آن را به صورت زیر توصیف می کند:
“محبوب ترین فریم ورک HTML، CSS، و JS برای توسعه اولین پروژه واکنش گرای گوشی موبایل در وب.”
تعریف عمومی:
بوت استرپ یک مجموعه عظیم از بیت های مفید و قابل استفاده در نوشتن کد های HTML، CSS و جاوا اسکریپت است. همچنین یک چارچوب توسعه ی front-end است که توسعه دهندگان و طراحان را قادر می سازد تا به سرعت وبسایت های واکنش گرا ایجاد کنند و آن ها را از نوشتن بسیاری از کد های CSS نجات می دهد و با صرفه جویی در زمان، باعث می شود زمان بیشتری برای طراحی صفحات وب داشته باشید.
آموزش پیشنهادی برای شما : آموزش Bootstrap 4 | جادوی رابط کاربری
این ابزار رایگان نیز هست!
در حال حاضر بوت استرپ در GitHub میزبانی می شود و می توان آن را به راحتی از getbootstrap.com دانلود کرد.
چرا بوت استرپ برای توسعه دهندگان وب بهترین است؟
می توان مزایای بوت استرپ را به ۸ قسمت تقسیم کرد:
- شبکه بندی واکنش گرا
هیچ زمان اضافه ای برای کد کردن شبکه بندی وجود ندارد؛ بوت استرپ با سیستم شبکه بندی از پیش تعریف شده اش، همه کار ها را انجام می دهد!
تنها کافی است که به طور مستقیم به پر کردن فضا ها با محتوا پرداخت.
با استفاده از امکان تعریف سفارشی هر breakpoint برای هر ستون، می توان شبکه های خیلی کوچک، کوچک، متوسط، بزرگ و خیلی بزرگ ایجاد کرد. همچنین می توان روی حالت پیش فرض باقی ماند، زیرا ممکن است همان حالت پیش فرض، نیاز های سایت را برآورده کند.
- تصاویر واکنش گرا
بوت استرپ با کد خاص خود به صورت خودکار اندازه تصاویر را بر اساس اندازه صفحه نمایش تغییر می دهد. فقط کافی است .img-responsive را به تصاویر خود اضافه کنید، و بقیه کار ها را به دستور های از پیش تعریف شده CSSبسپارید.
اجازه دهید بوت استرپ تصاویر را برای شما تغییر دهد!
این ابزار حتی می تواند شکل تصاویر را با اضافه کردن کلاس هایی مانند img-circle و img-rounded تغییر دهد و این کار بدون رفتن و آمد بین کد و نرم افزار طراحی شما میسر می شود.
- اجزاء
بوت استرپ مثل یک پک کامل از اجزاء است که می توان به راحتی، اجزاء مورد نظر را بر روی صفحه وب برد، از جمله:
- Navigation bars
- Dropdowns
- Progress bars
- Thumbnails
…و بسیاری دیگر!
بوت استرپ نه تنها سبکی برای افزودن عناصر جذاب طراحی به صفحه وب است، بلکه می توان مطمئن بود که ظاهر و چیدمان همه عناصر، بدون توجه به اندازه صفحه یا دستگاه مورد استفاده، عالی به نظر می رسند.
همه این قابلیت هایی که به صورت فانکشنال آماده شده اند، درست در دستان شما هستند!
برای اطلاع از لیست کامل ویژگی های افزودنی، مستندات اجزاء component documentation را بررسی کنید.
- جاوا اسکریپت
هنوز فانکشن های کافی وجود ندارد؟ jQuery را امتحان کنید.
بوت استرپ، امکان استفاده از تعداد زیادی پلاگین سفارشی جی کوئری را برای توسعه دهندگان فراهم می کند. جی کوئری به شما امکان زیادی می دهد که به صورت تعاملی، راه حل هایی آسان برای موارد زیر ارائه دهید: پنجره های مدال modal popups، انتقال transitions، چرخش تصویر image carousels و مثلا پلاگینی به نام scrollspy، که وقتی صفحه مرور را اسکرول می کنید به طور خودکار صفحه ناوبری شما را به صورت خودکار آپدیت می کند.
- مستندات Bootstrap’s Documentation
مستندات بوت استرپ یکی از بهترین مستندات است. در وب سایت آن هر قطعه از کد شرح داده شده و جزئیات به صورت صریح توضیح داده شده اند.
توضیحات همچنین شامل نمونه هایی از کد است که برای پیاده سازی بیسیک و ساده سازی پروسه برای کاربران خیلی مبتدی نیز مناسب است. همه آن چه که شما باید انجام دهید این است که یک جزء را انتخاب کنید، کپی کنید و کد را در صفحه خود قرار دهید.
- سفارشی سازی
یکی از مهمترین انتقادات در مورد چارچوب هایی مانند بوت استرپ، اندازه آنهاست؛ که می تواند باعث کاهش سرعت برنامه شما شود. برای مثال، نسخه فعلی فایل CSS بوت استرپ، ۱۱۹ کیلوبایت است که کمی عجیب به نظر می رسد. البته در مقایسه با فایل های تصویری و ویدئویی، به ویژه برای فایل CSS خیلی بزرگ نیست.
با این حال، بوت استرپ به شما اجازه می دهد تا تنها قابلیت هایی را سفارشی کنید که می خواهید در دانلود خود داشته باشید نه بیشتر. به سادگی با رفتن به صفحه سفارشی سازی و دانلود صفحه، می توان با حذف ویژگی هایی که برای برنامه شما نیاز نیست، وزن فایل خود را کاهش داده و در نتیجه زمان بار گذاری را نیز کاهش دهید.
در حقیقت، سفارشی کردن، کلید کار است!
- جامعه بوت استرپ Bootstrap’s Community
همانند بسیاری از پروژه های متن باز، بوت استرپ نیز دارای یک جامعه بزرگ از طراحان و توسعه دهندگان است. بوت استرپ با میزبانی در GitHub، ایجاد و تغییر کد بوت استرپ را برای توسعه دهندگان آسان می کند. همچنین ارتباط افراد را برای همکاری، گفتگو و مشاوره با همکاران آسان می کند.
بوت استرپ هم وبلاگ، هم صفحه فعال توییتر، و هم یک Slack room اختصاصی دارد. اما از این موارد با ارزش تر، Stack Overflow است که در آن توسعه دهندگان، مایل به کمک در مشکلات فنی هستند، و در آن جا، پاسخ تمام سوالات را می توان با استفاده از برچسب بوت استرپ ۴ پیدا کرد.
- الگوهای بیرونی بوت استرپ Bootstrap’s External Templates
همزمان که محبوبیت بوت استرپ رشد می کرد، مردم شروع به ایجاد قالب های مبتنی بر بوت استرپ کردند تا سرعت بیشتری را برای توسعه وب فراهم کنند. وب سایت های بسیاری وجود دارد که به اشتراک گذاری و خرید قالب های سفارشی بر اساس بوت استرپ اختصاص داده شده است.
در اینجا فقط چند نمونه از آن ها آورده شده است:
معایب بوت استرپ
چرا باید از بوت استرپ استفاده نکنید؟
احتمالا اکنون فکر می کنید که بوت استرپ بی نظیر است!
اما به یاد داشته باشید که هر سکه ای دو رو دارد. همانند همه چیز در زندگی، حتی بوت استرپ هم معایب خود را دارد. بیایید یک نگاه سریع به برخی از شکایات های رایجِ شنیده شده درباره بوت استرپ بیاندازیم:
سینتکس بوت استرپ گیج کننده است!
پیش از آشنا شدن با بوت استرپ، برخی از سینتکس های آن می تواند گیج کننده باشد. برای مثال، هنگام استفاده از سیستم شبکه بندی، برای ساخت یک ستون که یک سوم صفحه را می گیرد، شما باید کلاس .col-md-4 را به آن اضافه کنید.
۴؟ این ۴ از کجا آمد ؟!
بدون شک، این چهار ممکن است شما را گمراه کند که ستون، یک چهارم صفحه نمایش را می گیرد، نه یک سوم. در حالی که این سینتکس منطقی است (بوت استرپ از یک سیستم ۱۲ ستونی استفاده می کند و ۴، یک سوم از ۱۲ است)، این موضوع می تواند برای کسانی که با کل فرایند جدید آشنا نیستند، ملموس نباشد.
فایل های بوت استرپ خیلی بزرگ هستند!
همانطور که قبلا ذکر شد، فایل های بوت استرپ می تواند برای کار با عملکردهای ارائه شده توسط چارچوب آن، کمی بزرگ باشد. این موضوع می تواند به افزایش بار گذاری وب سایت، به ویژه در شبکه های کندتر منجر شود.
مبتدیان ممکن است زمان زیادی را برای شناسایی و رفع این مشکل صرف کنند؛ با این حال، همانطور که در بالا ذکر شد، با سفارشی کردن بوت استرپ می توان کد های غیر ضروری مربوط به توابعی که هرگز استفاده نمی کنید را حذف کنید.
فقط بیت هایی را که لازم دارید انتخاب کنید و بقیه را رها کنید. (البته، زمانی که بیشتر در مورد برنامه نویسی بدانید، این کار ساده تر می شود!)
بوت استرپ توسعه دهندگان را از یادگیری واقعی کد دور نگه می دارد!
در استفاده از بوت استرپ متاسفانه این خطر وجود دارد که در یک چرخه ای قرار بگیرید که صرفا کدهای موجود را بدون درک درست آن ها، استفاده کنید. سعی کنید با صرف وقت برای یادگیری، بوت استرپ را نه برای جلوگیری از یادگیری بلکه به عنوان راهی برای تسریع یادگیری به کار ببرید.
نتیجه گیری
همانطور که احتمالا تا اینجا متوجه شده اید، بوت استرپ یک ابزار قدرتمند است که به یک توسعه دهنده اجازه می دهد تا به سرعت و بدون دردسر، کد ها را آماده و اجرا کند. این موضوع، به آسانی باعث می شود که بسیاری از ویژگی های عالی را بدون نیاز به کد کردن آن ها به کار ببرید.
بوت استرپ بسیار محبوب است و برای ساخت برخی از وبسایت های بزرگ استفاده شده است. اگر باور ندارید، وب سایت MongoDB، وب سایت ناسا، و یا حتی FIFA.com را بررسی کنید.
اگر از خواندن این مقاله لذت بردید، پس آن را به اشتراک بگذارید!
