ساخت صفحات واقعی با Bootstrap

تا اینجا در مقالات قبلی Bootstrap با مفاهیم مختلفی مانند Container، Grid، Typography، Utilities، Buttons، Forms، Tables، Cards، Navbar، Modal، Offcanvas، Accordion، Carousel، Breadcrumb، Alert، Toast، Progress و قابلیت‌های Responsive آشنا شدیم. اما یادگیری Bootstrap زمانی ارزش واقعی پیدا می‌کند که بتوانیم این ابزارها را در کنار یکدیگر قرار دهیم و یک صفحه واقعی و قابل استفاده بسازیم. در این مقاله قرار است از حالت یادگیری تک‌تک Componentها خارج شویم و چند نمونه واقعی مانند صفحه اصلی یک شرکت، صفحه لیست محصولات، صفحه جزئیات محصول و صفحه ورود کاربر را طراحی کنیم. هدف این مقاله این است که یاد بگیریم قبل از نوشتن کد، ساختار صفحه را مشخص کنیم، سپس با Container و Grid Layout را بسازیم، با Utilityها فاصله‌ها و ظاهر را تنظیم کنیم، Componentهای مناسب را اضافه کنیم و در نهایت صفحه را برای موبایل، تبلت و دسکتاپ Responsive و برای زبان فارسی RTL آماده کنیم. همچنین در طول مقاله با نکات مهمی درباره Accessibility، SEO، Performance و سازمان‌دهی فایل‌های پروژه آشنا خواهیم شد.

1. منظور از ساخت یک صفحه واقعی چیست؟

در آموزش‌های قبلی معمولاً هر Component را به‌صورت جداگانه بررسی کردیم.

برای مثال:

<button class="btn btn-primary">
    ثبت سفارش
</button>

یا:

<div class="card">
    <div class="card-body">
        <h5 class="card-title">محصول نمونه</h5>
    </div>
</div>

اما یک وب‌سایت واقعی فقط یک Button یا Card نیست.

یک صفحه واقعی ممکن است ساختاری شبیه این داشته باشد:

Page
 ├── Header
 ├── Hero
 ├── Features
 ├── Content
 ├── Call To Action
 └── Footer

بنابراین باید یاد بگیریم Componentها را چگونه در کنار یکدیگر قرار دهیم.

2. فرآیند ساخت یک صفحه با Bootstrap

یک روش مناسب برای ساخت صفحات واقعی این است که مراحل زیر را دنبال کنیم:

Define Structure
      ↓
Choose Container
      ↓
Create Grid/Flex Layout
      ↓
Add Typography
      ↓
Add Components
      ↓
Make Responsive
      ↓
Add RTL
      ↓
Check Accessibility
      ↓
Test

مرحله اول: ساختار صفحه

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

مثلاً برای یک صفحه اصلی:

Header
Hero
Features
Services
Statistics
Call To Action
Footer

مرحله دوم: انتخاب Container

در بیشتر صفحات از Container برای محدود کردن عرض محتوا استفاده می‌کنیم:

<div class="container">
    ...
</div>

در صفحه‌هایی که قرار است تمام عرض نمایشگر را استفاده کنند:

<div class="container-fluid">
    ...
</div>

مرحله سوم: طراحی Layout

برای Layout معمولاً از Grid یا Flexbox استفاده می‌کنیم.

مثلاً:

<div class="row">
    <div class="col-md-6">
        ...
    </div>

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

مرحله چهارم: Responsive کردن

نباید فقط نسخه دسکتاپ را طراحی کنیم.

مثلاً:

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

یعنی:

• موبایل: یک ستون

• تبلت: دو ستون

• دسکتاپ: سه ستون

3. ساختار پیشنهادی پروژه

اگر با HTML و Bootstrap یک پروژه کوچک بسازیم، می‌توانیم ساختار زیر را داشته باشیم:

