BenoService

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

Accordion، Carousel و Breadcrumb در Bootstrap

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

در طراحی صفحات وب حرفه‌ای، گاهی لازم است حجم زیادی از اطلاعات را بدون شلوغ کردن صفحه در اختیار کاربر قرار دهیم، گاهی به نمایش چند تصویر یا محتوای متوالی نیاز داریم و در بعضی صفحات نیز باید مسیر فعلی کاربر در ساختار سایت مشخص باشد. Bootstrap برای این نیازها کامپوننت‌هایی مانند Accordion، Carousel و Breadcrumb را ارائه می‌کند. Accordion برای ایجاد بخش‌های بازشونده و نمایش یا مخفی کردن محتوا بسیار مناسب است و در صفحات پرسش‌های متداول، تنظیمات و بخش‌های راهنما کاربرد زیادی دارد. Carousel برای نمایش مجموعه‌ای از تصاویر یا محتوا به‌صورت اسلایدی استفاده می‌شود و می‌توان برای آن کنترل، Indicator و قابلیت جابه‌جایی خودکار ایجاد کرد. Breadcrumb نیز مسیر قرارگیری کاربر در ساختار سایت را نشان می‌دهد و به‌خصوص در سایت‌های فروشگاهی، پنل‌های مدیریت و سایت‌های دارای دسته‌بندی‌های متعدد اهمیت زیادی دارد. در این مقاله ابتدا Accordion را از پایه ایجاد می‌کنیم، سپس Carousel را با حالت‌های مختلف بررسی می‌کنیم و در نهایت به سراغ Breadcrumb می‌رویم. در ادامه نیز هر سه کامپوننت را در یک صفحه واقعی و Responsive ترکیب خواهیم کرد و با نکات Accessibility و اشتباهات رایج آن‌ها آشنا می‌شویم.

Accordion چیست؟

Accordion کامپوننتی برای نمایش چند بخش بازشونده است.

در حالت عادی، فقط عنوان بخش‌ها نمایش داده می‌شود و کاربر با کلیک روی یک عنوان، محتوای مربوط به آن را مشاهده می‌کند.

ساختار کلی:

Accordion
├── Section 1
│   └── Content
├── Section 2
│   └── Content
└── Section 3
    └── Content

Accordion برای مواردی مانند موارد زیر بسیار کاربردی است:

  • سوالات متداول

  • راهنمای استفاده

  • تنظیمات

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

  • اطلاعات حساب کاربری

  • مستندات

  • بخش‌های مختلف یک فرم

ساخت Accordion ساده

یک Accordion ساده در Bootstrap از ساختاری مانند زیر تشکیل می‌شود:

<div class="accordion" id="faqAccordion">

    <div class="accordion-item">

        <h2 class="accordion-header">

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

                Bootstrap چیست؟

            </button>

        </h2>

        <div
            id="questionOne"
            class="accordion-collapse collapse show"
            data-bs-parent="#faqAccordion">

            <div class="accordion-body">

                Bootstrap یک Framework برای طراحی رابط کاربری
                Responsive است.

            </div>

        </div>

    </div>

</div>

در این مثال چند کلاس و ویژگی مهم داریم.

accordion

ظرف اصلی Accordion است:

class="accordion"

accordion-item

هر بخش از Accordion با این کلاس مشخص می‌شود:

class="accordion-item"

accordion-header

عنوان هر بخش:

class="accordion-header"

accordion-button

دکمه‌ای که کاربر روی آن کلیک می‌کند:

class="accordion-button"

accordion-collapse

قسمت محتوایی که باز و بسته می‌شود:

class="accordion-collapse collapse"

باز بودن یک بخش در شروع

اگر بخواهیم یک بخش از ابتدا باز باشد، کلاس show را اضافه می‌کنیم:

<div
    class="accordion-collapse collapse show"
    id="questionOne">

بدون show، بخش در ابتدا بسته خواهد بود.

چند بخش در Accordion

