BenoService

آکادمی بنو/آموزش Bootstrap

پروژه نهایی Bootstrap

بهنام نوبخت · ۱۴۰۵/۷/۱۲

در مقالات قبلی تقریباً تمام ابزارهای مهم Bootstrap را از سطح مقدماتی تا پیشرفته بررسی کردیم؛ از Container و Grid گرفته تا Flexbox، Typography، Utilities، Forms، Tables، Cards، Navbar، Modal، Offcanvas، Accordion، Carousel، Breadcrumb، Dropdown، Tooltip، Popover، Alerts، Toasts و Progress. همچنین یاد گرفتیم چگونه صفحات واقعی مانند صفحه اصلی، صفحه محصولات، صفحه جزئیات محصول، صفحه ورود و یک پنل مدیریت Responsive طراحی کنیم. در این مقاله می‌خواهیم همه این آموخته‌ها را در قالب یک پروژه نهایی واقعی کنار هم قرار دهیم. پروژه‌ای که در این مقاله طراحی می‌کنیم یک فروشگاه اینترنتی ساده و Responsive است و شامل صفحه اصلی، Header، Hero، دسته‌بندی محصولات، لیست محصولات، فیلتر، صفحه جزئیات محصول، Carousel تصاویر، سبد خرید، فرم ورود و Footer خواهد بود. هدف این پروژه صرفاً نوشتن چند خط HTML نیست؛ بلکه می‌خواهیم فرآیند واقعی ساخت یک رابط کاربری با Bootstrap را یاد بگیریم: ابتدا ساختار پروژه را مشخص می‌کنیم، سپس Layout را با Grid و Flexbox می‌سازیم، Componentها را اضافه می‌کنیم، Responsive Design و RTL را پیاده می‌کنیم و در پایان Accessibility، SEO، Performance و آماده‌سازی برای اتصال به Backend را بررسی می‌کنیم. بعد از انجام این پروژه، شما باید بتوانید Bootstrap را در پروژه‌های واقعی مانند فروشگاه، سایت شرکتی، پنل مدیریت، سامانه خدماتی و بسیاری از پروژه‌های دیگر به کار ببرید.

1. معرفی پروژه نهایی

پروژه ما یک فروشگاه اینترنتی با نام فرضی Beno Store است.

صفحات اصلی پروژه:

Beno Store
│
├── Home
├── Products
├── Product Details
├── Cart
├── Login
└── Register

در نسخه اولیه می‌توانیم این صفحات را داشته باشیم:

index.html
products.html
product-details.html
cart.html
login.html
register.html

2. امکانات پروژه

پروژه نهایی شامل این امکانات ظاهری خواهد بود:

  • Navbar Responsive

  • Hero Section

  • Category Cards

  • Product Cards

  • Badge

  • Buttons

  • Breadcrumb

  • Product Carousel

  • Filter Sidebar

  • Mobile Offcanvas

  • Pagination

  • Accordion

  • Cart Summary

  • Login Form

  • Register Form

  • Alert

  • Modal

  • Responsive Footer

  • RTL Support

در این پروژه Backend نداریم و اطلاعات به‌صورت نمونه قرار می‌گیرند.

در پروژه واقعی این اطلاعات می‌توانند از API دریافت شوند.

3. ساختار پروژه

ساختار پیشنهادی:

beno-store/
│
├── index.html
├── products.html
├── product-details.html
├── cart.html
├── login.html
├── register.html
│
└── assets/
    │
    ├── css/
    │   └── site.css
    │
    ├── js/
    │   └── site.js
    │
    └── images/
        ├── logo.png
        ├── hero.jpg
        ├── product-1.jpg
        ├── product-2.jpg
        └── product-3.jpg

این ساختار برای پروژه آموزشی مناسب است.

4. اتصال Bootstrap

برای صفحات فارسی:

<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css"
    rel="stylesheet">

و برای Componentهای JavaScript:

<script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js">
</script>

همچنین:

<html lang="fa" dir="rtl">

را قرار می‌دهیم.

5. ساخت Header مشترک

Header در تقریباً تمام صفحات پروژه استفاده می‌شود.

<nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">

    <div class="container">

        <a class="navbar-brand fw-bold" href="index.html">
            Beno Store
        </a>

        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#mainNavbar"
            aria-controls="mainNavbar"
            aria-expanded="false"
            aria-label="باز کردن منو">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div
            class="collapse navbar-collapse"
            id="mainNavbar">

            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                <li class="nav-item">

                    <a
                        class="nav-link active"
                        href="index.html">

                        صفحه اصلی

                    </a>

                </li>

                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="products.html">

                        محصولات

                    </a>

                </li>

                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="#">

                        درباره ما

                    </a>

                </li>

                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="#">

                        تماس با ما

                    </a>

                </li>

            </ul>

            <div class="d-flex gap-2">

                <a
                    href="cart.html"
                    class="btn btn-outline-light">

                    سبد خرید

                </a>

                <a
                    href="login.html"
                    class="btn btn-primary">

                    ورود

                </a>

            </div>

        </div>

    </div>

</nav>

6. ساخت Hero

Hero صفحه اصلی:

<section class="py-5 bg-light">

    <div class="container">

        <div class="row align-items-center g-5">

            <div class="col-lg-6">

                <span class="badge text-bg-primary mb-3">
                    فروشگاه آنلاین
                </span>

                <h1 class="display-4 fw-bold">
                    محصولات مورد نیاز خود را آسان‌تر پیدا کنید
                </h1>

                <p class="lead text-secondary my-4">
                    مجموعه‌ای از محصولات منتخب با تجربه خرید
                    ساده، سریع و حرفه‌ای.
                </p>

                <div class="d-flex flex-wrap gap-2">

                    <a
                        href="products.html"
                        class="btn btn-primary btn-lg">

                        مشاهده محصولات

                    </a>

                    <a
                        href="#categories"
                        class="btn btn-outline-secondary btn-lg">

                        دسته‌بندی‌ها

                    </a>

                </div>

            </div>

            <div class="col-lg-6">

                <img
                    src="assets/images/hero.jpg"
                    class="img-fluid rounded-4 shadow"
                    alt="فروشگاه آنلاین">

            </div>

        </div>

    </div>

</section>

7. ساخت دسته‌بندی‌ها