bootstrap-project/
│
├── index.html
├── products.html
├── product-details.html
├── login.html
│
└── assets/
    ├── css/
    │   └── site.css
    │
    ├── js/
    │   └── site.js
    │
    └── images/
        ├── logo.png
        ├── product-1.jpg
        ├── product-2.jpg
        └── product-3.jpg

Bootstrap وظیفه ایجاد UI و Layout را بر عهده دارد.

اما Bootstrap خودش سیستم مدیریت صفحات یا Template Engine نیست.

اگر پروژه بزرگ‌تر شود، می‌توانیم Bootstrap را در کنار تکنولوژی‌هایی مانند:

• ASP.NET Core

• Razor Pages

• MVC

• Angular

• React

• Next.js

استفاده کنیم.

4. اتصال Bootstrap به پروژه

برای مثال، در این مقاله از Bootstrap 5.3 استفاده می‌کنیم.

نمونه اتصال CSS:

<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.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">

و بهتر است نسخه RTL Bootstrap را استفاده کنیم:

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

5. پروژه اول: ساخت صفحه اصلی یک شرکت

فرض کنیم می‌خواهیم صفحه اصلی یک شرکت خدمات فناوری ایجاد کنیم.

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

Header
Hero
Features
Services
Statistics
CTA
Footer

6. ساخت Header

ابتدا Navbar را ایجاد می‌کنیم:

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

        <a class="navbar-brand fw-bold" href="#">
            TechCompany
        </a>

        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#mainNavbar">

            <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="#">
                        صفحه اصلی
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#services">
                        خدمات
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#about">
                        درباره ما
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#contact">
                        تماس با ما
                    </a>
                </li>

            </ul>

            <a href="login.html" class="btn btn-primary">
                ورود
            </a>

        </div>
    </div>
</nav>

در حالت دسکتاپ لینک‌ها نمایش داده می‌شوند و در اندازه‌های کوچک‌تر Navbar به منوی بازشونده تبدیل می‌شود.

7. ساخت Hero Section

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="#services"
                       class="btn btn-primary btn-lg">
                        مشاهده خدمات
                    </a>

                    <a href="#contact"
                       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>

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

• Grid

• Typography

• Badge

• Buttons

• Utilities

• Image

• Responsive Design

8. ساخت بخش ویژگی‌ها

اکنون سه ویژگی اصلی شرکت را نمایش می‌دهیم.

<section 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-md-6 col-lg-4">

                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body p-4">

                        <div class="mb-3">
                            <span class="badge text-bg-primary">
                                01
                            </span>
                        </div>

                        <h3 class="h5">
                            طراحی حرفه‌ای
                        </h3>

                        <p class="text-secondary mb-0">
                            طراحی رابط کاربری مدرن و سازگار با
                            دستگاه‌های مختلف.
                        </p>

                    </div>
                </div>

            </div>

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

                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body p-4">

                        <div class="mb-3">
                            <span class="badge text-bg-success">
                                02
                            </span>
                        </div>

                        <h3 class="h5">
                            سرعت مناسب
                        </h3>

                        <p class="text-secondary mb-0">
                            ساخت صفحات سبک و بهینه برای تجربه کاربری بهتر.
                        </p>

                    </div>
                </div>

            </div>

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

                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body p-4">

                        <div class="mb-3">
                            <span class="badge text-bg-warning">
                                03
                            </span>
                        </div>

                        <h3 class="h5">
                            پشتیبانی
                        </h3>

                        <p class="text-secondary mb-0">
                            همراهی در مراحل توسعه و نگهداری پروژه.
                        </p>

                    </div>
                </div>

            </div>

        </div>

    </div>
</section>

نکته مهم در این قسمت:

class="col-12 col-md-6 col-lg-4"

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

9. ساخت بخش خدمات