اکنون چند سوال به Accordion اضافه کنیم:

<div class="accordion" id="faqAccordion">

    <div class="accordion-item">

        <h2 class="accordion-header">

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

                Bootstrap چیست؟

            </button>

        </h2>

        <div
            id="faqOne"
            class="accordion-collapse collapse show"
            data-bs-parent="#faqAccordion">

            <div class="accordion-body">

                Bootstrap یک Framework محبوب برای طراحی
                رابط کاربری Responsive است.

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

                آیا Bootstrap برای موبایل مناسب است؟

            </button>

        </h2>

        <div
            id="faqTwo"
            class="accordion-collapse collapse"
            data-bs-parent="#faqAccordion">

            <div class="accordion-body">

                بله. Bootstrap از ابتدا با رویکرد
                Responsive و Mobile First طراحی شده است.

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

                آیا Bootstrap فقط برای Frontend است؟

            </button>

        </h2>

        <div
            id="faqThree"
            class="accordion-collapse collapse"
            data-bs-parent="#faqAccordion">

            <div class="accordion-body">

                Bootstrap عمدتاً برای طراحی رابط کاربری
                Frontend استفاده می‌شود.

            </div>

        </div>

    </div>

</div>

data-bs-parent چیست؟

در مثال بالا از این ویژگی استفاده کردیم:

data-bs-parent="#faqAccordion"

این ویژگی باعث می‌شود بخش‌ها مانند یک Accordion واقعی رفتار کنند؛ یعنی در حالت معمول هنگام باز شدن یک بخش، بخش باز قبلی بسته می‌شود.

اگر data-bs-parent را حذف کنیم، می‌توان چند بخش را هم‌زمان باز نگه داشت.

Accordion بدون بسته شدن بخش قبلی

مثلاً:

<div
    id="faqOne"
    class="accordion-collapse collapse">

در این حالت Accordion دیگر به یک Parent برای مدیریت انحصاری بخش‌ها وابسته نیست و می‌توان چند بخش را هم‌زمان باز کرد.

Accordion برای FAQ

یکی از رایج‌ترین کاربردهای Accordion ساخت بخش سوالات متداول است.

<section class="py-5">

    <div class="container">

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

            <h2>
                سوالات متداول
            </h2>

            <p class="text-secondary">
                پاسخ سوالات رایج کاربران
            </p>

        </div>

        <div class="accordion" id="faq">

            <div class="accordion-item">

                <h2 class="accordion-header">

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

                        چگونه ثبت‌نام کنم؟

                    </button>

                </h2>

                <div
                    id="faq1"
                    class="accordion-collapse collapse show"
                    data-bs-parent="#faq">

                    <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="#faq2">

                        چگونه رمز عبور خود را تغییر دهم؟

                    </button>

                </h2>

                <div
                    id="faq2"
                    class="accordion-collapse collapse"
                    data-bs-parent="#faq">

                    <div class="accordion-body">

                        از بخش تنظیمات حساب کاربری می‌توانید
                        رمز عبور خود را تغییر دهید.

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

Carousel چیست؟

Carousel یک اسلایدر برای نمایش مجموعه‌ای از محتواست.

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

  • تصویر

  • Banner

  • تبلیغ

  • معرفی محصول

  • اخبار

  • محتوای ترکیبی

ساختار کلی:

Carousel
├── Slide 1
├── Slide 2
├── Slide 3
├── Previous
├── Next
└── Indicators

ساخت Carousel ساده

نمونه پایه:

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

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img
                src="image-1.jpg"
                class="d-block w-100"
                alt="تصویر اول">

        </div>

        <div class="carousel-item">

            <img
                src="image-2.jpg"
                class="d-block w-100"
                alt="تصویر دوم">

        </div>

        <div class="carousel-item">

            <img
                src="image-3.jpg"
                class="d-block w-100"
                alt="تصویر سوم">

        </div>

    </div>

</div>

نکته مهم این است که یکی از carousel-itemها باید کلاس active داشته باشد:

class="carousel-item active"

این بخش اولین Slide خواهد بود.

دکمه‌های قبلی و بعدی

برای اضافه کردن کنترل‌های Previous و Next:

<button
    class="carousel-control-prev"
    type="button"
    data-bs-target="#mainCarousel"
    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="#mainCarousel"
    data-bs-slide="next">

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

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

</button>

Carousel کامل

اکنون یک Carousel کامل ایجاد می‌کنیم:

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

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img
                src="https://picsum.photos/id/1015/1200/500"
                class="d-block w-100"
                alt="منظره اول">

        </div>

        <div class="carousel-item">

            <img
                src="https://picsum.photos/id/1016/1200/500"
                class="d-block w-100"
                alt="منظره دوم">

        </div>

        <div class="carousel-item">

            <img
                src="https://picsum.photos/id/1018/1200/500"
                class="d-block w-100"
                alt="منظره سوم">

        </div>

    </div>


    <button
        class="carousel-control-prev"
        type="button"
        data-bs-target="#mainCarousel"
        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="#mainCarousel"
        data-bs-slide="next">

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

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

    </button>

</div>

Carousel با Indicator

Indicatorها معمولاً به‌صورت نقاط یا کنترل‌های کوچک در پایین Carousel نمایش داده می‌شوند.

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

    <div class="carousel-indicators">

        <button
            type="button"
            data-bs-target="#mainCarousel"
            data-bs-slide-to="0"
            class="active"
            aria-current="true"
            aria-label="اسلاید اول">
        </button>

        <button
            type="button"
            data-bs-target="#mainCarousel"
            data-bs-slide-to="1"
            aria-label="اسلاید دوم">
        </button>

        <button
            type="button"
            data-bs-target="#mainCarousel"
            data-bs-slide-to="2"
            aria-label="اسلاید سوم">
        </button>

    </div>

    <div class="carousel-inner">

        <div class="carousel-item active">
            <img
                src="image-1.jpg"
                class="d-block w-100"
                alt="تصویر اول">
        </div>

        <div class="carousel-item">
            <img
                src="image-2.jpg"
                class="d-block w-100"
                alt="تصویر دوم">
        </div>

        <div class="carousel-item">
            <img
                src="image-3.jpg"
                class="d-block w-100"
                alt="تصویر سوم">
        </div>

    </div>

</div>

Carousel خودکار

اگر بخواهیم Carousel به‌صورت خودکار بین اسلایدها جابه‌جا شود، می‌توانیم از data-bs-ride استفاده کنیم:

<div
    id="mainCarousel"
    class="carousel slide"
    data-bs-ride="carousel">

برای تعیین زمان جابه‌جایی نیز می‌توان از data-bs-interval استفاده کرد:

<div
    id="mainCarousel"
    class="carousel slide"
    data-bs-ride="carousel"
    data-bs-interval="3000">

عدد 3000 یعنی تقریباً ۳ ثانیه.

Carousel با متن روی تصویر

Carousel فقط برای تصاویر نیست. می‌توان متن را نیز روی تصاویر قرار داد.

برای این کار از carousel-caption استفاده می‌کنیم:

<div class="carousel-item active">

    <img
        src="image.jpg"
        class="d-block w-100"
        alt="محصول جدید">

    <div class="carousel-caption">

        <h2>
            محصول جدید
        </h2>

        <p>
            جدیدترین محصولات ما را مشاهده کنید.
        </p>

        <a
            href="#"
            class="btn btn-primary">
            مشاهده محصولات
        </a>

    </div>

</div>

Carousel در طراحی Responsive

یکی از مشکلات رایج این است که تصاویر Carousel در موبایل بیش از حد بلند یا نامناسب دیده شوند.

می‌توان با CSS و object-fit کنترل بیشتری ایجاد کرد:

<img
    src="image.jpg"
    class="d-block w-100"
    style="height: 450px; object-fit: cover;"
    alt="Banner">