<section id="categories" class="py-5">

    <div class="container">

        <div class="text-center mb-5">

            <h2 class="fw-bold">
                دسته‌بندی محصولات
            </h2>

            <p class="text-secondary">
                محصولات مورد نظر خود را سریع‌تر پیدا کنید.
            </p>

        </div>

        <div class="row g-4">

            <div class="col-12 col-sm-6 col-lg-3">

                <a
                    href="products.html"
                    class="text-decoration-none">

                    <div class="card h-100 text-center">

                        <div class="card-body p-4">

                            <h3 class="h5 text-dark">
                                لپ‌تاپ
                            </h3>

                            <p class="text-secondary mb-0">
                                25 محصول
                            </p>

                        </div>

                    </div>

                </a>

            </div>

            <div class="col-12 col-sm-6 col-lg-3">

                <a
                    href="products.html"
                    class="text-decoration-none">

                    <div class="card h-100 text-center">

                        <div class="card-body p-4">

                            <h3 class="h5 text-dark">
                                موبایل
                            </h3>

                            <p class="text-secondary mb-0">
                                42 محصول
                            </p>

                        </div>

                    </div>

                </a>

            </div>

            <div class="col-12 col-sm-6 col-lg-3">

                <a
                    href="products.html"
                    class="text-decoration-none">

                    <div class="card h-100 text-center">

                        <div class="card-body p-4">

                            <h3 class="h5 text-dark">
                                لوازم جانبی
                            </h3>

                            <p class="text-secondary mb-0">
                                65 محصول
                            </p>

                        </div>

                    </div>

                </a>

            </div>

            <div class="col-12 col-sm-6 col-lg-3">

                <a
                    href="products.html"
                    class="text-decoration-none">

                    <div class="card h-100 text-center">

                        <div class="card-body p-4">

                            <h3 class="h5 text-dark">
                                گجت
                            </h3>

                            <p class="text-secondary mb-0">
                                18 محصول
                            </p>

                        </div>

                    </div>

                </a>

            </div>

        </div>

    </div>

</section>

8. ساخت بخش محصولات ویژه

<section class="py-5 bg-light">

    <div class="container">

        <div class="d-flex justify-content-between
                    align-items-center mb-4">

            <div>

                <h2 class="fw-bold mb-1">
                    محصولات ویژه
                </h2>

                <p class="text-secondary mb-0">
                    برخی از محصولات منتخب فروشگاه
                </p>

            </div>

            <a
                href="products.html"
                class="btn btn-outline-primary">

                مشاهده همه

            </a>

        </div>

        <div class="row g-4">

            <div class="col-12 col-sm-6 col-lg-4">

                <div class="card h-100">

                    <img
                        src="assets/images/product-1.jpg"
                        class="card-img-top"
                        alt="لپ‌تاپ مدل X"
                        loading="lazy">

                    <div class="card-body">

                        <span class="badge text-bg-success mb-2">
                            موجود
                        </span>

                        <h3 class="h5">
                            لپ‌تاپ مدل X
                        </h3>

                        <p class="text-secondary">
                            لپ‌تاپ مناسب استفاده حرفه‌ای.
                        </p>

                        <div
                            class="d-flex justify-content-between
                                   align-items-center">

                            <strong>
                                35,000,000 تومان
                            </strong>

                            <a
                                href="product-details.html"
                                class="btn btn-primary">

                                مشاهده

                            </a>

                        </div>

                    </div>

                </div>

            </div>

            <div class="col-12 col-sm-6 col-lg-4">

                <div class="card h-100">

                    <img
                        src="assets/images/product-2.jpg"
                        class="card-img-top"
                        alt="گوشی مدل Y"
                        loading="lazy">

                    <div class="card-body">

                        <span class="badge text-bg-success mb-2">
                            موجود
                        </span>

                        <h3 class="h5">
                            گوشی مدل Y
                        </h3>

                        <p class="text-secondary">
                            گوشی هوشمند با امکانات متنوع.
                        </p>

                        <div
                            class="d-flex justify-content-between
                                   align-items-center">

                            <strong>
                                28,000,000 تومان
                            </strong>

                            <a
                                href="product-details.html"
                                class="btn btn-primary">

                                مشاهده

                            </a>

                        </div>

                    </div>

                </div>

            </div>

            <div class="col-12 col-sm-6 col-lg-4">

                <div class="card h-100">

                    <img
                        src="assets/images/product-3.jpg"
                        class="card-img-top"
                        alt="هدفون مدل Z"
                        loading="lazy">

                    <div class="card-body">

                        <span class="badge text-bg-warning mb-2">
                            محدود
                        </span>

                        <h3 class="h5">
                            هدفون مدل Z
                        </h3>

                        <p class="text-secondary">
                            هدفون مناسب استفاده روزمره.
                        </p>

                        <div
                            class="d-flex justify-content-between
                                   align-items-center">

                            <strong>
                                4,500,000 تومان
                            </strong>

                            <a
                                href="product-details.html"
                                class="btn btn-primary">

                                مشاهده

                            </a>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

9. Call To Action

<section class="py-5">

    <div class="container">

        <div
            class="bg-dark text-white rounded-4
                   p-4 p-md-5">

            <div class="row align-items-center g-4">

                <div class="col-lg-8">

                    <h2 class="fw-bold">
                        آماده خرید هستید؟
                    </h2>

                    <p class="text-white-50 mb-0">
                        محصولات فروشگاه را مشاهده کنید.
                    </p>

                </div>

                <div class="col-lg-4 text-lg-end">

                    <a
                        href="products.html"
                        class="btn btn-primary btn-lg">

                        مشاهده محصولات

                    </a>

                </div>

            </div>

        </div>

    </div>

</section>

10. Footer

<footer class="bg-dark text-white py-5">

    <div class="container">

        <div class="row g-4">

            <div class="col-md-6 col-lg-4">

                <h2 class="h5">
                    Beno Store
                </h2>

                <p class="text-white-50">
                    فروشگاه آنلاین برای تجربه خرید ساده و سریع.
                </p>

            </div>

            <div class="col-md-6 col-lg-4">

                <h2 class="h5">
                    لینک‌ها
                </h2>

                <ul class="list-unstyled">

                    <li class="mb-2">

                        <a
                            href="index.html"
                            class="text-white text-decoration-none">

                            صفحه اصلی

                        </a>

                    </li>

                    <li class="mb-2">

                        <a
                            href="products.html"
                            class="text-white text-decoration-none">

                            محصولات

                        </a>

                    </li>

                    <li>

                        <a
                            href="cart.html"
                            class="text-white text-decoration-none">

                            سبد خرید

                        </a>

                    </li>

                </ul>

            </div>

            <div class="col-md-6 col-lg-4">

                <h2 class="h5">
                    تماس
                </h2>

                <p class="text-white-50 mb-1">
                    info@example.com
                </p>

                <p class="text-white-50">
                    02112345678
                </p>

            </div>

        </div>

        <hr class="border-secondary">

        <p class="text-center text-white-50 mb-0">
            تمامی حقوق محفوظ است.
        </p>

    </div>

