Bootstrap

Bootstrap چیست و چه کاربردی دارد؟

در مبحث طراحی وب‌سایت سازگاری صفحات با نمایشگرهای مختلف (ریسپانسیو بودن) اهمیت زیادی دارد. Bootstrap ابزاری است که باعث می‌شود این هدف به سادگی قابل انجام باشد. در واقع به طراحی صفحات ریسپانسیو سرعت بیشتری می‌بخشد و مانند یک چهارچوب عمل می‌کند. در این مقاله همراه گروه تبلیغاتی فورسی باشید تا بررسی کنیم Bootstrap چیست و چرا باید از آن استفاده کنیم؟

Bootstrap چیست؟

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

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

در ماه آگوست سال ۲۰۱۱ مارک اتو، Bootstrap را در اختیار همگان قرار داد تا با منبع آزاد از آن برای طراحی صفحات وب استفاده کنند.

bootstrap elements min

تاریخچه کلمه Bootstrap چیست؟

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

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

 چرا Bootstrap برای توسعه دهندگان وب کاربردی است ؟

بیایید مزایا را در ۸ قسمت زیر توضیح دهیم :

۱. چارچوب پاسخگوی آن (responsiveness)

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

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

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

۲. تصاویر پاسخگو آن (Image responsiveness)

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

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

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

Bootstrap

۳. اجزای آن

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

  • خطوط راهنمای وب سایت
  • منوهای پایین رونده (drop downs)
  • خطوط پیشروی در وب سایت
  • عکس پیش نمایش (thumb nail)

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

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

۴. بخشی از جاوا اسکریپت است

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

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

۵. مستندات آن

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

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

۶. قابلیت شخصی سازی آن

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

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

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

Bootstrap

۷. جامعه آن

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

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

۸. الگوهای خارجی آن

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

در اینجا فقط چند مورد ذکر شده است:

پشتیبانی مرورگر‌ها از بوت استرپ

 

Bootstrap

همانطور که گفته شد Bootstrap ۵ در حال حاضر آخرین نسخه بوت استرپ است. این نسخه در تمام مرورگر‌های بزرگ غیر از Internet Explorer قدیمی (ورژن ۱۱ به قبل) پشتیبانی می‌شود. بنابراین می‌توان گفت که با خیال راحت از این فریمورک استفاده نمایید.

مشکل Bootstrap چیست؟

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

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

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

Bootstrap

چرا ممکن است از Bootstrap خودداری کنید؟

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

بیایید نگاهی سریع به برخی از شکایات متداول در مورد Bootstrap بیندازیم:

Syntax .1 آن گیج کننده است!

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

“صبر کنید – ۴؟ این ۴ از کجا آمده است ؟! »

بدون شک ، این چهار ممکن است شما را به این باور سوق دهد که ستون یک چهارم صفحه را اشغال می کند – نه یک سوم. گرچه این نحو منطقی است (بوت استرپ از یک سیستم ۱۲ ستونی استفاده می کند و ۴ یک سوم از ۱۲ است) ، اما برای کسانی که تازه وارد کل فرآیند شده اند می تواند کمی گیج کننده باشد.

۲. فایل های آن خیلی بزرگ است!

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

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

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

۳. من را از یادگیری کدنویسی باز میدارد

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

0 0 دادگاه‌ها
امتیاز مطلب
اشتراک در
اطلاع از
guest
0 دادگاه‌ها
بازخورد (Feedback) های اینلاین
نمایش همه دیدگاه‌ها
0
با نوشتن دیدگاهتان ما را مهمان کنید.x
()
x