اما برای پروژه‌های واقعی بهتر است اندازه و نسبت تصویر را با توجه به طراحی و اندازه صفحه تنظیم کنیم.

Carousel با JavaScript

مانند بسیاری از کامپوننت‌های Bootstrap، Carousel نیز API جاوااسکریپتی دارد.

const carouselElement =
    document.getElementById("mainCarousel");

const carousel =
    bootstrap.Carousel.getOrCreateInstance(
        carouselElement
    );

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

carousel.to(2);

اسلاید بعدی:

carousel.next();

اسلاید قبلی:

carousel.prev();

متوقف کردن:

carousel.pause();

ادامه دادن:

carousel.cycle();

Eventهای Carousel

Bootstrap برای Carousel رویدادهایی ارائه می‌کند.

یکی از آن‌ها:

slid.bs.carousel

است.

مثال:

const carouselElement =
    document.getElementById("mainCarousel");

carouselElement.addEventListener(
    "slid.bs.carousel",
    function () {

        console.log(
            "Slide changed"
        );

    }
);

Breadcrumb چیست؟

Breadcrumb مسیری است که جایگاه فعلی کاربر را در ساختار سایت نمایش می‌دهد.

برای مثال:

خانه > محصولات > لپ‌تاپ > لپ‌تاپ گیمینگ

کاربر با مشاهده این مسیر متوجه می‌شود در کدام قسمت سایت قرار دارد.

Breadcrumb در موارد زیر بسیار کاربردی است:

  • فروشگاه اینترنتی

  • سایت‌های خبری

  • مستندات

  • پنل مدیریت

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

  • وبلاگ

ساخت Breadcrumb ساده

Bootstrap برای Breadcrumb کلاس‌های مشخصی دارد.

<nav aria-label="breadcrumb">

    <ol class="breadcrumb">

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

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

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

            لپ‌تاپ

        </li>

    </ol>

</nav>

ساختار Breadcrumb

سه کلاس مهم داریم:

breadcrumb
breadcrumb-item
active

breadcrumb ظرف اصلی است.

breadcrumb-item هر مرحله از مسیر را مشخص می‌کند.

و active صفحه فعلی را مشخص می‌کند.

Breadcrumb در صفحه محصول

مثلاً در یک فروشگاه:

<nav aria-label="breadcrumb">

    <ol class="breadcrumb">

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

        <li class="breadcrumb-item">
            <a href="#">
                فروشگاه
            </a>
        </li>

        <li class="breadcrumb-item">
            <a href="#">
                لپ‌تاپ
            </a>
        </li>

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

            Laptop Pro 15

        </li>

    </ol>

</nav>

آخرین قسمت معمولاً صفحه فعلی است و لینک ندارد.

تغییر جداکننده Breadcrumb

Bootstrap امکان شخصی‌سازی جداکننده Breadcrumb را با CSS فراهم می‌کند.

برای مثال:

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
}

یا:

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
}

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

Breadcrumb در حالت RTL

برای یک صفحه فارسی:

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

سپس Breadcrumb نیز به‌صورت طبیعی از ساختار RTL صفحه پیروی خواهد کرد.

مثال:

<nav aria-label="مسیر صفحه">

    <ol class="breadcrumb">

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

        <li class="breadcrumb-item">
            <a href="#">
                آموزش
            </a>
        </li>

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

            Bootstrap

        </li>

    </ol>

</nav>

ترکیب Breadcrumb و Card

در صفحات واقعی می‌توان Breadcrumb را بالای محتوای اصلی قرار داد:

<div class="container py-4">

    <nav aria-label="breadcrumb">

        <ol class="breadcrumb">

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

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

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

                محصول

            </li>

        </ol>

    </nav>

    <div class="card">

        <div class="card-body">

            <h1 class="h3">
                نام محصول
            </h1>

            <p>
                توضیحات محصول در این قسمت قرار می‌گیرد.
            </p>

        </div>

    </div>

