- دوشنبه ۴ اسفند ۱۴۰۴
راهنمای بوت استرپ برای مبتدیان
بوت استرپ یکی از محبوبترین این ابزارهای برنامهنویسی و توسعهٔ اپلیکیشنهای وب و چارچوبی رایگان، متن باز و فرانت اند است که به کمک آن میتوان وب سایت و اپلیکیشن تحت وب ساخت.
چکیده
بوت استرپ (Bootstrap) نوعی فریم ورک برای طراحی وبسایت است که نخستین بار سازندگان توییتر آن را برای استفادهٔ داخلی خود طراحی کردند و پس از مدتی در دسترس عموم مردم قرار گرفت و به ابزاری برای توسعهٔ رابط کاربری تبدیل شد. طراحی وبسایت روشها و ابزارهای گوناگونی دارد. بوت استرپ یکی از مجموعه ابزارهای طراحی انواع وبسایت است. به کمک بوت استرپ میتوان انواع صفحات وب و نرمافزارهای تحت وب را ایجاد کرد و توسعه داد. بوت استرپ ابزار جدیدی نیست و مزایا و معایب مخصوص خود را دارد. در این مطلب به تفصیل به تعریف بوت استرپ، نحوهٔ کار با آن و مزایا و معایب آن میپردازیم.
دپارتمان فناوری اطلاعات و ارتباطات در مجتمع فنی تهران با هدف تربیت نیروهای متخصص و عملی در حوزههای تکنولوژی روز، بستری حرفهای برای یادگیری مهارتهای دیجیتال فراهم کرده است. این بخش آموزشی مجموعهای از دورههای کاربردی را ارائه میدهد که شامل طراحی و توسعهٔ وب، برنامهنویسی، شبکه و امنیت، مدیریت پایگاه داده، هوش مصنوعی، تحلیل داده، رایانش ابری و فناوریهای نوظهور میشود.
رویکرد آموزشی این دپارتمان بر پایهٔ یادگیری پروژهمحور و مطابق با نیازهای بازار کار است، تا شرکتکنندگان بتوانند پس از پایان دوره نهفقط درک تئوریک، بلکه تجربهٔ عملی لازم برای ورود به صنعت فناوری اطلاعات را کسب کنند. مربیان باتجربه، کارگاههای تخصصی، و استفاده از ابزارهای واقعی صنعت از ویژگیهای برجستهٔ این دپارتمان است. اگر علاقهمند به حرفهایشدن در دنیای دیجیتال و پیشبرد کسبوکارها با فناوری هستید، آموزشهای این دپارتمان میتواند نقطهٔ شروعی مطمئن و کاربردی برای مسیر حرفهای شما باشد.
فریم ورک بوت استرپ
اخیراً برنامهنویسی وب به یکی از کاربردیترین مهارتها در حوزهٔ علوم رایانهای تبدیل شده است. به همین دلیل فناوریها و ابزارهای گوناگونی برای برنامهنویسان و توسعهدهندگان وب به وجود آمده است که یکی از محبوبترین این ابزارها فریم ورک بوت استرپ است. بوت استرپ چارچوبی رایگان، متن باز و فرانت اند است که به کمک آن میتوان وب سایت و اپلیکیشن تحت وب ساخت.
اما منظور از فریم ورک چیست؟ فریم ورک در واقع چارچوبی نرمافزاری است که به این ساخته شده که به برنامهنویسان کمک کند اپلیکیشن بسازند. فریم ورک نوعی ابزار کمکی برای برنامهنویسان محسوب میشود و کار آنها را جلو میاندازد. فریم ورک را مهندسان رایانه و خود برنامهنویسان میسازند و بعد آنها را آزمایش و بهینهسازی میکنند. به همین دلیل این چارچوبها اغلب مؤثر، سریع و انعطافپذیر هستند. استفاده از فریم ورک به برنامهنویسان کمک میکند بر ساخت قابلیتهای سطح بالای هر اپلیکیشن تمرکز کنند و ساخت قابلیتهای سطح پایینتر را به فریم ورک بسپارند.
شاید این پرسش مطرح شود که آیا فریم ورک همان کتابخانه است یا خیر. برخلاف تصور برخی فریم ورک با کتابخانه یکی نیست، هرچند فریم ورکها به کتابخانهها وابسته هستند و از آنها استفاده میکنند. کتابخانه مجموعهای از توابع ازپیش تعریفشده است. برنامهنویسان در کدهای خود کتابخانه را فراخوانی میکنند، اما فریم ورک چنین کارکردی ندارد. فریم ورک در واقع آن بخشی است که کدهای برنامه را فراخوانی میکند و کنترل را به دست میگیرد.
پس بوت استرپ فریم ورکی است که به برنامهنویسان کمک میکند کدهای برنامه را فراخوانی کنند. فریم ورک بوت استرپ از نوع CSS است. این فریم ورک رایگان و منبعباز دراصل برای توسعهٔ وب واکنشگرا ساخته شده است. در ایجاد وب سایت به کمک این ابزار طراحی نسخهٔ مناسب موبایل در اولویت قرار دارد. یعنی نخست وبسایت برای نمایش در صفحات کوچک طراحی میشد. قالبهای ازپیش طراحیشده در بوت استرپ مبتنی بر CSS و جاوا اسکریپت هستند.
از قالبهای بوت استرپ برای تولید و نمایشدادن عناصر صفحه، فرمها، دکمهها، نوارها و سایر اجزای رابط کاربری در وبسایت استفاده میشود. سایت گیتهاب در سال ۲۰۲۱ بوت استرپ را در فهرست پروژههای ستارهدار در رتبهٔ دهم قرار داد. هدف اولیهٔ بوت استرپ سازگارکردن ابزارهای داخلی توییتر بود. البته توییتر قبل از بوت استرپ کتابخانههای متعددی برای سازگاری ابزارهای داخلی تولید کرده بود، اما هیچکدام مؤثر نبودند.
مارک اتو یکی از برنامهنویسان ارشد توییتر است که در ساخت بوت استرپ نقش مهمی داشت. او میگوید برخی از برنامهنویسان توییتر دور هم جمع شدند تا ابزار داخلی جدیدی تولید کنند. او و همکارانش به این نتیجه رسیدند که امکان ساخت ابزاری اصولیتر فراهم شده است. آنها پس از چند ماه نسخهٔ اولیهٔ بوت استرپ را ارائه دادند. توییتر از این ابزار برای مستندسازی و اشتراکگذاری قالبهای طراحی استفاده کرد.
بوت استرپ چیست؟
بوت استرپ به زبان ساده ابزاری جامع برای توسعهٔ وب است. بوت استرپ کتابخانههای پیشپردازندهٔ HTML، CSS، Less و جاوا اسکریپت را در خود دارد و برنامهنویسان میتوانند از ابزارهای متعدد آن استفاده کنند. واژهٔ بوت استرپ به معنای «خودراهانداز» است. بوت استرپ یعنی فرایندی که مستقلاً و بدون استفاده از عوامل خارجی به کارکردن ادامه میدهد. مفهوم بوتکردن در علوم رایانه به راهاندازی سیستم و بارگذاری اطلاعات اولیه در حافظهٔ رایانه اشاره دارد.
گفتیم که برنامهنویسان از بوت استرپ به شکل واکنشگرا استفاده میکنند. در ادامه به توضیح این مفهوم میپردازیم.
وب واکنشگرا چیست؟
توسعهٔ وب واکنشگرا یعنی فرایندی که در آن طراحی و توسعهٔ وبسایت براساس اندازهٔ صفحهٔ نمایش، نوع پلتفرم (مانند ویندوز یا اندروید) و جهت در دست گرفتن دستگاه انجام میشود و وبسایت براساس این موارد به رفتار کاربران واکنش مناسب نشان میدهد. یعنی صفحهٔ وب در دستگاههای مختلف و اندازههای مختلف تصویر بهدرستی نمایش داده میشود. در توسعهٔ وب واکنشگرا طرح و قالب وبسایت به شکل سیال ایجاد میشود که با محیط نمایش صفحهٔ وب سازگار است. از آنجایی که بیشتر مردم صفحات وب را در دستگاه موبایل خود میبینند، توسعهٔ وب واکنشگرا بیش از پیش مهم شده است.
زبانهای مورد استفاده در بوت استرپ
گفتیم که فریم ورک بوت استرپ تحت وب است و بر پایهٔ زبانهای جاوا اسکریپت، HTML و CSS کار میکند. در ادامه توضیح کوتاهی در مورد این زبانها میآوریم
- جاوا اسکریپت زبانی سطح بالا و تفسیری است که به کمک آن صفحات وب تعاملپذیر را میسازند. امروزه این زبان در کنار HTML و CSS سه بخش اصلی فناوری وب را شکل میدهند.
- HTML نوعی زبان نشانهگذاری است. در صفحات وب که شامل متن، عکس و بخشهای مختلف دیگر هستند به کمک تگها و کدهای HTML ساختار مشخص صفحه ساخته میشود.
- CSS زبانی است که از آن برای ایجاد ظاهر زیباتر صفحات استفاده میکنند. صفحهآرایی، ساخت استایل ویژه و زیباکردن ظاهر صفحه از کاربردهای مهم CSS هستند.
ویژگیهای فریم ورک بوت استرپ
هدف اصلی از ساخت بوت استرپ سادهکردن فرایند ساخت صفحات وب است. کار اصلی بوت استرپ این است که رنگ، سایر فونت و قالبهای خاصی را به پروژههای وب اضافه میکند. وقتی بوت استرپ را به پروژه اضافه کنید، چند استایل اولیه برای همهٔ المانهای HTML تعریف میشود. این استایلها باعث میشوند ظاهر صفحهٔ وب منسجم شود. در بوت استرپ میتوان رنگها بهطور هماهنگ روشنتر یا تیرهتر کرد، برای صفحات عنوان تعریف کرد، نقلقولها را برجستهتر کرد، متن را هایلایت کرد و کارهای دیگر.
بوت استرپ چندین کامپوننت جاوا اسکریپت دارد که افزونههای jQuery هستند. با استفاده از این کامپوننتها میتوان المانهای رابط کاربری را ایجاد کرد، ازجمله کادرهای محاوره، راهنماهای یکخطی و اسلایدهای Carousel. هر کدام از اجزای بوت استرپ یک ساختار HTML، تعریف و گاه کدهای جاوااسکریپت را دارا هستند. آنها همچنین قابلیتهای برخی از اجزای رابط کاربری فعلی وبسایت را توسعه میدهند، مانند امکان تکمیل خودکار فیلدهای ورودی.
مزایای استفاده از بوت استرپ
فریم ورک محبوب بوت استرپ علاوه بر اینکه کارکردن با آن ساده است مزایای دیگری هم دارد. مهمترین مزایای بوت استرپ عبارتاند
- کاهش خطاهای مرورگر
- ارائهٔ فریم ورکی سازگار که از اکثر مرورگرها پشتیبانی میکند
- قابلیت سفارشیسازی
- توسعهٔ واکنشگرا
- افزونههای جاوا اسکریپت jQuery
- پشتیبانی مفید
- دسترسی به مستندات
- قالبها، تمهای وردپرس و افزونههای رایگان و حرفهای
- سیستم ستونبندی مناسب
کاستیهای بوت استرپ
بوت استرپ کاستیهای نیز دارد، اما باید توجه داشت که نقاط قوت آن نسبت به کاستیهایش بسیار مهمتر هستند. یکی از کاستیهای بوت استرپ این است که طراحان وبسایت وقتی میخواهند طراحی پیشفرض آن را تغییر دهند، باید وقت زیادی صرف بازنویسی فایلها و تغییر استایل بوت استرپ بکنند. استایلهای بوت استرپ طولانی هستند و این باعث میشود خروجیهای متعدد و غیرمفید در HTML ایجاد شود.
کاستی دیگر این است که با اینکه jQuery از کتابخانههای اصلی جاوا اسکریپت محسوب میشود، اما بوت استرپ از نسخهٔ پنجم به بعد دیگر از jQuery پشتیبانی نمیکند. عدم انطباق و ناسازگاری با HTML از دیگر کاستیهای بوت استرپ است.
چرا باید از بوت استرپ استفاده کرد؟
دلایل متعددی برای استفاده از بوت استرپ وجود دارد. بوت استرپ فریم ورک محبوب برای ساخت Layout است. CSS در این فریم ورک به شکل واکنشگرا عمل میکند و بهراحتی با صفحات موبایل، تبلت و رایانه سازگار میشود. بوت استرپ با انواع مرورگر مانند فیرفاکس، اوپرا و کروم سازگار است. پشتیبانی از این فریم ورک قوی است و جامعهٔ کاربران میتوانند بهراحتی با هم تعامل کنند.
بوت استرپ به کاربران خود امکان میدهد بهسادگی آن را اجرا کنند و در مدتی کمتر از یک ساخت یک طرح بسازند. سادگی استفاده، پشتیبانی و مستندات قوی باعث شده بسیاری از توسعهدهندگان وب از بوت استرپ استفاده کنند.
چگونه میتوان از بوت استرپ استفاده کرد؟
خست باید آخرین نسخهٔ بوت استرپ را از وبسایت رسمی آن دانلود کنید. برای دانلود چند گزینه دارید که عبارتاند از
- دانلود فایل بوت استرپ که CSS، جاوااسکریپت و فونتها در آن کامپایل شدهاند اما سند یا فایل منبع اصلی در آن نیست.
- دانلود کد سورس که فایلهای منبع Less، جاوااسکریپت، فونتها و اسناد را در خود دارند، اما نیاز است کامپایل و تنظیمات را خودتان انجام دهید.
- دانلود نسخهٔ Sass که برای پروژههای خاص Sass بهینه شده است.
پس از دانلود، نوبت نصب و راهاندازی بوت استرپ میرسد. نخست باید فایلهای دانلودشده را از حالت فشرده خارج کنید. با این کار ساختار کامپایلشده بوت استرپ را میبینید. برای نصب بوت استرپ چهار روش وجود دارد که عبارتاند از
- نصب با BootstrapCDN
- نصب با Bower
- نصب با npm
- نصب با Composer
ویژگیهای نسخهٔ پنج بوت استرپ
در نسخهٔ پنج بوت استرپ تغییرات مهمی ایجاد شد، ازجمله توقف پشتیبانی از اینترنت اکسپلورر و حذف jQuery. این اولین ابزار توسعهٔ وب بود که پشتیبانی از اینترنت اکسپلورر را متوقف کرد. در ادامه سایر تغییرات مهم در نسخهٔ پنج بوت استرپ را بررسی میکنید.
- ویژگیهای سفارشی CSS که پس از حذف پشتیبانی از اینترنت اکسپلورر محقق شد، زیرا اینترنت اکسپلورر از ویژگیهای سفارشیسازی پشتیبانی نمیکرد. در این نسخه از بوت استرپ CSS منعطفتر شده و بهتر میتوان آن را برنامهریزی کرد.
- بهبود صفحهبندی که نسبت به نسخهٔ چهار تغییرات قابل توجهی در آن ایجاد شده است.
- بهبود مستدات که در نسخهٔ پنج اطلاعات بیشتری در آن آمده است.
- بهبود کنترلهای فرم که امکان شخصیسازی آنها فراهم شده است.
- کتابخانهٔ آیکون جدید که متنباز است و بیش از ۱۳۰۰ ایکون دارد.
جمعبندی
پس بوت استرپ فریم ورکی است که به برنامهنویسان کمک میکند کدهای برنامه را فراخوانی کنند. فریم ورک بوت استرپ از نوع CSS است. این فریم ورک رایگان و منبعباز دراصل برای توسعهٔ وب واکنشگرا ساخته شده است. در ایجاد وب سایت به کمک این ابزار طراحی نسخهٔ مناسب موبایل در اولویت قرار دارد. یعنی نخست وبسایت برای نمایش در صفحات کوچک طراحی میشد. قالبهای ازپیش طراحیشده در بوت استرپ مبتنی بر CSS و جاوا اسکریپت هستند.
دلایل متعددی برای استفاده از بوت استرپ وجود دارد. بوت استرپ فریم ورک محبوب برای ساخت Layout است. CSS در این فریم ورک به شکل واکنشگرا عمل میکند و بهراحتی با صفحات موبایل، تبلت و رایانه سازگار میشود. بوت استرپ با انواع مرورگر مانند فیرفاکس، اوپرا و کروم سازگار است. پشتیبانی از این فریم ورک قوی است و جامعهٔ کاربران میتوانند بهراحتی با هم تعامل کنند.
بوت استرپ به کاربران خود امکان میدهد بهسادگی آن را اجرا کنند و در مدتی کمتر از یک ساخت یک طرح بسازند. سادگی استفاده، پشتیبانی و مستندات قوی باعث شده بسیاری از توسعهدهندگان وب از بوت استرپ استفاده کنند.
در گذشته افراد برای اینکه محصولات خود را به فروش برسانند به مکانی نیاز داشتند تا محصولات را در آن عرضه کنند. تمامی مشاغل مانند فروش لوازم آرایشی، فروش لوازم خانگی، سوپرمارکت، رستوران و غیره باید فضایی مناسب خود آماده میکردند و این کار و مشکلات و سختیهای بسیاری به همراه داشت. اما امروزه مشتریان برای خرید کمتر به مکان های فیزیکی مراجعه میکنند. اکثر آنها از طریق تلفن همراه خود فروشگاهها و شرکتهای ارائهدهندهٔ محصول و خدمات را جستوجو میکنند. به همین دلیل اکثر مشاغل سعی دارند وارد دنیای اینترنت شوند و یک وبسایت کاملاً مفید برای مشتریانشان بسازند.
اما نکته این است که وبسایت باید ویژگیهایی لازم را داشته باشد. یکی از مهمترین این ویژگیها واکنشگرا بودن وبسایت است. وبسایت باید در تمامی دستگاهها مخصوصاً در موبایل بهخوبی نمایش داده شود. به همین دلیل طراحان وبسایت به دنبال فریم ورکهای لازم جهت سهولت طراحی وبسایت واکنشگرا هستند. فریم ورکهایی همچون بوت استرپ یکی از محبوبترین آنهاست.
دوره آموزش Responsive کمپی نوروزی است که در دپارتمان فناوری اطلاعات و ارتباطات مجتمع فنی تهران برگزار میشود. شما با شرکت در این دوره در تعطیلات نوروز میتوانید بهطور کامل با نحوهٔ ریسپانسیو کردن وبسایت با بوت استرپ آشنا شوید. پیشنیاز این دورهWeb Design 1 است که شامل HTML5 و Css3 است.
در دنیای کسبوکار امروز، تحصیلات دانشگاهی برای حفظ ارزش شما بهعنوان نیروی کار بااستعداد و کارآمد کافی نیستند. برای اینکه مزیت رقابتی شخصی خود را حفظ کنید، باید بر آموزش مستمر و مادامالعمر خود سرمایهگذاری کنید. خانواده بزرگ مجتمع فنی تهران هرساله به هزاران نفر کمک میکند تا در مسیر شغلی خود پیشرفت کنند.
اگر شاغل هستید و وقت ندارید در دورههای آموزشی حضوری شرکت کنید، مجتمع فنی تهران گزینههایی عالی برای آموزش مجازی، آنلاین، آفلاین و ترکیبی ارائه میدهد. با شرکت در دورههای کوتاهمدت مجتمع فنی تهران و دریافت مدارک معتبر و بینالمللی میتوانید با اعتماد به نفس مسیر ترقی را طی کنید و در سازمان خود به مهرهای ارزشمند تبدیل شود.
منبع: فرادرس
پرسشهای متداول
آیا بوت استرپ فارسی هم وجود دارد؟
بله، فریم ورک بوت استرپ چارچوبی محبوب است و به دلیل تقاضای کاربران فارسیزبان نسخهٔ استاندارد فارسی و راستچینشدهٔ بوت استرپ نیز تولید شده و در گیتهاب موجود است. نام این نسخه Bootstrap RTL است. در این استاندارد میتوانید بدون نیاز به تغییر فایلهای بوت استرپ و با اضافهکردن چند خط کد به فایلها خروجی را راستچین کرد.
Layout Components در بوت استرپ چیست؟
Layout Components یا اجزای طرح از مهمترین اجزای بوت استرپ به حساب میآیند که مهمترین آنها Container است. اجزای طرح روی تمان صفحات وب اثر میگذارند. Container تمام المانهای صفحه را در خود نگه میدارد و به همین دلیل به این نام خوانده میشود. برنامهنویسان میتوانند از Container با عرض ثابت یا متغییر استفاده کنند. Container با عرض متغیر باعث میشود محتوای صفحهٔ وب تمام عرض صفحه را پر کند. Container با عرض ثابت به برنامهنویسان امکان میدهد یکی از اندازههای ثابت صفحهٔ نمایش را انتخاب کنند. پنج عرض ثابت در بوت استرپ تعریف شده است که عبارتاند از
- کوچکتر از ۵۷۶ پیکسل
- ۵۷۶ تا ۷۶۸ پیکسل
- ۷۶۸ تا ۹۹۲ پیکسل
- ۹۹۲ تا ۱۲۰۰ پیکسل
- بزرگتر از ۱۲۰۰ پیکسل
مزایای استفاده از بوت استرپ کداماند؟
- کاهش خطاهای مرورگر
- ارائهٔ فریم ورکی سازگار که از اکثر مرورگرها پشتیبانی میکند
- قابلیت سفارشیسازی
- توسعهٔ واکنشگرا
- افزونههای جاوا اسکریپت jQuery
- پشتیبانی مفید
- دسترسی به مستندات
- قالبها، تمهای وردپرس و افزونههای رایگان و حرفهای
- سیستم ستونبندی مناسب
معایب بوت استرپ کداماند؟
- دشواری تغییر طراحی پیشفرض
- استایلهای طولانی
- عدم پشتیبانی از jQuery
- عدم انطباق و ناسازگاری با HTML
وب واکنشگرا یعنی چه؟
توسعهٔ وب واکنشگرا یعنی فرایندی که در آن طراحی و توسعهٔ وبسایت براساس اندازهٔ صفحهٔ نمایش، نوع پلتفرم (مانند ویندوز یا اندروید) و جهت در دست گرفتن دستگاه انجام میشود و وبسایت براساس این موارد به رفتار کاربران واکنش مناسب نشان میدهد. یعنی صفحهٔ وب در دستگاههای مختلف و اندازههای مختلف تصویر بهدرستی نمایش داده میشود. در توسعهٔ وب واکنشگرا طرح و قالب وبسایت به شکل سیال ایجاد میشود که با محیط نمایش صفحهٔ وب سازگار است. از آنجایی که بیشتر مردم صفحات وب را در دستگاه موبایل خود میبینند، توسعهٔ وب واکنشگرا بیش از پیش مهم شده است.
ویژگیهای نسخهٔ پنح بوت استرپ کداماند؟
در نسخهٔ پنج بوت استرپ تغییرات مهمی ایجاد شد، ازجمله توقف پشتیبانی از اینترنت اکسپلورر و حذف jQuery. این اولین ابزار توسعهٔ وب بود که پشتیبانی از اینترنت اکسپلورر را متوقف کرد. در ادامه سایر تغییرات مهم در نسخهٔ پنج بوت استرپ را بررسی میکنید.
- ویژگیهای سفارشی CSS که پس از حذف پشتیبانی از اینترنت اکسپلورر محقق شد، زیرا اینترنت اکسپلورر از ویژگیهای سفارشیسازی پشتیبانی نمیکرد. در این نسخه از بوت استرپ CSS منعطفتر شده و بهتر میتوان آن را برنامهریزی کرد.
- بهبود صفحهبندی که نسبت به نسخهٔ چهار تغییرات قابل توجهی در آن ایجاد شده است.
- بهبود مستدات که در نسخهٔ پنج اطلاعات بیشتری در آن آمده است.
- بهبود کنترلهای فرم که امکان شخصیسازی آنها فراهم شده است.
- کتابخانهٔ آیکون جدید که متنباز است و بیش از ۱۳۰۰ ایکون دارد.





