Bootstrap چیست ؟

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

با Bootstrap، محبوب‌ترین جعبه ابزار اوپن سورس Front-end جهان، با متغیرهای Sass و میکس‌ها، سیستم شبکه پاسخ‌گو، اجزای از پیش ساخته شده گسترده، و افزونه‌های قدرتمند جاوا اسکریپت، به‌سرعت سایت‌های تلفن همراه را طراحی و سفارشی می کند.

این جعبه ابزار توسعه برنامه وب توسط کارمندان سابق توییتر مارک اتو و جیکوب تورنتون (در زیر) ایجاد شده است.

وب سایت رسمی بوت استرپ به آدرس https://getbootstrap.com/:

محبوب‌ترین چارچوب HTML، CSS، و JS برای توسعه پروژه‌های واکنش‌گرا و اولین موبایل در وب.

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

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

 

چرا بوت استرپ برای توسعه دهندگان وب مورد استفاده قرار می گیرد؟

بیایید مزایا را به 8 قسمت تقسیم کنیم:

1. شبکه پاسخگو آن

دیگر نیازی به صرف ساعت‌ها برای کدنویسی شبکه خود نیست – بوت استرپ با سیستم شبکه از پیش تعریف شده خود ارائه می‌شود.

اکنون می توانید مستقیماً به پر کردن سایت خود با محتوا بپردازید.

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

 

2. تصاویر واکنشگرا آن

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

اجازه دهید بوت استرپ تصاویر شما را برای شما تغییر اندازه دهد!

حتی می‌تواند شکل تصاویر شما را با اضافه کردن کلاس‌هایی مانند img-circle و img-rounded تغییر دهد، و این بدون رفت و برگشت بین کد و نرم‌افزار طراحی شما است.

 

3. اجزای آن

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

نوارهای ناوبری
کشویی
نوارهای پیشرفت
ریز عکسها

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

برای فهرست کامل‌تری از ویژگی‌های قابل افزودن، مستندات مؤلفه را بررسی کنید.

 

4. جاوا اسکریپت آن

هنوز توابع کافی نیست؟ JQuery را امتحان کنید!

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

 

5. مستندات آن

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

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

 

6. قابلیت سفارشی سازی آن

یکی از انتقادات اصلی در مورد چارچوب هایی مانند بوت استرپ، اندازه آنها است – وزنی که آنها به اطراف می اندازند می تواند در اولین بارگذاری برنامه شما را کاهش دهد. به عنوان مثال، نسخه فعلی فایل CSS Bootstrap، 119 کیلوبایت است. در حالی که ممکن است در مقایسه با فایل‌های تصویری و ویدئویی، این مقدار به‌خصوص بزرگ به نظر نرسد، برای یک فایل CSS، این بسیار بزرگ است!

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

سفارشی سازی کلید است!

 

7. جامعه آن

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

بوت استرپ یک صفحه توییتر فعال، یک وبلاگ بوت استرپ و حتی یک اتاق اسلک اختصاصی دارد. و این حتی به تعداد توسعه دهندگانی که مایل به کمک به مشکلات فنی در Stack Overflow هستند، نمی رسد، جایی که همه سؤالات را می توان در برچسب bootstrap-4 یافت.

 

8. قالب های خارجی آن

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

 

Bootstrap برای چه مواردی استفاده می شود؟

Bootstrap یک کتابخانه HTML، CSS و JS است که بر ساده سازی توسعه صفحات وب آموزنده (بر خلاف برنامه های وب) تمرکز دارد. هدف اصلی از افزودن آن به یک پروژه وب، اعمال رنگ، اندازه، فونت و طرح بوت استرپ در آن پروژه است.

 

تفاوت Bootsrap و Css ؟

تفاوت اصلی بین Bootstrap و CSS این است که Bootstrap یک فریمورک front-end است در حالی که CSS یک زبان style sheet است. شبکه جهانی وب (WWW) از تعداد زیادی وب سایت تشکیل شده است. زبان های برنامه نویسی اصلی مورد نیاز برای ساخت وب سایت ها HTML، CSS و جاوا اسکریپت هستند. بوت استرپ یکی از آنهاست.

 

معایب

نحوش گیج کننده است!

قبل از اینکه با بوت استرپ آشنا شوید، برخی از نحو آن ممکن است گیج کننده باشد. به عنوان مثال، هنگام استفاده از سیستم گرید، برای ایجاد ستونی که یک سوم صفحه را اشغال می کند، باید کلاس col-md-4 را به آن اضافه کنید.

 

“صبر کن – 4؟ این 4 از کجا اومده؟!»

بدون شک، این چهار ممکن است شما را به این باور برسانند که ستون یک چهارم صفحه را اشغال می کند – نه یک سوم. در حالی که این نحو منطقی است (Bootstrap از یک سیستم 12 ستونی استفاده می کند و 4 یک سوم از 12 است)، می تواند برای کسانی که در کل فرآیند جدید هستند غیر قابل درک باشد.

فایل هاش خیلی بزرگه!

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

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

بنابراین آن را به روش خود انجام دهید – فقط قطعات مورد نیاز خود را انتخاب کنید و بقیه را رها کنید. (البته هر چه بیشتر در مورد کدنویسی بدانید این کار آسان تر می شود!)
من را از یادگیری کد باز می دارد!

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

 

برخی از وبسایت هایی که از Bootstrap استفاده می کنند:

• Spotify

• Udemy

• Twitter

• Robinhood

• Lyft

• LinkedIn

• StackShare
• Postman
• Snapchat

 

 

 

Favorite