</footer>

11. صفحه اصلی کامل

اکنون همه بخش‌ها را در index.html قرار می‌دهیم.

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1">

    <title>
        Beno Store | فروشگاه آنلاین
    </title>

    <meta
        name="description"
        content="فروشگاه آنلاین Beno Store">

    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css"
        rel="stylesheet">

</head>

<body>

<nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">

    <div class="container">

        <a
            class="navbar-brand fw-bold"
            href="index.html">

            Beno Store

        </a>

        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#mainNavbar"
            aria-controls="mainNavbar"
            aria-expanded="false"
            aria-label="باز کردن منو">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div
            class="collapse navbar-collapse"
            id="mainNavbar">

            <ul
                class="navbar-nav me-auto mb-2 mb-lg-0">

                <li class="nav-item">

                    <a
                        class="nav-link active"
                        href="index.html">

                        صفحه اصلی

                    </a>

                </li>

                <li class="nav-item">

                    <a
                        class="nav-link"
                        href="products.html">

                        محصولات

                    </a>

                </li>

            </ul>

            <div class="d-flex gap-2">

                <a
                    href="cart.html"
                    class="btn btn-outline-light">

                    سبد خرید

                </a>

                <a
                    href="login.html"
                    class="btn btn-primary">

                    ورود

                </a>

            </div>

        </div>

    </div>

</nav>

<main>

    <section class="py-5 bg-light">

        <div class="container">

            <div class="row align-items-center g-5">

                <div class="col-lg-6">

                    <span class="badge text-bg-primary mb-3">
                        فروشگاه آنلاین
                    </span>

                    <h1 class="display-4 fw-bold">
                        محصولات مورد نیاز خود را آسان‌تر پیدا کنید
                    </h1>

                    <p class="lead text-secondary my-4">
                        مجموعه‌ای از محصولات منتخب با تجربه خرید
                        ساده و حرفه‌ای.
                    </p>

                    <div class="d-flex flex-wrap gap-2">

                        <a
                            href="products.html"
                            class="btn btn-primary btn-lg">

                            مشاهده محصولات

                        </a>

                        <a
                            href="#categories"
                            class="btn btn-outline-secondary btn-lg">

                            دسته‌بندی‌ها

                        </a>

                    </div>

                </div>

                <div class="col-lg-6">

                    <img
                        src="assets/images/hero.jpg"
                        class="img-fluid rounded-4 shadow"
                        alt="فروشگاه آنلاین">

                </div>

            </div>

        </div>

    </section>

    <section
        id="categories"
        class="py-5">

        <div class="container">

            <div class="text-center mb-5">

                <h2 class="fw-bold">
                    دسته‌بندی محصولات
                </h2>

                <p class="text-secondary">
                    محصولات مورد نظر خود را پیدا کنید.
                </p>

            </div>

            <div class="row g-4">

                <div class="col-12 col-sm-6 col-lg-3">

                    <a
                        href="products.html"
                        class="text-decoration-none">

                        <div class="card h-100 text-center">

                            <div class="card-body p-4">

                                <h3 class="h5 text-dark">
                                    لپ‌تاپ
                                </h3>

                                <p class="text-secondary mb-0">
                                    25 محصول
                                </p>

                            </div>

                        </div>

                    </a>

                </div>

                <div class="col-12 col-sm-6 col-lg-3">

                    <a
                        href="products.html"
                        class="text-decoration-none">

                        <div class="card h-100 text-center">

                            <div class="card-body p-4">

                                <h3 class="h5 text-dark">
                                    موبایل
                                </h3>

                                <p class="text-secondary mb-0">
                                    42 محصول
                                </p>

                            </div>

                        </div>

                    </a>

                </div>

                <div class="col-12 col-sm-6 col-lg-3">

                    <a
                        href="products.html"
                        class="text-decoration-none">

                        <div class="card h-100 text-center">

                            <div class="card-body p-4">

                                <h3 class="h5 text-dark">
                                    لوازم جانبی
                                </h3>

                                <p class="text-secondary mb-0">
                                    65 محصول
                                </p>

                            </div>

                        </div>

                    </a>

                </div>

                <div class="col-12 col-sm-6 col-lg-3">

                    <a
                        href="products.html"
                        class="text-decoration-none">

                        <div class="card h-100 text-center">

                            <div class="card-body p-4">

                                <h3 class="h5 text-dark">
                                    گجت
                                </h3>

                                <p class="text-secondary mb-0">
                                    18 محصول
                                </p>

                            </div>

                        </div>

                    </a>

                </div>

            </div>

        </div>

    </section>

    <section class="py-5 bg-light">

        <div class="container">

            <div
                class="d-flex justify-content-between
                       align-items-center mb-4">

                <div>

                    <h2 class="fw-bold mb-1">
                        محصولات ویژه
                    </h2>

                    <p class="text-secondary mb-0">
                        محصولات منتخب فروشگاه
                    </p>

                </div>

                <a
                    href="products.html"
                    class="btn btn-outline-primary">

                    مشاهده همه

                </a>

            </div>

            <div class="row g-4">

                <div class="col-12 col-sm-6 col-lg-4">

                    <div class="card h-100">

                        <img
                            src="assets/images/product-1.jpg"
                            class="card-img-top"
                            alt="لپ‌تاپ مدل X"
                            loading="lazy">

                        <div class="card-body">

                            <span class="badge text-bg-success mb-2">
                                موجود
                            </span>

                            <h3 class="h5">
                                لپ‌تاپ مدل X
                            </h3>

                            <p class="text-secondary">
                                لپ‌تاپ مناسب استفاده حرفه‌ای.
                            </p>

                            <div
                                class="d-flex justify-content-between
                                       align-items-center">

                                <strong>
                                    35,000,000 تومان
                                </strong>

                                <a
                                    href="product-details.html"
                                    class="btn btn-primary">

                                    مشاهده

                                </a>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="col-12 col-sm-6 col-lg-4">

                    <div class="card h-100">

                        <img
                            src="assets/images/product-2.jpg"
                            class="card-img-top"
                            alt="گوشی مدل Y"
                            loading="lazy">

                        <div class="card-body">

                            <span class="badge text-bg-success mb-2">
                                موجود
                            </span>

                            <h3 class="h5">
                                گوشی مدل Y
                            </h3>

                            <p class="text-secondary">
                                گوشی هوشمند با امکانات متنوع.
                            </p>

                            <div
                                class="d-flex justify-content-between
                                       align-items-center">

                                <strong>
                                    28,000,000 تومان
                                </strong>

                                <a
                                    href="product-details.html"
                                    class="btn btn-primary">

                                    مشاهده

                                </a>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="col-12 col-sm-6 col-lg-4">

                    <div class="card h-100">

                        <img
                            src="assets/images/product-3.jpg"
                            class="card-img-top"
                            alt="هدفون مدل Z"
                            loading="lazy">

                        <div class="card-body">

                            <span class="badge text-bg-warning mb-2">
                                محدود
                            </span>

                            <h3 class="h5">
                                هدفون مدل Z
                            </h3>

                            <p class="text-secondary">
                                هدفون مناسب استفاده روزمره.
                            </p>

                            <div
                                class="d-flex justify-content-between
                                       align-items-center">

                                <strong>
                                    4,500,000 تومان
                                </strong>

                                <a
                                    href="product-details.html"
                                    class="btn btn-primary">

                                    مشاهده

                                </a>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>

    <section class="py-5">

        <div class="container">

            <div
                class="bg-dark text-white rounded-4
                       p-4 p-md-5">

                <div class="row align-items-center g-4">

                    <div class="col-lg-8">

                        <h2 class="fw-bold">
                            آماده خرید هستید؟
                        </h2>

                        <p class="text-white-50 mb-0">
                            محصولات فروشگاه را مشاهده کنید.
                        </p>

                    </div>

                    <div class="col-lg-4 text-lg-end">

                        <a
                            href="products.html"
                            class="btn btn-primary btn-lg">

                            مشاهده محصولات

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </section>

