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
↓
InteractionCSS مسئول مواردی مانند:
رنگ
فاصله
اندازه
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 ContentTooltip برای توضیح کوتاه مناسب است.
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 نیز از نکات مهم این بخش بودند.
نظرات
هنوز نظری ثبت نشده است.