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

JavaScript Components در Bootstrap

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

تا اینجا بیشتر با بخش‌هایی از Bootstrap کار کردیم که ظاهر عناصر صفحه را کنترل می‌کردند؛ مانند Grid، Button، Form، Table، Card و Navigation. اما بسیاری از رابط‌های کاربری مدرن فقط به ظاهر ثابت نیاز ندارند و باید بتوانند به تعامل کاربر پاسخ دهند. برای مثال، ممکن است بخواهیم با کلیک روی یک دکمه یک پنجره باز شود، یک منو نمایش داده شود، یک بخش از صفحه باز و بسته شود، یک پیام برای چند ثانیه ظاهر شود یا هنگام قرار گرفتن ماوس روی یک عنصر، توضیحی نمایش داده شود. Bootstrap برای بسیاری از این نیازها JavaScript Componentهای آماده دارد. این Componentها معمولاً همراه با HTML و کلاس‌های Bootstrap استفاده می‌شوند و بدون اینکه مجبور باشیم برای هر رفتار ساده JavaScript زیادی بنویسیم، قابلیت‌های تعاملی در اختیار ما قرار می‌دهند. در این مقاله با نحوه فعال‌سازی JavaScript Bootstrap، مفهوم Data Attributes، Componentهای تعاملی مهم، روش باز و بسته کردن آنها و نکات مهم استفاده از آنها آشنا می‌شویم.

JavaScript در Bootstrap چه کاری انجام می‌دهد؟

Bootstrap از دو بخش اصلی تشکیل می‌شود:

Bootstrap CSS
      ↓
Appearance

Bootstrap JavaScript
      ↓
Interaction

CSS مسئول مواردی مانند:

  • رنگ

  • فاصله

  • اندازه

  • Layout

  • Responsive Design

  • ظاهر Componentها

است.

JavaScript برای رفتارهای تعاملی Componentهایی مانند:

  • Modal

  • Dropdown

  • Collapse

  • Offcanvas

  • Carousel

  • Toast

  • Tooltip

  • Popover

استفاده می‌شود.

آیا همه Componentهای Bootstrap به JavaScript نیاز دارند؟

خیر.

برای مثال Card:

<div class="card">
    <div class="card-body">
        محتوای کارت
    </div>
</div>

برای نمایش ظاهر Card نیازی به JavaScript ندارد.

اما یک Modal:

<div class="modal">

برای باز و بسته شدن تعاملی به JavaScript نیاز دارد.

بنابراین باید بدانیم کدام Componentها صرفاً CSS هستند و کدام Componentها رفتار JavaScript دارند.

نصب JavaScript Bootstrap

اگر از CDN استفاده می‌کنید، یکی از ساده‌ترین روش‌ها استفاده از Bootstrap Bundle است.

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

bundle شامل Popper نیز می‌شود و برای Componentهایی مانند Dropdown، Tooltip و Popover مورد نیاز است.

بهتر است این Script را قبل از بسته شدن body قرار دهید:

<body>

    <!-- Page Content -->

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

</body>

Data Attributes چیست؟

یکی از ویژگی‌های مهم Bootstrap این است که بسیاری از رفتارهای JavaScript را می‌توان با data-bs-* کنترل کرد.

برای مثال:

data-bs-toggle="modal"

به Bootstrap می‌گوید این عنصر با یک Modal ارتباط دارد.

یا:

data-bs-toggle="dropdown"

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

در Bootstrap 5 باید از پیشوند:

data-bs-

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

در Bootstrap 4 از data-*های متفاوتی استفاده می‌شد، بنابراین هنگام استفاده از آموزش‌های قدیمی باید به نسخه Bootstrap توجه کنید.

Modal چیست؟

Modal یک پنجره تعاملی است که روی محتوای اصلی صفحه نمایش داده می‌شود.

برای مثال می‌توان از Modal برای:

  • نمایش اطلاعات

  • تأیید حذف

  • فرم ورود

  • فرم ثبت‌نام

  • نمایش جزئیات

  • نمایش تصویر

  • پیام مهم