</main>

<footer class="bg-dark text-white py-5">

    <div class="container">

        <div class="row g-4">

            <div class="col-md-6 col-lg-4">

                <h2 class="h5">
                    Beno Store
                </h2>

                <p class="text-white-50">
                    فروشگاه آنلاین برای تجربه خرید ساده.
                </p>

            </div>

            <div class="col-md-6 col-lg-4">

                <h2 class="h5">
                    لینک‌ها
                </h2>

                <ul class="list-unstyled">

                    <li class="mb-2">

                        <a
                            href="index.html"
                            class="text-white text-decoration-none">

                            صفحه اصلی

                        </a>

                    </li>

                    <li>

                        <a
                            href="products.html"
                            class="text-white text-decoration-none">

                            محصولات

                        </a>

                    </li>

                </ul>

            </div>

            <div class="col-md-6 col-lg-4">

                <h2 class="h5">
                    تماس
                </h2>

                <p class="text-white-50">
                    info@example.com
                </p>

            </div>

        </div>

        <hr class="border-secondary">

        <p class="text-center text-white-50 mb-0">
            تمامی حقوق محفوظ است.
        </p>

    </div>

</footer>

<script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js">
</script>

</body>

</html>

12. ساخت صفحه محصولات

اکنون products.html را ایجاد می‌کنیم.

ساختار:

Header
  ↓
Breadcrumb
  ↓
Title
  ↓
Filters + Products
  ↓
Pagination
  ↓
Footer

Breadcrumb

<nav aria-label="breadcrumb">

    <ol class="breadcrumb">

        <li class="breadcrumb-item">

            <a href="index.html">
                خانه
            </a>

        </li>

        <li
            class="breadcrumb-item active"
            aria-current="page">

            محصولات

        </li>

    </ol>

</nav>

دکمه فیلتر موبایل

<button
    class="btn btn-outline-primary d-lg-none mb-4"
    type="button"
    data-bs-toggle="offcanvas"
    data-bs-target="#filterOffcanvas">

    نمایش فیلترها

</button>

فیلتر دسکتاپ

<aside class="col-lg-3 d-none d-lg-block">

    <div class="card">

        <div class="card-body">

            <h2 class="h5 mb-4">
                فیلتر محصولات
            </h2>

            <div class="mb-4">

                <label
                    for="search"
                    class="form-label">

                    جستجو

                </label>

                <input
                    id="search"
                    type="search"
                    class="form-control"
                    placeholder="نام محصول">

            </div>

            <div class="mb-4">

                <label
                    for="category"
                    class="form-label">

                    دسته‌بندی

                </label>

                <select
                    id="category"
                    class="form-select">

                    <option>
                        همه
                    </option>

                    <option>
                        لپ‌تاپ
                    </option>

                    <option>
                        موبایل
                    </option>

                    <option>
                        لوازم جانبی
                    </option>

                </select>

            </div>

            <button class="btn btn-primary w-100">
                اعمال فیلتر
            </button>

        </div>

    </div>

</aside>

محصولات