</div>

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

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

ساختار:

Page
├── Breadcrumb
├── Carousel
├── Product Information
└── FAQ Accordion

نمونه:

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

    <main class="container py-4">

        <!-- Breadcrumb -->

        <nav aria-label="breadcrumb">

            <ol class="breadcrumb">

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

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

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

                    محصول ویژه

                </li>

            </ol>

        </nav>


        <!-- Product Carousel -->

        <div
            id="productCarousel"
            class="carousel slide mb-5"
            data-bs-ride="carousel">

            <div class="carousel-indicators">

                <button
                    type="button"
                    data-bs-target="#productCarousel"
                    data-bs-slide-to="0"
                    class="active"
                    aria-current="true"
                    aria-label="تصویر اول">
                </button>

                <button
                    type="button"
                    data-bs-target="#productCarousel"
                    data-bs-slide-to="1"
                    aria-label="تصویر دوم">
                </button>

                <button
                    type="button"
                    data-bs-target="#productCarousel"
                    data-bs-slide-to="2"
                    aria-label="تصویر سوم">
                </button>

            </div>


            <div class="carousel-inner">

                <div class="carousel-item active">

                    <img
                        src="https://picsum.photos/id/1/1200/500"
                        class="d-block w-100"
                        alt="تصویر اول محصول">

                </div>

                <div class="carousel-item">

                    <img
                        src="https://picsum.photos/id/2/1200/500"
                        class="d-block w-100"
                        alt="تصویر دوم محصول">

                </div>

                <div class="carousel-item">

                    <img
                        src="https://picsum.photos/id/3/1200/500"
                        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>


        <!-- Product Information -->

        <div class="card mb-5">

            <div class="card-body">

                <h1 class="h3">
                    محصول ویژه
                </h1>

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

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

                    <strong class="fs-4">
                        ۱۵,۰۰۰,۰۰۰ تومان
                    </strong>

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

                </div>

            </div>

        </div>


        <!-- FAQ -->

        <section>

            <h2 class="h4 mb-3">
                سوالات متداول
            </h2>

            <div
                class="accordion"
                id="productFaq">

                <div class="accordion-item">

                    <h2 class="accordion-header">

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

                            آیا محصول گارانتی دارد؟

                        </button>

                    </h2>

                    <div
                        id="answerOne"
                        class="accordion-collapse collapse show"
                        data-bs-parent="#productFaq">

                        <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="#answerTwo">

                            زمان ارسال محصول چقدر است؟

                        </button>

                    </h2>

                    <div
                        id="answerTwo"
                        class="accordion-collapse collapse"
                        data-bs-parent="#productFaq">

                        <div class="accordion-body">

                            سفارش پس از تأیید پرداخت
                            برای ارسال آماده می‌شود.

                        </div>

                    </div>

                </div>

            </div>

        </section>

    </main>


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

</body>

</html>

Accessibility در Accordion

Accordion باید به شکلی طراحی شود که کاربران مختلف بتوانند با آن کار کنند.

Bootstrap بسیاری از ویژگی‌های موردنیاز را در ساختار خود در نظر گرفته است.

برای مثال:

aria-expanded="true"

نشان‌دهنده وضعیت باز بودن بخش است.

و:

aria-controls="faqOne"

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

همچنین بهتر است عنوان Accordion با Heading مناسب ساخته شود:

<h2 class="accordion-header">

Accessibility در Carousel

برای تصاویر حتماً alt مناسب تعیین کنید:

<img
    src="product.jpg"
    alt="نمای جلوی محصول">

همچنین برای کنترل‌های Previous و Next بهتر است متن قابل دسترس وجود داشته باشد:

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

اگر Carousel حاوی اطلاعات مهم است، بهتر است کنترل کامل در اختیار کاربر باشد و جابه‌جایی خودکار باعث دشواری در مطالعه محتوا نشود.

Accessibility در Breadcrumb

برای Breadcrumb استفاده از:

<nav aria-label="breadcrumb">

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