استفاده کرد.

ساخت یک Modal ساده

ابتدا یک Button ایجاد می‌کنیم:

<button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="modal"
    data-bs-target="#exampleModal">

    نمایش Modal

</button>

حالا Modal را ایجاد می‌کنیم:

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

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h1
                    class="modal-title fs-5"
                    id="exampleModalLabel">

                    عنوان Modal

                </h1>

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

            </div>

            <div class="modal-body">

                این متن داخل Modal قرار دارد.

            </div>

            <div class="modal-footer">

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

                    بستن

                </button>

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

                    ذخیره

                </button>

            </div>

        </div>

    </div>

</div>

اکنون با کلیک روی Button، Modal باز می‌شود.

ساختار Modal

ساختار اصلی Modal را بهتر است به خاطر بسپارید:

Modal
 └── Modal Dialog
      └── Modal Content
           ├── Modal Header
           ├── Modal Body
           └── Modal Footer

هر بخش وظیفه مشخصی دارد.

Modal Header

بخش Header معمولاً شامل عنوان و دکمه Close است.

<div class="modal-header">

    <h1 class="modal-title fs-5">
        عنوان
    </h1>

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

</div>

Modal Body

محتوای اصلی در modal-body قرار می‌گیرد.

<div class="modal-body">

    <p>
        این محتوای Modal است.
    </p>

</div>

می‌توان داخل آن Form، تصویر، جدول یا هر محتوای HTML دیگری قرار داد.

Modal Footer

Footer معمولاً برای Actionها استفاده می‌شود.

<div class="modal-footer">

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

        بستن

    </button>

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

        ذخیره

    </button>

</div>

Modal برای تأیید حذف

یکی از کاربردهای بسیار رایج Modal در پنل‌های مدیریت، تأیید حذف است.

<button
    type="button"
    class="btn btn-danger"
    data-bs-toggle="modal"
    data-bs-target="#deleteModal">

    حذف

</button>

Modal:

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

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h1
                    class="modal-title fs-5"
                    id="deleteModalLabel">

                    حذف محصول

                </h1>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close">
                </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>

در یک پروژه واقعی، Button حذف می‌تواند بعداً با JavaScript یا یک Framework مانند Angular به API متصل شود.

اندازه Modal

Bootstrap اندازه‌های مختلفی برای Modal دارد.

مثلاً:

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

برای Modal کوچک.

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

برای Modal بزرگ.

و:

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

برای Modal بسیار بزرگ.

همچنین:

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

برای نمایش Modal در حالت Fullscreen استفاده می‌شود.

Modal Responsive Fullscreen

Bootstrap امکان Fullscreen شدن Modal بر اساس Breakpoint را نیز فراهم می‌کند.

مثلاً:

<div class="modal-dialog modal-fullscreen-md-down">

در این حالت Modal در اندازه‌های کوچک‌تر یا مساوی md به صورت Fullscreen نمایش داده می‌شود.

Dropdown

Dropdown یک منوی بازشونده است.

برای مثال:

<div class="dropdown">

    <button
        class="btn btn-primary dropdown-toggle"
        type="button"
        data-bs-toggle="dropdown"
        aria-expanded="false">

        منو

    </button>

    <ul class="dropdown-menu">

        <li>
            <a class="dropdown-item" href="#">
                گزینه اول
            </a>
        </li>

        <li>
            <a class="dropdown-item" href="#">
                گزینه دوم
            </a>
        </li>

        <li>
            <a class="dropdown-item" href="#">
                گزینه سوم
            </a>
        </li>

    </ul>

</div>

با کلیک روی Button، Dropdown باز می‌شود.

Dropdown در Navbar

Dropdown یکی از Componentهای رایج داخل Navbar است.

<li class="nav-item dropdown">

    <a
        class="nav-link dropdown-toggle"
        href="#"
        role="button"
        data-bs-toggle="dropdown"
        aria-expanded="false">

        حساب کاربری

    </a>

    <ul class="dropdown-menu">

        <li>
            <a class="dropdown-item" href="#">
                پروفایل
            </a>
        </li>

        <li>
            <a class="dropdown-item" href="#">
                تنظیمات
            </a>
        </li>

        <li>
            <hr class="dropdown-divider">
        </li>

        <li>
            <a class="dropdown-item" href="#">
                خروج
            </a>
        </li>

    </ul>