<div class="col-lg-9">

    <div class="row g-4">

        <div class="col-12 col-sm-6 col-xl-4">

            <div class="card h-100">

                <img
                    src="assets/images/product-1.jpg"
                    class="card-img-top"
                    alt="لپ‌تاپ مدل X"
                    loading="lazy">

                <div class="card-body">

                    <span class="badge text-bg-success mb-2">
                        موجود
                    </span>

                    <h2 class="h5">
                        لپ‌تاپ مدل X
                    </h2>

                    <p class="text-secondary">
                        محصول مناسب استفاده حرفه‌ای.
                    </p>

                    <strong class="d-block mb-3">
                        35,000,000 تومان
                    </strong>

                    <a
                        href="product-details.html"
                        class="btn btn-primary w-100">

                        مشاهده محصول

                    </a>

                </div>

            </div>

        </div>

        <div class="col-12 col-sm-6 col-xl-4">

            <div class="card h-100">

                <img
                    src="assets/images/product-2.jpg"
                    class="card-img-top"
                    alt="گوشی مدل Y"
                    loading="lazy">

                <div class="card-body">

                    <span class="badge text-bg-success mb-2">
                        موجود
                    </span>

                    <h2 class="h5">
                        گوشی مدل Y
                    </h2>

                    <p class="text-secondary">
                        گوشی هوشمند مدرن.
                    </p>

                    <strong class="d-block mb-3">
                        28,000,000 تومان
                    </strong>

                    <a
                        href="product-details.html"
                        class="btn btn-primary w-100">

                        مشاهده محصول

                    </a>

                </div>

            </div>

        </div>

        <div class="col-12 col-sm-6 col-xl-4">

            <div class="card h-100">

                <img
                    src="assets/images/product-3.jpg"
                    class="card-img-top"
                    alt="هدفون مدل Z"
                    loading="lazy">

                <div class="card-body">

                    <span class="badge text-bg-warning mb-2">
                        محدود
                    </span>

                    <h2 class="h5">
                        هدفون مدل Z
                    </h2>

                    <p class="text-secondary">
                        هدفون مناسب استفاده روزمره.
                    </p>

                    <strong class="d-block mb-3">
                        4,500,000 تومان
                    </strong>

                    <a
                        href="product-details.html"
                        class="btn btn-primary w-100">

                        مشاهده محصول

                    </a>

                </div>

            </div>

        </div>

    </div>

</div>

13. Pagination

در پایین محصولات:

<nav
    class="mt-5"
    aria-label="صفحه محصولات">

    <ul class="pagination justify-content-center">

        <li class="page-item disabled">

            <span class="page-link">
                قبلی
            </span>

        </li>

        <li class="page-item active">

            <a class="page-link" href="#">
                1
            </a>

        </li>

        <li class="page-item">

            <a class="page-link" href="#">
                2
            </a>

        </li>

        <li class="page-item">

            <a class="page-link" href="#">
                3
            </a>

        </li>

        <li class="page-item">

            <a class="page-link" href="#">
                بعدی
            </a>

        </li>

    </ul>

</nav>

14. ساخت Mobile Filter

<div
    class="offcanvas offcanvas-start"
    tabindex="-1"
    id="filterOffcanvas">

    <div class="offcanvas-header">

        <h2 class="offcanvas-title h5">
            فیلتر محصولات
        </h2>

        <button
            type="button"
            class="btn-close"
            data-bs-dismiss="offcanvas">
        </button>

    </div>

    <div class="offcanvas-body">

        <div class="mb-4">

            <label
                for="mobileSearch"
                class="form-label">

                جستجو

            </label>

            <input
                id="mobileSearch"
                type="search"
                class="form-control">

        </div>

        <div class="mb-4">

            <label
                for="mobileCategory"
                class="form-label">

                دسته‌بندی

            </label>

            <select
                id="mobileCategory"
                class="form-select">

                <option>
                    همه
                </option>

                <option>
                    لپ‌تاپ
                </option>

                <option>
                    موبایل
                </option>

            </select>

        </div>

        <button
            class="btn btn-primary w-100"
            data-bs-dismiss="offcanvas">

            اعمال فیلتر

        </button>

    </div>

</div>

15. ساخت صفحه جزئیات محصول

اکنون صفحه مهم دیگری ایجاد می‌کنیم:

product-details.html

ساختار:

Breadcrumb
     ↓
Product Gallery + Product Info
     ↓
Accordion
     ↓
Related Products

Carousel

<div
    id="productCarousel"
    class="carousel slide">

    <div class="carousel-inner rounded">

        <div class="carousel-item active">

            <img
                src="assets/images/product-1.jpg"
                class="d-block w-100"
                alt="تصویر اول محصول">

        </div>

        <div class="carousel-item">

            <img
                src="assets/images/product-2.jpg"
                class="d-block w-100"
                alt="تصویر دوم محصول">

        </div>

        <div class="carousel-item">

            <img
                src="assets/images/product-3.jpg"
                class="d-block w-100"
                alt="تصویر سوم محصول">

        </div>

    </div>

    <button
        class="carousel-control-prev"
        type="button"
        data-bs-target="#productCarousel"
        data-bs-slide="prev">

        <span class="carousel-control-prev-icon"></span>

        <span class="visually-hidden">
            قبلی
        </span>

    </button>

    <button
        class="carousel-control-next"
        type="button"
        data-bs-target="#productCarousel"
        data-bs-slide="next">

        <span class="carousel-control-next-icon"></span>

        <span class="visually-hidden">
            بعدی
        </span>

    </button>

</div>

16. اطلاعات محصول

<div>

    <span class="badge text-bg-success mb-3">
        موجود در انبار
    </span>

    <h1 class="display-6 fw-bold">
        لپ‌تاپ مدل X
    </h1>

    <p class="lead text-secondary">
        یک لپ‌تاپ مناسب برای برنامه‌نویسی،
        کارهای روزمره و استفاده حرفه‌ای.
    </p>

    <div class="fs-2 fw-bold mb-4">
        35,000,000 تومان
    </div>

    <div class="d-flex flex-wrap gap-2">

        <button class="btn btn-primary btn-lg">
            افزودن به سبد خرید
        </button>

        <button class="btn btn-outline-secondary btn-lg">
            افزودن به علاقه‌مندی‌ها
        </button>

    </div>

</div>

17. مشخصات محصول با Accordion

<div
    class="accordion mt-5"
    id="productAccordion">

    <div class="accordion-item">

        <h2 class="accordion-header">

            <button
                class="accordion-button"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#description">

                توضیحات محصول

            </button>

        </h2>

        <div
            id="description"
            class="accordion-collapse collapse show"
            data-bs-parent="#productAccordion">

            <div class="accordion-body">

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

            </div>

        </div>

    </div>

    <div class="accordion-item">

        <h2 class="accordion-header">

            <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#specifications">

                مشخصات فنی

            </button>

        </h2>

        <div
            id="specifications"
            class="accordion-collapse collapse"
            data-bs-parent="#productAccordion">

            <div class="accordion-body">

                <ul class="mb-0">

                    <li>
                        حافظه: 16GB
                    </li>

                    <li>
                        فضای ذخیره‌سازی: 512GB
                    </li>

                    <li>
                        اندازه نمایشگر: 15.6 اینچ
                    </li>

                </ul>

            </div>

        </div>

    </div>

    <div class="accordion-item">

        <h2 class="accordion-header">

            <button
                class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#shipping">

                شرایط ارسال

            </button>

        </h2>

        <div
            id="shipping"
            class="accordion-collapse collapse"
            data-bs-parent="#productAccordion">

            <div class="accordion-body">

                زمان و هزینه ارسال بر اساس مقصد
                و روش انتخابی محاسبه می‌شود.

            </div>

        </div>

    </div>

</div>

18. ساخت سبد خرید

صفحه Cart معمولاً به دو بخش تقسیم می‌شود:

Products
+
Order Summary

Layout:

<div class="row g-4">

    <div class="col-lg-8">
        <!-- Cart Items -->
    </div>

    <div class="col-lg-4">
        <!-- Summary -->
    </div>

</div>

Cart Item

<div class="card mb-3">

    <div class="card-body">

        <div class="row align-items-center g-3">

            <div class="col-4 col-md-2">

                <img
                    src="assets/images/product-1.jpg"
                    class="img-fluid rounded"
                    alt="لپ‌تاپ مدل X">

            </div>

            <div class="col-8 col-md-4">

                <h2 class="h6">
                    لپ‌تاپ مدل X
                </h2>

                <p class="text-secondary mb-0">
                    35,000,000 تومان
                </p>

            </div>

            <div class="col-6 col-md-3">

                <input
                    type="number"
                    class="form-control"
                    value="1"
                    min="1"
                    aria-label="تعداد">

            </div>

            <div class="col-6 col-md-3 text-md-end">

                <button
                    class="btn btn-outline-danger">

                    حذف

                </button>

            </div>

        </div>

    </div>

</div>

19. خلاصه سفارش

<div class="card">

    <div class="card-body">

        <h2 class="h5 mb-4">
            خلاصه سفارش
        </h2>

        <div class="d-flex justify-content-between mb-2">

            <span>
                مجموع محصولات
            </span>

            <strong>
                35,000,000 تومان
            </strong>

        </div>

        <div class="d-flex justify-content-between mb-3">

            <span>
                هزینه ارسال
            </span>

            <strong>
                150,000 تومان
            </strong>

        </div>

        <hr>

        <div class="d-flex justify-content-between mb-4">

            <strong>
                مبلغ نهایی
            </strong>

            <strong>
                35,150,000 تومان
            </strong>

        </div>

        <button
            class="btn btn-primary w-100">

            ادامه پرداخت

        </button>

    </div>

</div>

20. صفحه Login

در پروژه نهایی Login را نیز داریم.

<main class="container">

    <div
        class="row justify-content-center
               align-items-center min-vh-100">

        <div class="col-12 col-sm-10 col-md-7 col-lg-5">

            <div class="card shadow-sm border-0">

                <div class="card-body p-4 p-md-5">

                    <h1 class="h3 fw-bold mb-2">
                        ورود به حساب
                    </h1>

                    <p class="text-secondary mb-4">
                        برای ادامه وارد حساب خود شوید.
                    </p>

                    <form>

                        <div class="mb-3">

                            <label
                                for="email"
                                class="form-label">

                                ایمیل

                            </label>

                            <input
                                id="email"
                                type="email"
                                class="form-control"
                                required>

                        </div>

                        <div class="mb-3">

                            <label
                                for="password"
                                class="form-label">

                                رمز عبور

                            </label>

                            <input
                                id="password"
                                type="password"
                                class="form-control"
                                required>

                        </div>

                        <div class="form-check mb-4">

                            <input
                                id="remember"
                                class="form-check-input"
                                type="checkbox">

                            <label
                                for="remember"
                                class="form-check-label">

                                مرا به خاطر بسپار

                            </label>

                        </div>

                        <button
                            type="submit"
                            class="btn btn-primary w-100">

                            ورود

                        </button>

                    </form>

                    <div class="text-center mt-4">

                        <a href="register.html">
                            ایجاد حساب جدید
                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</main>

21. صفحه Register

برای ثبت‌نام می‌توانیم فرم را با Grid بسازیم:

<form>

    <div class="row g-3">

        <div class="col-md-6">

            <label
                for="firstName"
                class="form-label">

                نام

            </label>

            <input
                id="firstName"
                type="text"
                class="form-control"
                required>

        </div>

        <div class="col-md-6">

            <label
                for="lastName"
                class="form-label">

                نام خانوادگی

            </label>

            <input
                id="lastName"
                type="text"
                class="form-control"
                required>

        </div>

        <div class="col-12">

            <label
                for="registerEmail"
                class="form-label">

                ایمیل

            </label>

            <input
                id="registerEmail"
                type="email"
                class="form-control"
                required>

        </div>

        <div class="col-md-6">

            <label
                for="registerPassword"
                class="form-label">

                رمز عبور

            </label>

            <input
                id="registerPassword"
                type="password"
                class="form-control"
                required>

        </div>

        <div class="col-md-6">

            <label
                for="confirmPassword"
                class="form-label">

                تکرار رمز عبور

            </label>

            <input
                id="confirmPassword"
                type="password"
                class="form-control"
                required>

        </div>

        <div class="col-12">

            <div class="form-check">

                <input
                    id="terms"
                    class="form-check-input"
                    type="checkbox"
                    required>

                <label
                    for="terms"
                    class="form-check-label">

                    قوانین سایت را می‌پذیرم.

                </label>

            </div>

        </div>

        <div class="col-12">

            <button
                type="submit"
                class="btn btn-primary w-100">

                ثبت‌نام

            </button>

        </div>

    </div>

</form>

22. Alert در فرآیند خرید

فرض کنیم پرداخت با موفقیت انجام شده است.

می‌توانیم پیام زیر را نمایش دهیم:

<div
    class="alert alert-success"
    role="alert">

    سفارش شما با موفقیت ثبت شد.

</div>

برای خطا:

<div
    class="alert alert-danger"
    role="alert">

    در ثبت سفارش مشکلی ایجاد شد.

</div>

23. Modal برای حذف محصول از سبد

<button
    class="btn btn-outline-danger"
    data-bs-toggle="modal"
    data-bs-target="#removeModal">

    حذف

</button>

Modal:

<div
    class="modal fade"
    id="removeModal"
    tabindex="-1"
    aria-labelledby="removeModalLabel"
    aria-hidden="true">

    <div
        class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">

                <h2
                    class="modal-title h5"
                    id="removeModalLabel">

                    حذف محصول

                </h2>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal">
                </button>

            </div>

            <div class="modal-body">

                آیا از حذف این محصول اطمینان دارید؟

            </div>

            <div class="modal-footer">

                <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal">

                    انصراف

                </button>

                <button
                    type="button"
                    class="btn btn-danger">

                    حذف

                </button>

            </div>

        </div>

    </div>

</div>

24. استفاده از Toast

برای عملیات موفق:

<div
    class="toast-container position-fixed
           bottom-0 end-0 p-3">

    <div
        id="cartToast"
        class="toast"
        role="alert"
        aria-live="assertive"
        aria-atomic="true">

        <div class="toast-header">

            <strong class="me-auto">
                فروشگاه
            </strong>

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="toast">
            </button>

        </div>

        <div class="toast-body">

            محصول به سبد خرید اضافه شد.

        </div>

    </div>

</div>

برای نمایش با JavaScript:

const toastElement =
    document.getElementById('cartToast');

const toast =
    new bootstrap.Toast(toastElement);

toast.show();

25. سازمان‌دهی CSS

در فایل:

assets/css/site.css

فقط Styleهای اختصاصی خودمان را قرار می‌دهیم.

مثلاً:

.hero-section {
    min-height: 500px;
}

.product-card {
    transition: transform 0.2s ease;
}

.product-card:hover {
    transform: translateY(-4px);
}