اکنون می‌توانیم خدمات را نمایش دهیم.

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

    <div class="container">

        <div class="mb-5">

            <h2 class="fw-bold">
                خدمات ما
            </h2>

            <p class="text-secondary">
                مجموعه‌ای از خدمات دیجیتال برای کسب‌وکارها
            </p>

        </div>

        <div class="row g-4">

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

                <div class="card h-100">

                    <div class="card-body">

                        <h3 class="h5">
                            طراحی سایت
                        </h3>

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

                        <a href="#" class="btn btn-outline-primary">
                            جزئیات
                        </a>

                    </div>

                </div>

            </div>

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

                <div class="card h-100">

                    <div class="card-body">

                        <h3 class="h5">
                            طراحی اپلیکیشن
                        </h3>

                        <p class="text-secondary">
                            توسعه اپلیکیشن‌های کاربردی برای کسب‌وکارها.
                        </p>

                        <a href="#" class="btn btn-outline-primary">
                            جزئیات
                        </a>

                    </div>

                </div>

            </div>

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

                <div class="card h-100">

                    <div class="card-body">

                        <h3 class="h5">
                            SEO
                        </h3>

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

                        <a href="#" class="btn btn-outline-primary">
                            جزئیات
                        </a>

                    </div>

                </div>

            </div>

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

                <div class="card h-100">

                    <div class="card-body">

                        <h3 class="h5">
                            مشاوره
                        </h3>

                        <p class="text-secondary">
                            بررسی نیازها و ارائه راهکارهای مناسب.
                        </p>

                        <a href="#" class="btn btn-outline-primary">
                            جزئیات
                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

10. ساخت بخش آمار

Bootstrap به‌راحتی برای ساخت بخش‌های آماری نیز قابل استفاده است.

<section class="py-5">

    <div class="container">

        <div class="row text-center g-4">

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

                <div class="display-6 fw-bold">
                    120+
                </div>

                <div class="text-secondary">
                    پروژه موفق
                </div>

            </div>

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

                <div class="display-6 fw-bold">
                    80+
                </div>

                <div class="text-secondary">
                    مشتری
                </div>

            </div>

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

                <div class="display-6 fw-bold">
                    8
                </div>

                <div class="text-secondary">
                    سال تجربه
                </div>

            </div>

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

                <div class="display-6 fw-bold">
                    24/7
                </div>

                <div class="text-secondary">
                    پشتیبانی
                </div>

            </div>

        </div>

    </div>

</section>

11. ساخت 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="mb-0 text-white-50">
                        برای بررسی نیازهای پروژه با ما در ارتباط باشید.
                    </p>

                </div>

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

                    <a href="#contact"
                       class="btn btn-primary btn-lg">
                        شروع همکاری
                    </a>

                </div>

            </div>

        </div>

    </div>

</section>

12. ساخت Footer

Footer معمولاً شامل اطلاعات شرکت، لینک‌ها و اطلاعات تماس است.

<footer id="contact" 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">
                    TechCompany
                </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="#" class="text-white text-decoration-none">
                            صفحه اصلی
                        </a>
                    </li>

                    <li class="mb-2">
                        <a href="#services"
                           class="text-white text-decoration-none">
                            خدمات
                        </a>
                    </li>

                    <li>
                        <a href="#"
                           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 my-4">

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

    </div>

</footer>

13. نسخه کامل صفحه اصلی

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

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

<head>

    <meta charset="UTF-8">

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

    <title>TechCompany | راهکارهای دیجیتال</title>

    <meta
        name="description"
        content="ارائه خدمات طراحی سایت، اپلیکیشن و راهکارهای دیجیتال">

    <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="#">
            TechCompany
        </a>

        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#mainNavbar">

            <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="#">
                        صفحه اصلی
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#services">
                        خدمات
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#contact">
                        تماس
                    </a>
                </li>

            </ul>

            <a href="login.html"
               class="btn btn-primary">
                ورود
            </a>

        </div>

    </div>

</nav>

