آموزش ساخت کارت محصول ریسپانسیو با Bootstrap 5

آموزش ساخت کارت محصول ریسپانسیو با Bootstrap 5 + سورس کد رایگان

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

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

مراحل ساخت کارت محصول با Bootstrap 5

۱. آماده‌سازی محیط پروژه

ابتدا یک فایل HTML بسازید و کتابخانه‌های مورد نیاز را اضافه کنید:

  • Bootstrap 5 برای استایل‌دهی

  • Font Awesome برای آیکون‌ها

  • فونت فارسی (مثل Vazir)

 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet">

۲. ساختار HTML کارت محصول

درون <body> یک ساختار کارت بسازید که شامل تصویر محصول و اطلاعات آن باشد:

<div class="card product-card">
    <div class="product-img-container">
        <div class="color-options">
            <span class="color-option" style="background-color: #000"></span>
            <span class="color-option" style="background-color: #fff"></span>
            <span class="color-option" style="background-color: rgb(153, 38, 38)"></span>
            <span class="color-option" style="background-color: rgb(18, 112, 189)"></span>
        </div>
        <img src="https://nityasoul.com/wp-content/uploads/2024/03/u.webp" class="product-img"/>
    </div>
    <div class="card-body">
        <h5 class="product-title">تی شرت مردانه آستین کوتاه طرح دار</h5>
        <div class="text-warning mb-2">
            <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
            <i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
            <span class="text-muted small">(4.5)</span>
        </div>
        <div class="mb-2">
            <span class="text-success current-price">400.000 تومان</span>
            <span class="text-muted small old-price">450.000 تومان</span>
        </div>
        <div class="text-danger small mb-2">
            <i class="fas fa-box-open"></i> موجود در انبار
        </div>
        <button class="btn btn-success add-to-cart">
            <i class="fas fa-shopping-cart"></i> افزودن به سبد خرید
        </button>
    </div>
</div>

۳. استایل‌دهی سفارشی (CSS)

برای زیباتر شدن کارت محصول، چند استایل سفارشی اضافه کنید:

body {
    font-family: 'Vazir';
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.product-card {
    max-width: 300px;
    border: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.09);
}
.product-img-container {
    height: 300px;
    position: relative;
}
.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.color-options {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 10px;
    top: 10px;
    gap: 6px;
}
.color-option {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.product-title {
    font-size: 0.95rem;
    font-weight: bold;
}
.current-price {
    font-weight: bold;
}
.old-price {
    text-decoration: line-through;
}
.add-to-cart {
    width: 100%;
}

ویدئوی آموزشی

اگر دوست دارید این آموزش را به‌صورت ویدئویی و کامل مشاهده کنید، این ویدئو را در کانال یوتیوب ما ببینید:

🎥 مشاهده آموزش در یوتیوب

سورس کد کامل پروژه

در ادامه می‌توانید سورس کد کامل این پروژه را مشاهده کرده و مستقیماً در سایت خود استفاده کنید.

<!DOCTYPE html>
<html dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>product card</title>
  
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        body{
            font-family: 'Vazir';
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .product-card{
            max-width: 300px;
            border: none;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.09);
        }

        .product-img-container{
            height: 300px;
        }

        .product-img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .color-options{
            display: flex;
            flex-direction: column;
            position: absolute;
            left: 10px;
            top: 10px;
            gap: 6px;
        }
        .color-option{
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .product-title{
            font-size: 0.95rem;
            font-weight: bold;
        }

        .current-price{
            font-weight: bold;
        }

        .old-price{
            text-decoration: line-through;
        }

        .add-to-cart{
            width: 100%;
        }
    </style>

</head>
<body>

    <div class="card product-card">

        <div class="product-img-container">

            <div class="color-options">
                <span class="color-option" style="background-color: #000"> </span>
                <span class="color-option" style="background-color: #fff"> </span>
                <span class="color-option" style="background-color: rgb(153, 38, 38)"> </span>
                <span class="color-option" style="background-color: rgb(18, 112, 189)"> </span>
            </div>


            <img src="https://nityasoul.com/wp-content/uploads/2024/03/u.webp" class="product-img"/>
        </div>

        <div class="card-body">


            <h5 class="product-title"> تی شرت مردانه آستین کوتاه طرح دار </h5>


            <div class="text-warning mb-2">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star-half-alt"></i>
                <span class="text-muted small"> (4.5) </span>
            </div>

            <div class="mb-2">
                <span class="text-success current-price">
                        400.000  تومان 
                </span>
                <span class="text-muted small old-price">
                    450.000  تومان 
                </span>
            </div>

            <div class="text-danger small mb-2">
                <i class="fas fa-box-open"></i>
                موجود در انبار
            </div>


       <button class="btn btn-success add-to-cart">
        <i class="fas fa-shopping-cart"></i>   
        افزودن به سبد خرید 
       </button>

        </div>

    </div>
     
</body>
</html>

نظر شما؟

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

/0 دیدگاه /توسط
0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *