آموزش اسپینر در بوت استرپ بدون نیاز به جاوا اسکریپت

0 دیدگاه

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

نحوه عملکرد اسپینر در بوت استرپ

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

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

ظاهر، اندازه و نحوه قرارگیری اسپینرها به‌سادگی با استفاده از کلاس‌های ابزار کمکی (utility classes) در بوت استرپ قابل تنظیم هستند.

برای رعایت اصول دسترس پذیری (accessibility)، هر اسپینر باید دارای ویژگی role="status" باشد و درون آن از یک عنصر <span class="visually-hidden">Loading...</span> برای نمایش متنی معادل استفاده شود.

ایجاد Border Spinner

برای ایجاد یک اسپینر ساده و کم‌حجم که نقش نماد بارگذاری را ایفا کند، می‌توانید از کلاس .spinner-border استفاده کنید.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Border Spinner</h3>
      <div class="spinner-border mt-2" role="status">
        <span class="spinner-grow text-white spinner-grow-sm" role="status"></span>
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Spinners</title>

</head>

<body>

<h3>Border Spinner</h3>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تعیین رنگ اسپینر در بوت استرپ

Border Spinner از مقدار currentColor برای رنگ حاشیه خود استفاده می‌کند. برای تغییر رنگ اسپینر، می‌توانید از کلاس‌های کمکی مربوط به رنگ متن (text color utilities) استفاده کنید. کافی است این کلاس‌ها را روی اسپینر معمولی اعمال کنید تا رنگ آن مطابق با نیاز شما تنظیم شود.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Colored Spinner</h3>
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-secondary" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-success" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-danger" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-warning" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-info" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-light" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-dark" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Spinners</title>

</head>

<body>

<h3>Colored Spinner</h3>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

چرا از کلاس‌های border-color استفاده نمی‌کنیم؟ در Border Spinner یکی از اضلاع حاشیه به صورت شفاف (transparent) طراحی شده است. زمانی که از کلاس‌های .border-{color} استفاده می‌کنید، این ویژگی خاص اسپینر توسط رنگ جدید بازنویسی می‌شود و دیگر ظاهر چرخشی اسپینر حفظ نمی‌شود.

اسپینر Growing در بوت استرپ

می‌توانید نوع چرخش اسپینر را به حالت “grow” تغییر دهید. این نوع اسپینر از نظر فنی چرخشی ندارد، اما با بزرگ و کوچک شدن پی‌در‌پی، حالت بارگذاری را القا می‌کند.

برای ساخت یک Growing Spinner از کلاس .spinner-grow استفاده کنید.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Growing Spinner</h3>
      <div class="spinner-grow" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Spinners</title>

</head>

<body>

<h3>Growing Spinner</h3>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

این اسپینر از مقدار currentColor استفاده می‌کند تا ظاهر آن با کمک کلاس‌های رنگ متن (text color utilities) قابل تغییر باشد.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Growing color Spinners</h3>
      <div class="spinner-grow text-primary" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-secondary" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-info" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-dark" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-warning" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-success" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-light" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-danger" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Spinners</title>

</head>

<body>

<h3>Growing color Spinners</h3>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تراز بندی اسپینر در بوت استرپ

اسپینرهای بوت استرپ با استفاده از واحد rem، مقدار currentColor و ویژگی display: inline-flex طراحی شده‌اند. به همین دلیل، به‌راحتی می‌توان آن‌ها را تغییر اندازه داد، رنگ‌شان را تنظیم کرد و در موقعیت دلخواه قرار داد.

ایجاد فاصله (Margin)

برای ایجاد فاصله ساده در اطراف اسپینر، می‌توانید از کلاس‌های مربوط به margin مانند .m-4 استفاده کنید.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Margin</h3>
      <div class="spinner-border m-4" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Spinners</title>

</head>

<body>

<h3>Margin</h3>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

موقعیت دهی اسپینر در بوت استرپ

اسپینرهای بوت استرپ را می‌توان با استفاده از کلاس‌های ابزار کمکی Flexbox، کلاس‌های شناورسازی (float utilities)، یا ابزارهای تراز متن (text alignment utilities) در محل مورد نظر قرار داد.

فلکس

برای تعیین موقعیت اسپینرها، از کلاس‌های موقعیت دهی Flexbox استفاده کنید.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="text-center">Flex placement at start, center, end</h5>
      <div class="d-flex justify-content-start">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
      <div class="d-flex justify-content-center">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
      <div class="d-flex justify-content-end">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Spinners</title>

</head>

<body>

<h5 class="text-center">Flex placement at start, center, end</h5>

</div>

</div>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

می‌توانید ترازبندی اسپینر را با استفاده از کلاس‌های موقعیت دهی Flexbox تغییر دهید.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="d-flex align-items-end mt-2">
        <h5 class="text-center">Flex placement</h5>
        <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Spinners</title>

</head>

<body>

<h5 class="text-center">Flex placement</h5>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

شناورسازی (Float)

برای تعیین موقعیت اسپینرها، می‌توانید از کلاس‌های شناورسازی (float placement classes) استفاده کنید.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5>Float placement at start and end</h5>
      <div class="clearfix float-start mt-2">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>

      <div class="clearfix float-end">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Spinners</title>

</head>

<body>

<h5>Float placement at start and end</h5>

</div>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تراز متن (Text Align)

برای موقعیت دهی به آیتم‌های اسپینر، می‌توانید از کلاس‌های تراز متن مانند .text-start، .text-center یا .text-end استفاده کنید.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="text-center">Text Align at start, center, end</h5>
      <div class="text-start">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
      <div class="text-center">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
      <div class="text-end">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Spinners</title>

</head>

<body>

<h5 class="text-center">Text Align at start, center, end</h5>

</div>

</div>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

اندازه اسپینر در بوت استرپ

اندازه اسپینرها را می‌توان برای ایجاد اسپینرهایی در ابعاد مختلف تنظیم کرد.

برای ساخت اسپینرهای کوچک، از کلاس‌های .spinner-border-sm و .spinner-grow-sm استفاده کنید.
برای ساخت اسپینرهای متوسط، از کلاس‌های .spinner-border-md و .spinner-grow-md استفاده کنید.

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="mt-2">Small Size Spinner</h5>
      <div class="spinner-border spinner-border-sm text" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow spinner-grow-sm" role="status">
        <span class="visually-hidden"></span>
      </div>
      <h5 class="mt-2">Medium Size Spinner</h5>
      <div class="spinner-border spinner-border-md" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow spinner-grow-md" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Spinners</title>

</head>

<body>

<h5 class="mt-2">Small Size Spinner</h5>

</div>

</div>

<h5 class="mt-2">Medium Size Spinner</h5>

</div>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

برای تغییر ابعاد اسپینر مطابق نیاز، می‌توانید از CSS سفارشی یا استایل‌های خطی (inline styles) استفاده کنید.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="mt-2">Spinner using custom CSS</h5>
      <div class="spinner-border" style="width: 2rem; height: 2rem;" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow" style="width: 2rem; height: 2rem;" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Spinners</title>

</head>

<body>

<h5 class="mt-2">Spinner using custom CSS</h5>

</div>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

اسپینر در دکمه‌ها

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

برای ساخت یک دکمه با اسپینر، از ترکیب کلاس‌های .btn و .spinner-border استفاده کنید.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="mt-2">Spinner Buttons</h5>
      <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        <span class="visually-hidden"></span>
      </button>
      <button class="btn btn-secondary" type="button" disabled>
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        Wait...
      </button>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Spinners</title>

</head>

<body>

<h5 class="mt-2">Spinner Buttons</h5>

</button>

Wait...

</button>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

برای ساخت دکمه‌های اسپینر از نوع growing، از ترکیب کلاس‌های .btn و .spinner-grow استفاده کنید.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="mt-2">Growing Spinner Buttons</h5>
      <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
        <span class="visually-hidden">Wait...</span>
      </button>
      <button class="btn btn-secondary" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
       Wait...
      </button>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Spinners</title>

</head>

<body>

<h5 class="mt-2">Growing Spinner Buttons</h5>

</button>

Wait...

</button>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

دوره آموزش طراحی وب سایت مدرسه با PHP و MySql

انتشار: ۲۱ خرداد ۱۴۰۴

آموزش اسپینر در بوت استرپ بدون نیاز به جاوا اسکریپت

نحوه عملکرد اسپینر در بوت استرپ

ایجاد Border Spinner

تعیین رنگ اسپینر در بوت استرپ

اسپینر Growing در بوت استرپ

تراز بندی اسپینر در بوت استرپ

ایجاد فاصله (Margin)

موقعیت دهی اسپینر در بوت استرپ

فلکس

شناورسازی (Float)

تراز متن (Text Align)

اندازه اسپینر در بوت استرپ

اسپینر در دکمه‌ها

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط