۱۰ قطعه کد بوت‌استرپ ۴

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

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

مواردی که در این مطلب آورده شده است، بهترین مثال ها از بوت استرپ ۴ هستند که می‌توانید مشاهده کنید. اگر قصد دارید که به نسخه جدید این فریمورک مهاجرت کنید پس مطمئن باشید که این نسخه برای شما بسیار خوب خواهد بود.

1. Life’s A Beach

بیاید نگاهی به این طرح ساحل مانند از Edd Yerburgh بندازیم. این مورد نشان می‌دهد که شما اگر مسیرتان را بشناسید، می‌توانید کارهای بسیاری را با استفاده از بوت استرپ انجام دهید. در این پیشنمایش می‌توانید المان‌های مناسبی را تقریبا برای هر کاری مشاهده کنید. کاردها، دکمه‌ها، شبکه‌بندی و… . همه این موارد براساس بوت استرپ نسخه ۴ در نظر گرفته شده است، پس زیبایی شگفت انگیزی دارد.

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

2. What’s New In BS4

این هم یکی دیگر از مثال‌های بسیار عالی از بوت استرپ است. در این مثال شما می‌توانید لایه بندی مینیمال همراه با المان‌های مختلف رابط کاربری را مشاهده کنید. 

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

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

یقینا یکی از خوب‌ترین کدهایی است که تا به حال دیده شده اما جدای از آن باید بگویم که این مورد نیز تنها یک مثال از کاری است که بوت استرپ انجام می‌دهد.

3. Pricing Table

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

این طراحی واقعا ساده است و از رنگ‌های زیادی در آن استفاده نشده است. استفاده از این مورد برای حالتی که قصد دارید قالبی را از ابتدا ایجاد کنید بسیار مناسب است به این دلیل که شما دیگر نیازی ندارد که لایه‌بندی طرح و… را تغییر دهید. 

4. BS4 Grid rem Demo

توسعه‌دهنده این کار Nicholas Cerminara از سیستم گرید‌بندی جدید و واحد rem بوت‌استرپ۴ استفاده کرده است. طرح اصلی این مورد با استفاده از سی‌اس‌اس ساخته شده است اما در کنار آن برای تغییر اندازه فونت‌ها از جاوااسکریپت نیز استفاده شده است. در این حالت می‌توانید متوجه شوید که چه نسبت فونتی برای سیستم شبکه‌بندی شما مناسب است. بسیار جذاب است!

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

5. NgAudio Player in BS4

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

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

6. Profile Card

این مورد یک مثال ساده و تمرینی عالی برای هر فردی است که می‌خواهد به دنیای بوت استرپ مهاجرت کند. توسعه دهنده این مورد، Nicola Pressi برای خلق این طراحی تنها از HTML و CSS استفاده کرده است. ایده این اثر در اصل براساس یک تصویر در Dribbble است.

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

7. Dynamic Loading Bar

در این مثال، Noriyo Akita سعی داشته که با استفاده از جی‌کوئری و بوت استرپ یک نوار بارگذاری طراحی کند. در این طرح از BS4 Alpha 3 استفاده شده است که به نظر در حال حاضر با آمدن نسخه نهایی منقضی شده است. اما با این وجود به خوبی کار می‌کند و مشکلی ندارد.

یکی از خلاقیت‌های این موضوع این است که به صورت پیشفرض از المان Progress bar مربوط به HTML5 استفاده نشده بلکه در آن از دکمه‌هایی استفاده شده که براساس کلیک شما واکنش نشان می‌دهند.

این طرح می‌تواند در هر وبسایتی بسته به هر گونه فُرمی به خوبی کار کند.

8. Floating Label Fields

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

در این طرح می‌توانید مثالی از Anton Staroverov را مشاهده کنید که براساس بوت استرپ ایجاد شده است. در این طرح تمام مواردی که شما از برچسب‌های شناور انتظار‌ش را دارید مهیا است، اما قضیه مهم این ماجرا این است که تمام این موارد با بوت استرپ ساخته شده اند.

9. BS4 Starter Template

آیا به دنبال یک راه ساده و سریع برای پیاده سازی یک پروژه مبتنی بر بوت استرپ ۴ می‌گردید؟ پس بهتر است که این قالب آماده را نگاه کنید.

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

10. Navbar With Dropdowns

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

فهرست این طرح مکان ثابتی دارد و همراه با اسکرول شما، آن نیز به پایین می‌آید، پس می‌توانید در هر جای وبسایت به آن دسترسی داشته باشید.

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

در حقیقت چنین حرفی را می‌توان برای تمامی موارد دیگر در این لیست زد.

منبع