در این مقاله ما قصد داریم درباره Bootstrap card صحبت کنیم و یک آموزش جامع از استفاده از آن در طراحی قالب و صفحات وب سازمانها و شرکتهای بزرگ داشته باشیم. بوت استرپ محبوب ترین چارچوب HTML، CSS و javascript برای ایجاد سریع صفحات وب و پاسخگو در تلفن همراه است. استفاده از بوت استرپ مزایای بسیاری برای توسعه دهندگان دارد، از جمله موارد زیر:
آخرین نسخه بوت استرپ ویژگیهای جدید و مدرنی مانند پشتیبانی از flexbox و thumbnails و card و ... را پشتیبانی می کند.
بوت استرپ یک کامپوننت UI جدید را برای ایجاد کارت ها معرفی می کند که یک ظرف انعطاف پذیر و شیک برای نمایش محتوا را فراهم می کند. کارت ها با یک ظاهر طراحی شده اند، اما شما می توانید به راحتی آنها را با گزینه های یک ظاهر اضافی گسترش دهید.
بوت استرپ یک کامپوننت UI جدید را برای ایجاد کارت ها معرفی می کند که یک ظرف انعطاف پذیر و شیک برای نمایش محتوا را فراهم می کند. کارت ها با یک ظاهر طراحی شده اند، اما شما می توانید به راحتی آنها را با گزینه مختلف گسترش دهید.
برای اضافه کردن بوت استرپ کافی است به شکل زیر عمل کنید:
برای کارت در طراحی سایت از تگهای زیر استفاده می کنیم:
اینها عناصر اساسی هستند که نقشه جامع اما اساسی را تشکیل می دهند، همانطور که می توانیم از مثال زیر ببینیم:
تصویر زیر یک قالب از Bootstrap card است:
همانطور که مشاهده می شود، کارت عرض کامل ظرف div را می گیرد. به سادگی با تعویض کلاس card-body با card-img-overlay می توانید عکس را به عنوان پوشش استفاده کنید.
اگر بخواهید عکس در زیر head نمایش دهیم از کلاس card-img-bottom در img استفاده می کنیم:
به طور پیشفرض، کارت ها تمام ظرفیت والدین خود را در دسترس قرار می دهند، اما می توانید از کلاس های width و max width برای کنترل اندازه ابعاد کارت استفاده کنید. بنابراین، اجازه دهید مثال قبلی را با کاهش عرض کارت تغییر دهیم:
به طور معمول، ارتفاع کارت به صورت عمودی متناسب با محتوای کارت تنظیم می شود، اما می توانید با height و ابزارهای اندازه گیری بوت استرپ مانند class="card h-200" اندازه های مورد نظر را اعمال کرد.
شما می توانید با افزودن کلاسهای card-header و card-footer در تگهای h و div هدر یا پاورقی ایجاد کنید:
اجازه دهید هدر و پاورقی را به مولفه کارت بوت استرپ اضافه کنیم:
عکس زیر نمونه ای از کد بالاست:
یکی دیگر از ویژگی های خوب بوت استرپ کارت این است که امکان اضافه کردن الگوهای پیشنهادی پیشرفته به بخش هدر، مانند زبانه ها و منو های ناوبری را دارید.
شما با اضافه کردن کلاس nav-tabs و card-header-tabs در ul امکان ایجاد tab را دارید.