صفحه فعلی نیز بهتر است با:

aria-current="page"

مشخص شود.

اشتباهات رایج

1. استفاده از ID تکراری

هر Accordion یا Carousel باید IDهای مناسب و منحصربه‌فرد داشته باشد.

اشتباه:

id="item"

برای چند عنصر مختلف.

درست:

id="faqOne"
id="faqTwo"
id="faqThree"

2. فراموش کردن active در Carousel

حداقل یک Slide باید در ابتدا active باشد.

<div class="carousel-item active">

3. فراموش کردن Bootstrap JavaScript

Accordion و Carousel از قابلیت‌های JavaScript Bootstrap استفاده می‌کنند.

بنابراین باید Bundle را اضافه کنیم:

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

4. استفاده بیش از حد از Carousel

Carousel همیشه بهترین راه نمایش محتوا نیست.

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

5. استفاده از Breadcrumb برای Navigation اصلی

Breadcrumb جایگزین Navbar یا منوی اصلی سایت نیست.

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

6. قرار دادن متن زیاد داخل Carousel

اسلایدهای شلوغ معمولاً تجربه کاربری خوبی ایجاد نمی‌کنند.

بهتر است هر Slide یک پیام مشخص داشته باشد.

تمرین عملی

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

  1. عنوان «سوالات متداول»

  2. حداقل ۶ سوال

  3. استفاده از Accordion

  4. اولین سوال از ابتدا باز باشد.

  5. فقط یک سوال در هر لحظه باز باشد.

  6. صفحه RTL باشد.

  7. برای صفحه Breadcrumb ایجاد کنید.

  8. صفحه را Responsive طراحی کنید.

تمرین دوم

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

  • Breadcrumb

  • Carousel با حداقل ۴ تصویر

  • Indicator

  • Previous و Next

  • جابه‌جایی خودکار

  • عنوان محصول

  • قیمت

  • دکمه خرید

  • Accordion برای مشخصات

  • Accordion برای سوالات متداول

باشد.

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

یک صفحه فروشگاه واقعی طراحی کنید:

Home
 └── Products
      └── Category
           └── Product

در این صفحه:

  • Breadcrumb مسیر بالا را نمایش دهد.

  • Carousel تصاویر محصول را نمایش دهد.

  • مشخصات محصول در Card قرار گیرد.

  • FAQ با Accordion ساخته شود.

  • Carousel دارای کنترل دستی باشد.

  • Carousel به‌صورت خودکار نیز حرکت کند.

  • تمام عناصر RTL باشند.

  • صفحه در موبایل، تبلت و دسکتاپ Responsive باشد.

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

  • ساختار Headingها صحیح باشد.

جمع‌بندی

در این مقاله با سه کامپوننت مهم Bootstrap آشنا شدیم. Accordion برای نمایش و مخفی کردن بخش‌های مختلف محتوا بسیار مناسب است و در FAQ، راهنماها و تنظیمات کاربرد زیادی دارد. Carousel امکان نمایش تصاویر و محتوای متوالی را فراهم می‌کند و می‌توان برای آن Indicator، کنترل قبلی و بعدی و جابه‌جایی خودکار ایجاد کرد. Breadcrumb نیز مسیر فعلی کاربر را در ساختار سایت نمایش می‌دهد و به Navigation بهتر در سایت‌های دارای ساختار چندسطحی کمک می‌کند. همچنین یاد گرفتیم چگونه این کامپوننت‌ها را در صفحات RTL، Responsive و واقعی با یکدیگر ترکیب کنیم و با استفاده از ویژگی‌های Accessibility تجربه بهتری برای کاربران ایجاد کنیم.

در مقاله بعدی سراغ Navbar حرفه‌ای و ساخت Header خواهیم رفت و یاد می‌گیریم چگونه یک Header کامل، Responsive، RTL و مناسب پروژه‌های واقعی با Bootstrap طراحی کنیم.

۰۰

نظرات

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

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