بوت استرپ چیست ؟
بوت استرپ چیست ؟ Bootstrap چیست؟ بوت استرپ یک فریم ورک طراحی وب سایت است که در ابتدا توسط توسعه دهندگان توییتر برای استفاده داخلی ایجاد شد. bootstrap پس از مدتی در دسترس عموم قرار گرفت و به مجموعه‌ای مناسب از ابزارها برای توسعه رابط‌های کاربری با هر میزان پیچیدگی تبدیل شد. اکنون Bootstrap یک مجموعه ابزار HTML ، CSS و JS منبع باز و رایگان است. هنگامی که توسعه دهنده وب Bootstrap این فایل‌ها را به صفحه متصل می‌کند، تعداد زیادی کلاس و اجزای آماده برای طرح بندی در دسترس قرار می‌گیرد. از بوت استرپ برای ایجاد و طراحی وب سایت‌های ریسپانسیو در زمان کم استفاده می‌شود. طراحی و ایجاد ظاهر زیبا و مناسب برای وب سایت‌ها و صفحات وب بسیار مهم است. طراحان وب سایت باید در کنار برنامه‌نویسی قوی باید به دنبال روش‌هایی برای ارائه جذاب آنها به کاربر باشند. نمایش خروجی کار به صورت کاربرپسند در طراحی وب سایت اهمیت زیادی دارد. بوت استرپ این امکان را به طراحان و برنامه نویسان می دهد که از طرح‌های پیش فرض استاندارد برای صفحات وب خود استفاده کنند. استفاده از این طرح‌ها امکان طراحی سایت های استاندارد با ظاهری جذاب را به وجود می آورد. منشا کلمه بوت استرپ چیست؟ مستقل از مباحث توسعه وب و موارد مرتبط با آن، کلمه Bootstrap در لغت به معنی «خود راه انداز» است. از سوی دیگر، کلمه Bootstrapping یعنی فرآیندی که به صورت مستقل و بدون استفاده از عوامل خارجی به کار خود ادامه می‌دهد. در علم کامپیوتر، از مفهوم بوت استرپ با نام Booting یاد می‌شود که به فرآیند راه‌اندازی سیستم و بارگذاری اطلاعات اولیه نرم‌افزار در حافظه کامپیوتر اشاره دارد. به زبانه کوچکی که معمولاً در انتهای کفش تعبیه شده است نیز Bootstrap گفته می‌شود. در پاسخ به سوال «بوت استرپ چیست» به این نکته اشاره شد که بوت استرپ برای برنامه نویسی وب به صورت واکنشگرا استفاده می‌شود. در اینجا این سوال به وجود می‌آید که توسعه وب واکنشگرا چیست؟ بنابراین در ادامه این مقاله، به این موضوع پرداخته شده است. مهم ترین مواردی که باعث محبوبیت بوت استرپ شده است سازگاری با مرورگرهای مختلف سایت‌های ایجاد شده با Bootstrap به طور یکسان در تمام دستگاه‌های مختلف و همچنین مرورگرهای مختلف نمایش داده می‌شوند. راحتی در استفاده از دیگر مزایای بوت استرپ این است که کار با بوت استرپ بسیار آسان است. این کار فقط به مهارت و دانش اولیه برای کار با طرح‌بندی و لایه‌بندی نیاز دارد. یادگیری آسان bootstrap یادگیری بوت استرپ نیز بسیار آسان است. تعداد قابل توجهی از فیلم‌ها و مطالب آموزشی مفید وجود دارد که به شما کمک می‌کند تا Bootstrap را بدون هیچ مشکلی درک کرده و بر آن مسلط شوید. علاوه بر آن اکثر کدهای این چارچوب از قبل نوشته شده و میتوانید برای طراحی مورد استفاده قرار دهید. اجزای موجود در آن بوت استرپ دارای مجموعه کاملی از اجزای سازنده است که میتوانید به راحتی آنها را در طراحی وبسایت استفاده کنید.. افزودن عناصر طراحی چشم نواز به وب سایت شما با استفاده از بوت استرپ نه تنها یک کار ساده است، بلکه میتوانید بدون توجه به اندازه صفحه نمایش یا دستگاهی که برای مشاهده آنها استفاده می‌شود، به صورت کامل و عالی طراحی شوند. معایب Bootstrap در کنار مزیت‌های مهم گفته شده برای بوت استرپ برخی از معایب نیز وجود دارد که باید به آنها نیز توجه داشته باشید. قالب‌های مشابه سایت‌های توسعه یافته با Bootstrap مشابه یکدیگرند، ساختار یکسان، دکمه‌ها و بخش‌های مختلف شباهت زیادی به یکدیگر دارند. با توجه به آنچه گفته شد باید با همه ابزارهای ارائه شده توسط Bootstrap به طور کامل آشنایی داشته باشید تا از حداکثر آنها در توسعه وبسایت استفاده کنید. این که همه سایت‌های طراحی شده با این فریم ورک شبیه یکدیگر هستند، باعث می شود استفاده از آن برای اجرای برخی از پروژه‌ها مناسب نباشد. پشتیبانی از جاوا اسکریپت شاید فکر کنید بوت‌استرپ تنها در مورد CSS دست در دست ما خواهد گذاشت، اما باید بدانید که در مورد جاوا اسکریپت نیز حرف‌هایی برای گفتن دارد. با ۱۲ افزونه‌ی jQuery موجود در بوت‌استرپ، با دستی بازتر می‌توانیم پویایی مد نظرمان را پیاده‌سازی کنیم. یکی از مثال‌های آن کنترل نوار بار (Navigation Bar) حین اسکرول وبسایت است. شخصی سازی بوت استرپ Bootstrap فریم‌ورک بسیار گسترده‌ای است و ممکن است شما به همه امکانات آن نیاز نداشته باشید. به همین دلیل در سایت Bootstrap صفحه‌‌ای جداگانه برای انتخاب امکانات دلخواه و ایجاد تغییرات جزئی مانند رنگ کامپوننت‌ها قرار داده شده است. توجه کنید که تغییرات ممکن، بسیار جزئی هستند و نباید انتظار تغییر گسترده در یک فریم‌ورک را داشته باشید. دانلود بوت استرپ همانطور که میدانید نرم افزارها و کامپوننت های متن باز با سرعت زیادی به روز می شوند بنابراین بجای قرار دادن نسخه ای از بوت استرپ در سایت خود، پیشنهاد میدهیم که از سایت رسمی این شرکت getbootstrap.com آخرین نسخه از نرم افزار Bootstrap رادانلود کنید. چرا طراحی سایت ریسپانسیو Responsive واکنش گرا؟ برای آن که سایت های ریسپانسیو، سایت هایی هستند که خود را با اندازه ی صفحه نمایش تلفن همراه یا تبلت به خوبی سازگار کرده و انجام کار با آن ها بسیار روان و آسان می باشد, و این خود یک قابلیت بسیار جذاب برای کاربران وب سایت ها در هنگام استفاده می باشد. از دیگر مواردی که باعث اهمیت موضوع ریسپانسیو بودن سایت می شود، تنوع سیستم عامل ها و مرورگر های موجود در بازار می باشد. سایت ریسپانسیو توانایی مچ شدن و سازگاری با انواع سیستم عامل ها (ویندوز – اندروید – لینوکس – IOS– مکینتاش- یونیکس و…) و انواع مرورگر های جدید و قدیمی عرضه شده را دارند که این خود یکی از مهم ترین نقاط قوت این نوع سایت ها می باشد. میتوان گفت ریسپانسیو راحت تر یکی از عوامل محبوب بودن بوت استرپ هست سیستم شبکه‌بندی به طور خلاصه ، سیستم شبکه‌بندی بوت‌استرپ به شما در ایجاد طرح‌بندی واکنشگرا کمک می‌کند و از سیستم ردیف‌ها و ستون‌ها تشکیل شده است که به شما کمک می‌کند محتوای خود را ساختاربندی کنید. هر صفحه دارای حداکثر ۱۲ ستون در هر ردیف است. در هر ردیف، محتوای داخل ستون‌ها قرار داده می‌شود و می‌تواند در هر نقطه بین ۱ تا ۱۲ ستون قرار داشته باشد. بوت‌استرپ دارای پنج نوع اندازه مختلف است: خیلی کوچک، کوچک، متوسط، بزرگ و فوق‌العاده بزرگ. برای هر یک از این لایه‌های شبکه یک نقطه شکست تعریف شده است. بوت‌استرپ از پیکسل‌ها برای تعریف نقاط شکست استفاده می‌کند. به برخی از کلاس های آماده بوت استرپ می پردازیم Container CONTAINER خارجی‌ترین عنصر است که تمام شبکه شما را در بر می‌گیرد. container دو نوع دارد یک نوع معمولی که مقداری از اطراف صفحه فاصله دارد و یک نوع container-fluid که هیچ فاصله‌ای از اطراف صفحه ندارد و به طور کامل صفحه را در بر می‌گیرد. مثال
Row از Row برای گروه‌بندی ستون‌ها استفاده می‌شود. برای اینکه بخواهیم یک ردیف ایجاد کنیم از Row استفاده می‌کنیم که این کار باعث می‌شود همه چیز به درستی تنظیم شود. مثال
Columns کلاس‌های col نشان می‌دهد که از 12 ستون چه تعداد ستون را می‌خواهید استفاده کنید. مثلا col-sm-6 یعنی شما می‌خواهید از نیمی از صفحه در یک صفحه کوچک مانند موبایل استفاده کنید و col-lg-4 یعنی می‌خواهید از یک سوم صفحه بزرگ مانند لپتاپ استفاده کنید. در این قسمت به شما نحوه تقسیم‌بندی صفحه نمایش‌ها را نشان خواهم داد. خیلی کوچک col-1 کوچک col-sm-1 متوسط col-md-1 بزرگ col-lg-1 خیلی بزرگ col-xl-1 مثال
به‌عنوان یک سیستم شبکه‌بندی ۱۲ ستونی، جمع همه‌ی ستون‌هایی که در یک ردیف استفاده می‌کنید نباید بیشتر از 12 باشد. مقادیر هر کدام از اندازه‌های صفحه نمایش به این گونه است: xs - < 768px موبایل sm - < 992px تبلت md - < 1200px لپتاپ lg - > 1200px کامپیوتر بوت استرپ مقدار بسیار زیادی کلاس های آماده دارد ما فقط به برخی از پرکاربرد ترین کلاس ها آن در این مقاله پرداختیم امیدوارم از این مقاله لذت برده باشید
جواد یوسفی
برنامه نویس فرانت اند
دیدگاه کاربران
ثبت دیدگاه
برای ثبت نظر، ابتدا وارد شوید.
محمد عبادی پور
بوت استرپ خوبه در کل باید یکمخودمون ویرایش انجام بدیم که صفحه هات در وب تکراری نشه👨💻