</li>

Dropdown عنوان‌دار

می‌توانیم برای گروهی از گزینه‌ها عنوان قرار دهیم.

<ul class="dropdown-menu">

    <li>
        <h6 class="dropdown-header">
            حساب کاربری
        </h6>
    </li>

    <li>
        <a class="dropdown-item" href="#">
            پروفایل
        </a>
    </li>

    <li>
        <a class="dropdown-item" href="#">
            تنظیمات
        </a>
    </li>

</ul>

Collapse

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

مثلاً:

<button
    class="btn btn-primary"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#collapseExample"
    aria-expanded="false"
    aria-controls="collapseExample">

    نمایش محتوا

</button>

<div class="collapse mt-3" id="collapseExample">

    <div class="card card-body">

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

    </div>

</div>

با کلیک روی دکمه، بخش Collapse باز و بسته می‌شود.

کاربرد Collapse

Collapse برای مواردی مانند:

  • FAQ

  • بخش توضیحات

  • منوی موبایل

  • نمایش جزئیات

  • پنل‌های بازشونده

مناسب است.

Collapse در Navbar

در مقاله قبلی دیدیم که Navbar Responsive از Collapse استفاده می‌کند.

مثلاً:

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

و Button:

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

ارتباط این دو عنصر با:

data-bs-target
      ↓
#mainNavbar
      ↓
id="mainNavbar"

ایجاد می‌شود.

Offcanvas

Offcanvas یک پنل است که معمولاً از کنار صفحه وارد می‌شود.

این Component برای:

  • منوی موبایل

  • Sidebar

  • تنظیمات

  • فیلترها

  • پنل کاربری

بسیار کاربردی است.

ساخت یک Offcanvas:

<button
    class="btn btn-primary"
    type="button"
    data-bs-toggle="offcanvas"
    data-bs-target="#mainOffcanvas"
    aria-controls="mainOffcanvas">

    باز کردن پنل

</button>

و:

<div
    class="offcanvas offcanvas-start"
    tabindex="-1"
    id="mainOffcanvas"
    aria-labelledby="mainOffcanvasLabel">

    <div class="offcanvas-header">

        <h5
            class="offcanvas-title"
            id="mainOffcanvasLabel">

            منوی اصلی

        </h5>

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

    </div>

    <div class="offcanvas-body">

        <ul class="list-group">

            <li class="list-group-item">
                Dashboard
            </li>

            <li class="list-group-item">
                Products
            </li>

            <li class="list-group-item">
                Orders
            </li>

        </ul>

    </div>

</div>

جهت Offcanvas

می‌توانیم مشخص کنیم پنل از کدام سمت وارد شود.

مثلاً:

offcanvas-start

از سمت Start وارد می‌شود.

یا:

offcanvas-end

از سمت End وارد می‌شود.

همچنین:

offcanvas-top

و:

offcanvas-bottom

نیز وجود دارند.

در صفحات RTL بهتر است مفهوم Start و End را به جای وابستگی مستقیم به Left و Right در نظر بگیرید.

Toast

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

مثلاً بعد از ذخیره اطلاعات می‌توانیم پیام کوتاهی نمایش دهیم:

<div
    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"
            aria-label="Close">
        </button>

    </div>

    <div class="toast-body">

        اطلاعات با موفقیت ذخیره شد.

    </div>

</div>

Toast معمولاً برای پیام‌هایی استفاده می‌شود که نیازی به توقف جریان کاربر ندارند.

Tooltip

Tooltip یک توضیح کوچک است که هنگام قرار گرفتن ماوس روی عنصر نمایش داده می‌شود.

مثلاً:

<button
    type="button"
    class="btn btn-secondary"
    data-bs-toggle="tooltip"
    data-bs-title="این توضیحات هنگام Hover نمایش داده می‌شود">

    راهنما