<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="#services"
                       class="btn btn-primary btn-lg">
                        مشاهده خدمات
                    </a>

                    <a href="#contact"
                       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 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-md-6 col-lg-4">

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

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

                        <span class="badge text-bg-primary mb-3">
                            01
                        </span>

                        <h3 class="h5">
                            طراحی حرفه‌ای
                        </h3>

                        <p class="text-secondary mb-0">
                            طراحی رابط کاربری مدرن و Responsive.
                        </p>

                    </div>

                </div>

            </div>

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

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

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

                        <span class="badge text-bg-success mb-3">
                            02
                        </span>

                        <h3 class="h5">
                            سرعت مناسب
                        </h3>

                        <p class="text-secondary mb-0">
                            صفحات سبک و بهینه.
                        </p>

                    </div>

                </div>

            </div>

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

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

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

                        <span class="badge text-bg-warning mb-3">
                            03
                        </span>

                        <h3 class="h5">
                            پشتیبانی
                        </h3>

                        <p class="text-secondary mb-0">
                            همراهی در مراحل توسعه پروژه.
                        </p>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

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

    <div class="container">

        <div class="mb-5">

            <h2 class="fw-bold">
                خدمات ما
            </h2>

            <p class="text-secondary">
                خدمات دیجیتال برای کسب‌وکارها
            </p>

        </div>

        <div class="row g-4">

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

                <div class="card h-100">

                    <div class="card-body">

                        <h3 class="h5">
                            طراحی سایت
                        </h3>

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

                        <a href="#"
                           class="btn btn-outline-primary">
                            جزئیات
                        </a>

                    </div>

                </div>

            </div>

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

                <div class="card h-100">

                    <div class="card-body">

                        <h3 class="h5">
                            اپلیکیشن
                        </h3>

                        <p class="text-secondary">
                            توسعه اپلیکیشن‌های کاربردی.
                        </p>

                        <a href="#"
                           class="btn btn-outline-primary">
                            جزئیات
                        </a>

                    </div>

                </div>

            </div>

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

                <div class="card h-100">

                    <div class="card-body">

                        <h3 class="h5">
                            SEO
                        </h3>

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

                        <a href="#"
                           class="btn btn-outline-primary">
                            جزئیات
                        </a>

                    </div>

                </div>

            </div>

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

                <div class="card h-100">

                    <div class="card-body">

                        <h3 class="h5">
                            مشاوره
                        </h3>

                        <p class="text-secondary">
                            مشاوره تخصصی دیجیتال.
                        </p>

                        <a href="#"
                           class="btn btn-outline-primary">
                            جزئیات
                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

<section class="py-5">

    <div class="container">

        <div class="row text-center g-4">

            <div class="col-6 col-lg-3">
                <div class="display-6 fw-bold">120+</div>
                <div class="text-secondary">پروژه</div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="display-6 fw-bold">80+</div>
                <div class="text-secondary">مشتری</div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="display-6 fw-bold">8</div>
                <div class="text-secondary">سال تجربه</div>
            </div>

            <div class="col-6 col-lg-3">
                <div class="display-6 fw-bold">24/7</div>
                <div class="text-secondary">پشتیبانی</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="#contact"
                       class="btn btn-primary btn-lg">
                        شروع همکاری
                    </a>

                </div>

            </div>

        </div>

    </div>

</section>

<footer id="contact" 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">
                    TechCompany
                </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>
                        <a href="#"
                           class="text-white text-decoration-none">
                            صفحه اصلی
                        </a>
                    </li>

                    <li>
                        <a href="#services"
                           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>

14. پروژه دوم: صفحه لیست محصولات

حال یک سناریوی فروشگاهی ایجاد می‌کنیم.

ساختار صفحه:

Header
Breadcrumb
Page Title
Filters + Products
Pagination
Footer

Breadcrumb

<nav aria-label="breadcrumb">

    <ol class="breadcrumb">

        <li class="breadcrumb-item">
            <a href="#">خانه</a>
        </li>

        <li class="breadcrumb-item active"
            aria-current="page">
            محصولات
        </li>

    </ol>

