Bootstrap چیست و چه کاربردی دارد؟ – سئومکانیک

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

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

در آگوست 2011، توییتر را بوت استرپ کنید آن را به عنوان یک چارچوب طراحی وب سایت منبع باز و رایگان کرد و در فوریه 2012 به محبوب ترین پروژه در Github تبدیل شد.

تاریخچه کلمه بوت استرپ چیست؟

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

کلمه Boot در زبان انگلیسی به معنای چکمه یا چکمه است، برخی از چکمه ها دارای یک زبانه کوچک در انتهای آن هستند که هنگام پوشیدن بوت برای بهتر تناسب پا به کار می رود (چیزی شبیه کشیدن پاشنه) این زبانه به Bootstrap معروف است.

معرفی ویژگی های بوت استرپ

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

Bootstrap منبع باز است و برای دانلود رایگان در Github در دسترس است. امکان همکاری در این پروژه و شخصی سازی عملکرد و ظاهر آن وجود دارد و تاکنون اسناد مربوط به آن به چندین زبان دنیا ترجمه شده است.

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

بوت استرپ به زبان ساده!

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

هدف بوت استرپ حذف شکاف بین طراحی و کدنویسی و تشویق کدنویسان به استفاده از طرح های پیش فرض و استاندارد است. به همین منظور دستورات CSS و توابع جی کوئری مورد نیاز را در اختیار شما قرار داده است تا بتوانید با استفاده از دستورات پیش فرض و رعایت اصول طراحی بوت استرپ زمان اجرای پروژه را به شدت کاهش دهید و خروجی آن را تا استانداردهای جهانی پیش ببرید.

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

بوت استرپ در ارائه فیدها و بهبود نمایش صفحات وب کمک زیادی به شما می کند. مهمتر از آن، سرعت بالای کار آن زمان مورد نیاز برای شروع و پایان یک پروژه را حتی تا 80٪ کاهش می دهد.

مشکل بوت استرپ چیست؟

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

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

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

تکامل Bootstrap 4 در استعمار صفحه

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

استفاده از Flexbox در Bootstrap 4 به شما این امکان را می دهد که عناصر و ستون هایی را طراحی کنید که ابعاد آنها بر اساس محتوای دیگر صفحه تعیین می شود. به عنوان مثال اگر در یک بخش 3 ستون وجود داشته باشد، عرض هر یک از آنها یک سوم فضا خواهد بود، اما اگر 4 ستون باشد، به طور خودکار فضایی معادل یک چهارم را اشغال می کنند.

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

اطلاعات و تجربه کار با بوت استرپ را با ما و سایرین به اشتراک بگذارید و اگر منابع فارسی مناسبی برای آموزش این سیستم می شناسید در قسمت نظرات همین سایت درج کنید.