</button>

اما یک نکته مهم وجود دارد.

Tooltip برخلاف Modal و Dropdown معمولاً باید از طریق JavaScript مقداردهی اولیه شود.

فعال کردن Tooltip با JavaScript

<script>
    const tooltipTriggerList =
        document.querySelectorAll(
            '[data-bs-toggle="tooltip"]'
        );

    const tooltipList =
        [...tooltipTriggerList].map(
            tooltipTriggerEl =>
                new bootstrap.Tooltip(tooltipTriggerEl)
        );
</script>

حالا Tooltipها فعال می‌شوند.

Popover

Popover شبیه Tooltip است، اما می‌تواند محتوای بیشتری نمایش دهد.

HTML:

<button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="popover"
    data-bs-title="عنوان"
    data-bs-content="محتوای توضیحات">

    نمایش اطلاعات

</button>

برای فعال‌سازی:

<script>
    const popoverTriggerList =
        document.querySelectorAll(
            '[data-bs-toggle="popover"]'
        );

    const popoverList =
        [...popoverTriggerList].map(
            popoverTriggerEl =>
                new bootstrap.Popover(popoverTriggerEl)
        );
</script>

تفاوت Tooltip و Popover

به‌صورت ساده:

Tooltip
   ↓
Short Hint

Popover
   ↓
More Detailed Content

Tooltip برای توضیح کوتاه مناسب است.

Popover زمانی مناسب است که اطلاعات بیشتری نیاز داریم.

Carousel

Carousel برای نمایش چند محتوای قابل جابه‌جایی استفاده می‌شود.

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

  • تصاویر

  • Banner

  • محصولات

  • معرفی خدمات

کاربرد دارد.

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

    <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">
            Previous
        </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">
            Next
        </span>

    </button>

</div>

کنترل Carousel

در مثال بالا:

data-bs-slide="prev"

برای رفتن به Slide قبلی است.

و:

data-bs-slide="next"

برای Slide بعدی است.

اجرای خودکار Carousel

می‌توان Carousel را طوری تنظیم کرد که به‌صورت خودکار حرکت کند.

مثلاً:

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

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

JavaScript API

تا اینجا بیشتر از Data Attributes استفاده کردیم.

اما Bootstrap امکان کنترل Componentها از طریق JavaScript را نیز فراهم می‌کند.

مثلاً برای Modal:

const modalElement =
    document.getElementById('exampleModal');

const modal =
    new bootstrap.Modal(modalElement);

modal.show();

برای بستن:

modal.hide();

این روش زمانی مفید است که بخواهیم Component را بر اساس یک رویداد یا منطق برنامه کنترل کنیم.

مثال باز کردن Modal با JavaScript

فرض کنید بعد از انجام یک عملیات می‌خواهیم Modal را باز کنیم:

const modalElement =
    document.getElementById('exampleModal');

const modal =
    bootstrap.Modal.getOrCreateInstance(
        modalElement
    );

modal.show();

getOrCreateInstance باعث می‌شود اگر Instance قبلاً ایجاد شده باشد، از همان استفاده شود و در غیر این صورت یک Instance جدید ایجاد شود.

رویدادهای Bootstrap

Componentهای JavaScript Bootstrap Eventهایی نیز دارند.

برای مثال Modal Eventهای مختلفی دارد.

const modalElement =
    document.getElementById('exampleModal');

modalElement.addEventListener(
    'shown.bs.modal',
    function () {

        console.log('Modal opened');

    }
);

یا:

modalElement.addEventListener(
    'hidden.bs.modal',
    function () {

        console.log('Modal closed');

    }
);

این قابلیت در پروژه‌های واقعی بسیار کاربردی است.

مثال واقعی: فرم داخل Modal

می‌توانیم یک Form را داخل Modal قرار دهیم.

<button
    class="btn btn-primary"
    data-bs-toggle="modal"
    data-bs-target="#userModal">

    افزودن کاربر

</button>