</nav>

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

در دسکتاپ می‌توانیم Sidebar و محصولات را کنار هم قرار دهیم:

<div class="row g-4">

    <aside class="col-lg-3">
        ...
    </aside>

    <main class="col-lg-9">
        ...
    </main>

</div>

در موبایل Sidebar می‌تواند به Offcanvas تبدیل شود.

16. Sidebar فیلتر

<div class="card">

    <div class="card-body">

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

        <div class="mb-4">

            <label class="form-label">
                جستجو
            </label>

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

        </div>

        <div class="mb-4">

            <label class="form-label">
                دسته‌بندی
            </label>

            <select class="form-select">

                <option>
                    همه دسته‌ها
                </option>

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

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

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

            </select>

        </div>

        <div class="mb-4">

            <label class="form-label">
                وضعیت
            </label>

            <div class="form-check">

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

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

                    فقط محصولات موجود

                </label>

            </div>

        </div>

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

    </div>

</div>

17. تبدیل Sidebar به Offcanvas در موبایل

می‌توانیم در موبایل یک Button نمایش دهیم:

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

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

</button>

سپس:

<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">

        <!-- Filter content -->

    </div>

</div>

این یکی از الگوهای بسیار کاربردی در فروشگاه‌های Responsive است.

18. ساخت Product Card

یک کارت محصول می‌تواند به شکل زیر باشد:

<div class="card h-100">

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

    <div class="card-body">

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

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

        <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>

19. نمایش محصولات با Grid

<div class="row g-4">

    <div class="col-12 col-sm-6 col-xl-4">
        <!-- Product Card -->
    </div>

    <div class="col-12 col-sm-6 col-xl-4">
        <!-- Product Card -->
    </div>

    <div class="col-12 col-sm-6 col-xl-4">
        <!-- Product Card -->
    </div>

</div>

در این حالت:

• موبایل: یک محصول

• نمایشگر کوچک: دو محصول

• نمایشگر بزرگ: سه محصول

20. Pagination

برای صفحات محصولات می‌توانیم از Pagination استفاده کنیم:

<nav 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>

21. پروژه سوم: صفحه جزئیات محصول

اکنون یک صفحه جزئیات محصول می‌سازیم.

ساختار:

Breadcrumb
Product Images
Product Information
Price
Status
Actions
Description
FAQ
Related Products

22. 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>

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

<div>

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

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

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

    <div class="fs-3 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>

24. Accordion برای توضیحات محصول

<div class="accordion" 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>

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

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

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

                </ul>

            </div>

        </div>

    </div>

</div>

25. ترکیب صفحه جزئیات محصول

اکنون بخش اصلی صفحه:

<div class="container py-5">

    <nav aria-label="breadcrumb">

        <ol class="breadcrumb">

            <li class="breadcrumb-item">
                <a href="index.html">
                    خانه
                </a>
            </li>

            <li class="breadcrumb-item">
                <a href="products.html">
                    محصولات
                </a>
            </li>

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

                لپ‌تاپ مدل X

            </li>

        </ol>

    </nav>

    <div class="row g-5 mt-2">

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

            <!-- Carousel -->

        </div>

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

            <!-- Product Information -->

        </div>

    </div>

    <section class="mt-5">

        <h2 class="h4 mb-4">
            اطلاعات بیشتر
        </h2>

        <!-- Accordion -->

    </section>

</div>

این Layout یک نمونه بسیار واقعی از ترکیب چند Component Bootstrap است.

26. پروژه چهارم: صفحه Login

صفحه ورود نیز یکی از صفحات متداول هر پروژه است.

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

<head>

    <meta charset="UTF-8">

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

    <title>ورود به حساب کاربری</title>

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

</head>

<body class="bg-light">