.product-image {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

Bootstrap را مستقیماً تغییر نمی‌دهیم.

26. سازمان‌دهی JavaScript

فایل:

assets/js/site.js

می‌تواند شامل منطق اختصاصی پروژه باشد.

مثلاً:

document.addEventListener('DOMContentLoaded', () => {

    const toastElement =
        document.getElementById('cartToast');

    if (toastElement) {

        const toast =
            new bootstrap.Toast(toastElement);

        const buttons =
            document.querySelectorAll('.add-to-cart');

        buttons.forEach(button => {

            button.addEventListener('click', () => {

                toast.show();

            });

        });

    }

});

این کد نمونه‌ای است و در پروژه واقعی باید منطق Cart نیز پیاده‌سازی شود.

27. Bootstrap در کنار Backend

تا اینجا اطلاعات Static بودند.

اما در پروژه واقعی:

User
  ↓
Frontend
  ↓
API
  ↓
Backend
  ↓
Database

برای مثال لیست محصولات می‌تواند از API دریافت شود:

GET /api/products

و پاسخ:

[
    {
        "id": 1,
        "name": "Laptop X",
        "price": 35000000
    },
    {
        "id": 2,
        "name": "Phone Y",
        "price": 28000000
    }
]

سپس Frontend اطلاعات را در Cardها نمایش می‌دهد.

28. Bootstrap در Angular

اگر پروژه با Angular ساخته شود، Bootstrap می‌تواند در Componentها استفاده شود.

مثلاً:

<div class="row g-4">

    <div
        class="col-12 col-md-6 col-lg-4"
        *ngFor="let product of products">

        <div class="card h-100">

            <div class="card-body">

                <h2 class="h5">
                    {{ product.name }}
                </h2>

                <strong>
                    {{ product.price }}
                </strong>

            </div>

        </div>

    </div>

</div>

Angular مسئول داده و Component است و Bootstrap مسئول Styling و Layout.

29. Bootstrap در Next.js

در Next.js نیز Bootstrap می‌تواند برای Layout و UI استفاده شود.

برای مثال یک Component:

components/
    ProductCard
        ProductCard.tsx

و داخل آن می‌توان از کلاس‌های Bootstrap استفاده کرد.

export default function ProductCard() {
    return (
        <div className="card h-100">
            <div className="card-body">
                <h2 className="h5">
                    Product
                </h2>
            </div>
        </div>
    );
}

بنابراین Bootstrap وابسته به یک Backend یا Framework خاص نیست.

30. تست نهایی Responsive

قبل از انتشار پروژه، حداقل این موارد را بررسی کنید.

Mobile

Navbar
Hero
Cards
Forms
Product List
Cart
Footer

Tablet

بررسی کنید:

  • Grid

  • Navigation

  • Forms

  • Product Cards

  • Spacing

Desktop

بررسی کنید:

  • Container width

  • Sidebar

  • Product Grid

  • Header

  • Footer

31. چک‌لیست Accessibility

قبل از انتشار:

  • برای تصاویر alt مناسب قرار دهید.

  • برای Formها label مناسب قرار دهید.

  • Headingها ترتیب منطقی داشته باشند.

  • Button و Link را با کاربرد درست استفاده کنید.

  • برای Modalها عنوان مناسب قرار دهید.

  • برای Navigation از nav استفاده کنید.

  • وضعیت‌ها فقط با رنگ مشخص نشوند.

  • Keyboard Navigation را بررسی کنید.

  • Focus قابل مشاهده باشد.

  • متن‌ها کنتراست مناسبی داشته باشند.

32. چک‌لیست SEO

برای صفحات عمومی:

<title>
    عنوان مناسب صفحه
</title>

و:

<meta
    name="description"
    content="توضیح کوتاه و مرتبط با صفحه">

همچنین:

  • یک H1 مناسب داشته باشید.

  • محتوای واقعی و مفید ارائه کنید.

  • تصاویر Alt مناسب داشته باشند.

  • URLهای معنادار استفاده کنید.

  • صفحات بی‌دلیل محتوای تکراری نداشته باشند.

33. چک‌لیست Performance

برای Performance بهتر:

  • تصاویر را بهینه کنید.

  • تصاویر پایین صفحه را Lazy Load کنید.

  • JavaScript غیرضروری اضافه نکنید.

  • CSS سفارشی را کنترل کنید.

  • فایل‌های مورد نیاز را در Production به شکل مناسب سرو کنید.

  • تعداد درخواست‌های غیرضروری را کاهش دهید.

34. اشتباهات رایج در پروژه نهایی

اشتباه اول: استفاده از Bootstrap بدون درک Grid

فقط حفظ کردن:

col-md-6
col-lg-4

کافی نیست.

باید بدانیم چرا و کجا از آن استفاده می‌کنیم.

اشتباه دوم: ساخت همه چیز با div

از HTML Semantic نیز استفاده کنید:

<header>
<main>
<section>
<article>
<footer>

اشتباه سوم: CSS زیاد

اگر Bootstrap یک Utility مناسب دارد، لازم نیست همیشه CSS جدید بنویسیم.

اشتباه چهارم: وابستگی کامل به Bootstrap

Bootstrap ابزار قدرتمندی است، اما همه نیازهای طراحی را حل نمی‌کند.

گاهی CSS اختصاصی لازم است.

اشتباه پنجم: فراموش کردن موبایل

صفحه باید از ابتدا با رویکرد Mobile First طراحی شود.

35. مهم‌ترین Utilityهایی که باید به خاطر داشته باشید

لازم نیست تمام کلاس‌های Bootstrap را حفظ کنید.

کافی است خانواده‌های مهم را بشناسید:

Container
Grid
Display
Flex
Spacing
Typography
Colors
Borders
Shadows
Position
Sizing
Responsive Utilities

برای مثال:

container
row
col-md-6
d-flex
justify-content-between
align-items-center
gap-3
mt-4
p-3
text-center
fw-bold
text-secondary
bg-light
rounded
shadow

با همین مجموعه می‌توان بخش بزرگی از Layoutهای معمول را ایجاد کرد.

36. نقشه یادگیری بعد از پایان دوره

اکنون که Bootstrap را یاد گرفته‌اید، مسیر بعدی می‌تواند این باشد:

HTML
  ↓
CSS
  ↓
Bootstrap
  ↓
JavaScript
  ↓
Frontend Framework
  ↓
API
  ↓
Database
  ↓
Full Stack Project

Bootstrap جای HTML و CSS را نمی‌گیرد.

بلکه روی آن‌ها ساخته شده است.

37. پروژه نهایی پیشنهادی برای تمرین

اکنون یک پروژه کامل‌تر بسازید:

نام پروژه

فروشگاه آنلاین

صفحات

Home
Products
Product Details
Cart
Login
Register
Profile
Orders

امکانات

Responsive Navbar
Hero
Categories
Product Cards
Filters
Pagination
Carousel
Accordion
Cart
Forms
Alerts
Toast
Modal
Footer

مرحله پیشرفته

بعد از ساخت نسخه HTML:

  1. آن را به JavaScript متصل کنید.

  2. محصولات را از JSON دریافت کنید.

  3. Search را واقعی کنید.

  4. Filter را پیاده‌سازی کنید.

  5. Cart را با JavaScript مدیریت کنید.

  6. Login را به API متصل کنید.

  7. پروژه را به Backend متصل کنید.

38. تمرین نهایی

اکنون بدون کپی کردن مستقیم مثال‌های این مقاله، یک فروشگاه جدید ایجاد کنید.

حداقل باید شامل موارد زیر باشد:

صفحه اصلی

  • Navbar

  • Hero

  • Categories

  • Featured Products

  • CTA

  • Footer

صفحه محصولات

  • Breadcrumb

  • Search

  • Filter

  • Product Cards

  • Pagination

صفحه محصول

  • Breadcrumb

  • Carousel

  • Product Information

  • Accordion

  • Related Products

صفحه سبد خرید

  • Cart Items

  • Quantity

  • Remove

  • Summary

  • Checkout Button

صفحه Login

  • Email

  • Password

  • Remember Me

  • Login

صفحه Register

  • First Name

  • Last Name

  • Email

  • Password

  • Confirm Password

  • Terms

39. چالش نهایی

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

فقط نیازمندی زیر را در اختیار خود قرار دهید:

Build a responsive RTL e-commerce website.

Pages:
Home
Products
Product Details
Cart
Login
Register

Requirements:
Bootstrap
Responsive
RTL
Accessible
SEO-friendly
Mobile-first

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

این تمرین باعث می‌شود به جای حفظ کردن کد، مهارت طراحی و پیاده‌سازی با Bootstrap را یاد بگیرید.

40. جمع‌بندی نهایی دوره Bootstrap

در این دوره از مفاهیم پایه Bootstrap شروع کردیم و قدم‌به‌قدم به ساخت پروژه‌های واقعی رسیدیم. ابتدا با نحوه نصب و استفاده از Bootstrap آشنا شدیم، سپس Container و Grid را یاد گرفتیم و بعد به سراغ Typography، Utilities، Colors، Spacing، Layout، Images، Buttons و Forms رفتیم. در ادامه Componentهای مهم مانند Cards، Navbar، Tables، Modal، Offcanvas، Collapse، Dropdown، Tooltip، Popover، Accordion، Carousel، Breadcrumb، Alert، Toast و Progress را بررسی کردیم. همچنین با Responsive Design، Breakpoints، Flexbox، Grid پیشرفته، RTL و فارسی‌سازی آشنا شدیم و یاد گرفتیم چگونه این ابزارها را در صفحات واقعی مانند Landing Page، فروشگاه و Admin Panel ترکیب کنیم. در این مقاله نیز یک پروژه نهایی فروشگاهی ساختیم تا تمام این مفاهیم را در یک سناریوی واقعی کنار هم قرار دهیم. نکته مهمی که باید بعد از پایان این دوره به خاطر داشته باشید این است که هدف اصلی Bootstrap حفظ کردن تعداد زیادی کلاس نیست؛ بلکه باید بتوانید با شناخت خانواده‌های اصلی کلاس‌ها، ساختار صفحه را تحلیل کنید، Layout مناسب ایجاد کنید، Component مناسب را انتخاب کنید و نتیجه را برای موبایل، تبلت و دسکتاپ آماده کنید. از اینجا به بعد، بهترین روش یادگیری Bootstrap ساخت پروژه‌های واقعی است. هرچه بیشتر پروژه‌هایی مانند فروشگاه، سایت شرکتی، وبلاگ، داشبورد، پنل مدیریت و سامانه‌های مختلف بسازید، انتخاب کلاس‌ها و طراحی Layout برای شما طبیعی‌تر خواهد شد.

پایان دوره Bootstrap

با پایان این مقاله، مجموعه ۲۵ قسمتی Bootstrap به پایان رسید.

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

Bootstrap Basics
      ↓
Layout
      ↓
Utilities
      ↓
Components
      ↓
Responsive Design
      ↓
RTL
      ↓
Real Pages
      ↓
Admin Panel
      ↓
Final Project

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

۲۰

نظرات

کد در دسترس نیست

هنوز نظری ثبت نشده است.