<div
    class="modal fade"
    id="userModal"
    tabindex="-1"
    aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">
                    افزودن کاربر
                </h5>

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

            </div>

            <div class="modal-body">

                <form>

                    <div class="mb-3">

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

                            نام

                        </label>

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

                    </div>

                    <div class="mb-3">

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

                            ایمیل

                        </label>

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

                    </div>

                </form>

            </div>

            <div class="modal-footer">

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

                    انصراف

                </button>

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

                    ذخیره

                </button>

            </div>

        </div>

    </div>

</div>

این الگو در پنل‌های مدیریتی بسیار رایج است.

نکات مهم در استفاده از JavaScript Components

۱. Bootstrap Bundle را فراموش نکنید

اگر Component تعاملی کار نمی‌کند، اولین چیزی که باید بررسی کنید بارگذاری JavaScript Bootstrap است.

۲. IDها باید هماهنگ باشند

مثلاً:

data-bs-target="#userModal"

باید به عنصری با:

id="userModal"

اشاره کند.

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

در یک صفحه نباید چند عنصر یک id یکسان داشته باشند.

۴. Accessibility را رعایت کنید

ویژگی‌هایی مانند:

aria-label
aria-controls
aria-expanded
aria-labelledby
aria-hidden

در Componentهای تعاملی اهمیت دارند.

۵. JavaScript اختصاصی را فقط در صورت نیاز بنویسید

اگر Bootstrap یک رفتار استاندارد را آماده کرده است، ابتدا بررسی کنید آیا می‌توانید از API یا Data Attribute خود Bootstrap استفاده کنید.

تمرین عملی

یک صفحه مدیریت کاربران ایجاد کنید.

صفحه باید شامل موارد زیر باشد:

بخش اول

یک Navbar Responsive ایجاد کنید.

بخش دوم

یک جدول کاربران داشته باشید.

ستون‌ها:

ID
Name
Email
Role
Status
Actions

بخش سوم

برای دکمه Delete یک Modal تأیید ایجاد کنید.

پیام:

آیا از حذف این کاربر مطمئن هستید؟

بخش چهارم

برای منوی حساب کاربری یک Dropdown ایجاد کنید.

گزینه‌ها:

Profile
Settings
Logout

بخش پنجم

یک Offcanvas برای منوی موبایل ایجاد کنید.

بخش ششم

یک Tooltip برای یکی از Buttonهای صفحه ایجاد کنید.

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

یک Dashboard کوچک طراحی کنید که شامل موارد زیر باشد:

Dashboard
   |
   +-- Navbar
   |
   +-- Statistics Cards
   |
   +-- User Table
   |      |
   |      +-- Edit
   |      +-- Delete
   |
   +-- Delete Modal
   |
   +-- User Dropdown
   |
   +-- Mobile Offcanvas
   |
   +-- Success Toast

در این تمرین تلاش کنید تا حد ممکن Componentهای Bootstrap را بدون نوشتن JavaScript اضافی فعال کنید.

جمع‌بندی

در این مقاله با بخش JavaScript در Bootstrap آشنا شدیم و یاد گرفتیم که بعضی Componentهای Bootstrap برای رفتار تعاملی به JavaScript نیاز دارند. ابتدا نحوه اضافه کردن Bootstrap Bundle و مفهوم data-bs-* را بررسی کردیم. سپس با Componentهای مهمی مانند Modal، Dropdown، Collapse، Offcanvas، Toast، Tooltip، Popover و Carousel کار کردیم. همچنین یاد گرفتیم چگونه Modal را با Button باز و بسته کنیم، چگونه Form را داخل Modal قرار دهیم، چگونه Dropdown را داخل Navbar استفاده کنیم و چگونه یک Sidebar یا منوی موبایل با Offcanvas ایجاد کنیم. در ادامه با JavaScript API و Eventهای Bootstrap نیز آشنا شدیم و دیدیم که می‌توانیم Componentها را مستقیماً از طریق JavaScript کنترل کنیم. رعایت Accessibility، هماهنگ بودن IDها و بارگذاری صحیح Bootstrap JavaScript نیز از نکات مهم این بخش بودند.

۱۰

نظرات

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

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