<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
                                type="email"
                                class="form-control"
                                id="email"
                                required>

                        </div>

                        <div class="mb-3">

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

                                رمز عبور

                            </label>

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

                        </div>

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

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

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

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

                            </label>

                        </div>

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

                            ورود

                        </button>

                    </form>

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

                        <a href="#">
                            رمز عبور را فراموش کرده‌اید؟
                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</main>

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

</body>

</html>

27. نکته مهم درباره Form و Backend

Bootstrap فقط ظاهر فرم را مدیریت می‌کند.

برای مثال:

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

Bootstrap این Input را زیبا و Responsive می‌کند.

اما بررسی اینکه ایمیل واقعاً در سیستم وجود دارد یا خیر، وظیفه Backend است.

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

Browser
   ↓
Bootstrap Form
   ↓
JavaScript / HTTP Request
   ↓
Backend API
   ↓
Database

بنابراین نباید Bootstrap را با Backend یا سیستم Authentication اشتباه بگیریم.

28. استفاده صحیح از Custom CSS

یکی از اشتباهات رایج این است که Bootstrap را مستقیماً تغییر دهیم.

بهتر است:

Bootstrap
    ↓
Custom CSS

یعنی ابتدا Bootstrap را قرار دهیم:

<link
    href="bootstrap.min.css"
    rel="stylesheet">

و بعد CSS خودمان را اضافه کنیم:

<link
    href="assets/css/site.css"
    rel="stylesheet">

مثلاً:

.hero-section {
    padding-top: 100px;
    padding-bottom: 100px;
}

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

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

بهتر است فایل اصلی Bootstrap را ویرایش نکنیم.

29. چه زمانی از Utility استفاده کنیم؟

اگر فقط نیاز داریم:

<div class="mt-4 mb-3">

نیازی به CSS جدید نیست.

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

مثلاً:

.service-card {
    min-height: 280px;
}

سپس:

<div class="card service-card">

قاعده کلی:

برای تنظیمات ساده از Utilityها استفاده کنید و برای طراحی اختصاصی از CSS خودتان کمک بگیرید.

30. Responsive Design در صفحات واقعی

همیشه صفحه را از موبایل در نظر بگیرید.

مثلاً:

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

بهتر از این است که فقط برای دسکتاپ طراحی کنیم و در انتها تلاش کنیم آن را Responsive کنیم.

همچنین می‌توانیم از:

d-none
d-md-block
d-lg-flex

برای کنترل نمایش عناصر استفاده کنیم.

مثلاً:

<div class="d-none d-lg-block">
    Sidebar
</div>

و برای موبایل:

<button class="btn btn-primary d-lg-none">
    نمایش فیلترها
</button>

31. Accessibility در صفحات واقعی

یک صفحه زیبا لزوماً صفحه قابل دسترسی نیست.

استفاده صحیح از Headingها

بهتر است ساختار منطقی داشته باشیم:

H1
 ├── H2
 │    ├── H3
 │    └── H3
 └── H2
      └── H3

استفاده از Alt برای تصاویر

اشتباه:

<img src="product.jpg">

بهتر:

<img
    src="product.jpg"
    alt="لپ‌تاپ مدل X">

Label برای فرم

بهتر است Label با Input ارتباط داشته باشد:

<label for="email">
    ایمیل
</label>

<input
    id="email"
    type="email">

Button واقعی

برای عملیات از Button استفاده کنید:

<button type="button">
    حذف
</button>

و برای Navigation از Link:

<a href="/products">
    محصولات
</a>

32. نکات SEO برای صفحات Bootstrap

Bootstrap به‌تنهایی باعث بهبود SEO نمی‌شود.

ساختار HTML و محتوای شما اهمیت بیشتری دارد.

برای هر صفحه حداقل به موارد زیر توجه کنید:

Title

<title>
    محصولات | فروشگاه آنلاین
</title>

Description

<meta
    name="description"
    content="مشاهده و خرید محصولات فروشگاه آنلاین">

Heading مناسب

<h1>
    محصولات
</h1>

Alt تصاویر

<img
    src="laptop.jpg"
    alt="لپ‌تاپ مدل X">

HTML معنایی

به جای استفاده بیش از حد از div می‌توانیم از عناصر مناسب استفاده کنیم:

<header>
</header>

<main>
</main>

<section>
</section>

<article>
</article>

<footer>
</footer>

33. بهینه‌سازی تصاویر

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

بهتر است تصاویر را قبل از استفاده بهینه کنیم.

همچنین برای تصاویر پایین صفحه می‌توانیم از Lazy Loading استفاده کنیم:

<img
    src="product.jpg"
    class="img-fluid"
    alt="محصول"
    loading="lazy">

برای تصویر اصلی بالای صفحه، بسته به شرایط، Lazy Loading ممکن است مناسب نباشد.

34. استفاده از CDN یا فایل محلی؟

در محیط توسعه می‌توانیم از CDN استفاده کنیم:

https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/...

مزیت:

• نصب سریع

• راه‌اندازی آسان

• مناسب برای نمونه‌ها و پروژه‌های کوچک

در پروژه‌های Production باید با توجه به معماری پروژه، نیازهای Cache، Build Pipeline و سیاست‌های امنیتی تصمیم بگیریم که CDN یا فایل محلی مناسب‌تر است.

35. جلوگیری از تکرار Header و Footer

اگر چند فایل HTML مستقل داشته باشیم:

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

ممکن است Header و Footer را در هر فایل تکرار کنیم.

برای پروژه‌های ساده مشکلی ندارد.

اما در پروژه‌های بزرگ‌تر بهتر است از سیستم Template یا Component استفاده کنیم.

مثلاً در ASP.NET Core:

Shared
 ├── _Layout.cshtml
 ├── _Header.cshtml
 └── _Footer.cshtml

یا در Next.js:

components/
 ├── Header
 ├── Footer
 └── ProductCard

در این حالت Bootstrap همچنان وظیفه Styling و Responsive UI را بر عهده دارد و تکنولوژی اصلی پروژه وظیفه مدیریت Componentها و صفحات را انجام می‌دهد.

36. تست Responsive صفحه

بعد از ساخت صفحه باید آن را در اندازه‌های مختلف بررسی کنیم.

حداقل این حالت‌ها را بررسی کنید:

Mobile
Tablet
Desktop
Large Desktop

در مرورگر می‌توانیم Developer Tools را باز کنیم و حالت Device Toolbar را فعال کنیم.

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

• آیا متن از صفحه خارج شده است؟

• آیا Buttonها قابل کلیک هستند؟

• آیا Navbar درست کار می‌کند؟

• آیا تصاویر از Container خارج نشده‌اند؟

• آیا Cardها بیش از حد باریک شده‌اند؟

• آیا Sidebar در موبایل مناسب است؟

• آیا فرم‌ها خوانا هستند؟

• آیا فاصله‌ها در موبایل مناسب هستند؟

37. اشتباهات رایج در ساخت صفحات واقعی

اشتباه اول: استفاده بیش از حد از Container

ساختارهایی مانند:

<div class="container">
    <div class="container">
        ...
    </div>
</div>

معمولاً لازم نیستند.

اشتباه دوم: استفاده بی‌دلیل از container-fluid

اگر تمام بخش‌های صفحه را container-fluid کنیم، ممکن است متن روی نمایشگرهای بزرگ بیش از حد کشیده شود.

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

گاهی به جای اصلاح ساختار Grid، Marginهای زیادی اضافه می‌کنیم.

بهتر است ابتدا Layout را اصلاح کنیم.

اشتباه چهارم: طراحی فقط برای Desktop

این کار باعث مشکلات زیادی در موبایل می‌شود.

اشتباه پنجم: استفاده از div برای همه چیز

از عناصر معنایی HTML نیز استفاده کنید.

اشتباه ششم: فراموش کردن Accessibility

رابط کاربری فقط برای کاربران Mouse طراحی نمی‌شود.

اشتباه هفتم: قرار دادن CSS سفارشی قبل از Bootstrap

اگر CSS سفارشی شما قبل از Bootstrap قرار بگیرد، ممکن است Bootstrap قوانین شما را Override کند.

بهتر است:

Bootstrap
Custom CSS

38. یک الگوی حرفه‌ای برای ساخت صفحات

برای هر صفحه جدید می‌توانیم این مراحل را اجرا کنیم:

مرحله 1

ابتدا Wireframe ساده طراحی کنید.

مرحله 2

بخش‌های اصلی را مشخص کنید:

Header
Main
Sections
Footer

مرحله 3

Container مناسب انتخاب کنید.

مرحله 4

Grid و Flexbox را پیاده‌سازی کنید.

مرحله 5

Typography را تنظیم کنید.

مرحله 6

Componentهای Bootstrap را اضافه کنید.

مرحله 7

Responsive Design را پیاده کنید.

مرحله 8

RTL را بررسی کنید.

مرحله 9

Accessibility را بررسی کنید.

مرحله 10

صفحه را در چند اندازه نمایشگر تست کنید.

39. تمرین عملی

تمرین اول: صفحه Landing

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

• Navbar

• Hero

• سه Feature

• چهار Service

• بخش آمار

• CTA

• Footer

صفحه باید کاملاً Responsive باشد.

تمرین دوم: فروشگاه

یک صفحه محصولات ایجاد کنید که شامل:

• Breadcrumb

• Search

• Filter

• Product Cards

• Badge

• Button

• Pagination

باشد.

در دسکتاپ Sidebar و در موبایل Offcanvas استفاده کنید.

تمرین سوم: صفحه محصول

یک صفحه جزئیات محصول بسازید که شامل:

• Breadcrumb

• Carousel

• Product Information

• Price

• Buttons

• Accordion

• Related Products

باشد.

تمرین چهارم: صفحه Login

یک صفحه Login طراحی کنید که شامل:

• Email

• Password

• Remember Me

• Login Button

• Forgot Password

باشد.

تمرین پیشرفته

تمام صفحات تمرین را:

1. RTL کنید.

2. برای موبایل بهینه کنید.

3. Accessibility آن‌ها را بررسی کنید.

4. Title و Description مناسب اضافه کنید.

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

6. Header و Footer را در پروژه واقعی به‌صورت قابل استفاده مجدد پیاده‌سازی کنید.

40. جمع‌بندی

در این مقاله وارد مرحله‌ای شدیم که Bootstrap را در قالب صفحات واقعی وب‌سایت استفاده کردیم. یاد گرفتیم که یک صفحه حرفه‌ای فقط مجموعه‌ای از Componentهای جداگانه نیست، بلکه باید ساختار کلی صفحه، Layout، Responsive Design، Typography، Componentها، Accessibility، SEO و Performance را همزمان در نظر بگیریم. یک صفحه اصلی می‌تواند از Navbar، Hero، Cards، Buttons، Statistics و CTA تشکیل شود، یک فروشگاه می‌تواند از Breadcrumb، Grid، Card، Badge، Offcanvas و Pagination استفاده کند و صفحه جزئیات محصول نیز می‌تواند Carousel، Accordion و فرم‌های مختلف داشته باشد. همچنین متوجه شدیم که Bootstrap وظیفه Styling و Responsive UI را بر عهده دارد و برای مدیریت Componentها، داده‌ها و منطق برنامه باید از تکنولوژی‌هایی مانند ASP.NET Core، Angular، React یا Next.js کمک بگیریم. از این مرحله به بعد، هدف اصلی دیگر حفظ کردن کلاس‌های Bootstrap نیست؛ بلکه باید بتوانیم با انتخاب صحیح ابزارها، یک رابط کاربری واقعی، Responsive، قابل دسترس و قابل نگهداری ایجاد کنیم.