BenoService

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

کامپوننت‌ها در Bootstrap

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

تا اینجا با بخش‌های پایه Bootstrap مانند Container، Grid، Typography، Utilities، تصاویر، دکمه‌ها، فرم‌ها و جدول‌ها آشنا شدیم. اما Bootstrap فقط مجموعه‌ای از کلاس‌های CSS برای تغییر رنگ و فاصله نیست. یکی از مهم‌ترین ویژگی‌های آن وجود Componentهای آماده برای ساخت رابط کاربری است. Componentها اجزای نسبتاً کامل و قابل استفاده‌ای هستند که می‌توانند بخش‌هایی مانند پیام‌های اطلاع‌رسانی، کارت‌های محتوا، منوها، لیست‌ها، نشانگرهای وضعیت و بسیاری از قسمت‌های دیگر یک وب‌سایت یا پنل مدیریت را تشکیل دهند. استفاده صحیح از این Componentها باعث می‌شود سرعت توسعه بیشتر شود و ظاهر قسمت‌های مختلف سایت نیز هماهنگ باقی بماند. در این مقاله با مفهوم Component در Bootstrap آشنا می‌شویم، نحوه استفاده از Componentهای مختلف را یاد می‌گیریم و در پایان چند Component را با یکدیگر ترکیب می‌کنیم تا یک بخش واقعی از یک پنل مدیریتی بسازیم.

Component چیست؟

در طراحی رابط کاربری، Component به یک بخش قابل استفاده از رابط کاربری گفته می‌شود که معمولاً وظیفه مشخصی دارد.

برای مثال:

Button
Card
Alert
Badge
List Group
Navbar
Modal
Dropdown
Toast
Accordion
Carousel

هرکدام کاربرد متفاوتی دارند.

برای مثال:

  • Button برای انجام یک عملیات

  • Card برای نمایش یک محتوای مستقل

  • Alert برای نمایش پیام

  • Badge برای نمایش وضعیت یا اطلاعات کوتاه

  • List Group برای نمایش فهرست

  • Navbar برای ساخت Navigation

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

چرا از Componentهای Bootstrap استفاده کنیم؟

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

بدون Bootstrap باید خودمان مواردی مانند:

  • رنگ پس‌زمینه

  • رنگ متن

  • Padding

  • Border

  • Border Radius

  • فاصله

  • حالت‌های مختلف

را طراحی کنیم.

اما Bootstrap این کار را بسیار ساده می‌کند.

برای مثال:

<div class="alert alert-success">
    عملیات با موفقیت انجام شد.
</div>

با چند کلاس ساده یک Alert آماده داریم.

Componentهای Bootstrap چگونه کار می‌کنند؟

بیشتر Componentهای Bootstrap با HTML و CSS کار می‌کنند.

برخی Componentها برای رفتارهای تعاملی به JavaScript Bootstrap نیز نیاز دارند.

می‌توانیم Componentها را به دو گروه کلی تقسیم کنیم:

CSS Components
       ↓
Visual Components

JavaScript Components
       ↓
Interactive Components

برای مثال:

Card بیشتر یک Component بصری است.

اما Modal برای باز و بسته شدن به JavaScript Bootstrap نیاز دارد.

Alert

Alert یکی از ساده‌ترین و پرکاربردترین Componentهای Bootstrap است.

برای ساخت Alert:

<div class="alert alert-primary">
    این یک پیام اطلاعاتی است.
</div>

می‌توان از رنگ‌های مختلف استفاده کرد:

<div class="alert alert-success">
    عملیات با موفقیت انجام شد.
</div>

<div class="alert alert-danger">
    عملیات ناموفق بود.
</div>

<div class="alert alert-warning">
    لطفاً اطلاعات را بررسی کنید.
</div>

<div class="alert alert-info">
    اطلاعات جدیدی در دسترس است.
</div>

Alert با عنوان

می‌توانیم Alert را کمی کامل‌تر کنیم.

<div class="alert alert-success">

    <h4 class="alert-heading">
        موفقیت
    </h4>

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

</div>

کلاس alert-heading برای عنوان Alert استفاده می‌شود.

Alert همراه با لینک

می‌توان داخل Alert لینک نیز قرار داد.

<div class="alert alert-info">

    لطفاً برای مشاهده اطلاعات بیشتر
    <a href="#" class="alert-link">
        اینجا کلیک کنید
    </a>.

</div>

کلاس alert-link باعث می‌شود لینک با ظاهر مناسب Alert نمایش داده شود.

Alert قابل بستن

Alert می‌تواند قابلیت بسته شدن داشته باشد.

<div class="alert alert-warning alert-dismissible fade show" role="alert">

    اطلاعات شما هنوز تکمیل نشده است.

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

</div>

در این مثال چند مفهوم جدید داریم:

  • alert-dismissible

  • fade

  • show

  • btn-close

  • data-bs-dismiss="alert"

چون این Alert تعاملی است، Bootstrap JavaScript باید در صفحه فعال باشد.

Badge

Badge برای نمایش اطلاعات کوتاه و معمولاً وضعیت، تعداد یا برچسب استفاده می‌شود.

مثال:

<span class="badge text-bg-primary">
    جدید
</span>

یا:

<span class="badge text-bg-success">
    فعال
</span>

و:

<span class="badge text-bg-danger">
    خطا
</span>

Badge در کنار عنوان

<h2>
    محصولات
    <span class="badge text-bg-primary">
        25
    </span>
</h2>

در اینجا Badge تعداد محصولات را نشان می‌دهد.

Badge برای وضعیت

یکی از کاربردهای رایج Badge در پنل مدیریت نمایش Status است.

<table class="table">

    <tr>
        <td>محصول شماره ۱</td>

        <td>
            <span class="badge text-bg-success">
                فعال
            </span>
        </td>
    </tr>

    <tr>
        <td>محصول شماره ۲</td>

        <td>
            <span class="badge text-bg-warning">
                در انتظار
            </span>
        </td>
    </tr>

    <tr>
        <td>محصول شماره ۳</td>

        <td>
            <span class="badge text-bg-danger">
                غیرفعال
            </span>
        </td>
    </tr>

</table>

Card

Card یکی از مهم‌ترین Componentهای Bootstrap است.

Card معمولاً برای نمایش یک محتوای مستقل استفاده می‌شود.

ساختار پایه:

<div class="card">

    <div class="card-body">

        <h5 class="card-title">
            عنوان کارت
        </h5>

        <p class="card-text">
            این متن داخل کارت قرار دارد.
        </p>

    </div>

</div>

ساختار کلی:

Card
 ├── Card Header
 ├── Card Body
 └── Card Footer

همه بخش‌ها اجباری نیستند.

Card با Header

<div class="card">

    <div class="card-header">
        اطلاعات کاربر
    </div>

    <div class="card-body">

        <h5 class="card-title">
            علی رضایی
        </h5>

        <p class="card-text">
            اطلاعات حساب کاربری
        </p>

    </div>

</div>

Card با Footer

<div class="card">

    <div class="card-body">

        <h5 class="card-title">
            اشتراک حرفه‌ای
        </h5>

        <p class="card-text">
            دسترسی به امکانات بیشتر
        </p>

    </div>

    <div class="card-footer text-body-secondary">
        اعتبار: 30 روز
    </div>

</div>

Card همراه با Button

<div class="card">

    <div class="card-body">

        <h5 class="card-title">
            Basic Plan
        </h5>

        <p class="card-text">
            مناسب برای شروع کار
        </p>

        <button class="btn btn-primary">
            انتخاب
        </button>

    </div>

</div>

Card با تصویر

Card می‌تواند تصویر نیز داشته باشد.

<div class="card">

    <img
        src="product.jpg"
        class="card-img-top"
        alt="محصول">

    <div class="card-body">

        <h5 class="card-title">
            محصول جدید
        </h5>

        <p class="card-text">
            توضیحات محصول در این قسمت قرار می‌گیرد.
        </p>

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

    </div>

</div>

card-img-top تصویر را در قسمت بالای Card قرار می‌دهد.

Card در Grid

Cardها معمولاً در Grid استفاده می‌شوند.

<div class="container">

    <div class="row g-4">

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

            <div class="card h-100">

                <div class="card-body">

                    <h5 class="card-title">
                        Product One
                    </h5>

                    <p class="card-text">
                        Product description.
                    </p>

                    <button class="btn btn-primary">
                        مشاهده
                    </button>

                </div>

            </div>

        </div>

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

            <div class="card h-100">

                <div class="card-body">

                    <h5 class="card-title">
                        Product Two
                    </h5>

                    <p class="card-text">
                        Product description.
                    </p>

                    <button class="btn btn-primary">
                        مشاهده
                    </button>

                </div>

            </div>

        </div>

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

            <div class="card h-100">

                <div class="card-body">

                    <h5 class="card-title">
                        Product Three
                    </h5>

                    <p class="card-text">
                        Product description.
                    </p>

                    <button class="btn btn-primary">
                        مشاهده
                    </button>

                </div>

            </div>

        </div>

    </div>

</div>

کلاس h-100 باعث می‌شود ارتفاع Cardها در یک ردیف بهتر با یکدیگر هماهنگ شود.

List Group

List Group برای نمایش مجموعه‌ای از آیتم‌ها استفاده می‌شود.

ساختار پایه:

<ul class="list-group">

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

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

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

</ul>

List Group فعال

برای مشخص کردن یک آیتم می‌توان از active استفاده کرد.

<ul class="list-group">

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

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

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

</ul>

List Group غیرفعال

<ul class="list-group">

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

    <li class="list-group-item disabled">
        Reports
    </li>

</ul>

List Group با لینک

List Group می‌تواند به شکل لینک نیز استفاده شود.

<div class="list-group">

    <a href="#" class="list-group-item list-group-item-action">
        Dashboard
    </a>

    <a href="#" class="list-group-item list-group-item-action">
        Products
    </a>

    <a href="#" class="list-group-item list-group-item-action">
        Orders
    </a>

</div>

کلاس list-group-item-action برای آیتم‌های قابل کلیک کاربرد دارد.

List Group رنگی

<ul class="list-group">

    <li class="list-group-item list-group-item-success">
        عملیات موفق
    </li>

    <li class="list-group-item list-group-item-warning">
        نیازمند بررسی
    </li>

    <li class="list-group-item list-group-item-danger">
        عملیات ناموفق
    </li>

</ul>

ترکیب Card و List Group

یکی از الگوهای رایج Bootstrap ترکیب Card با List Group است.

<div class="card">

    <div class="card-header">
        تنظیمات حساب
    </div>

    <ul class="list-group list-group-flush">

        <li class="list-group-item">
            اطلاعات شخصی
        </li>

        <li class="list-group-item">
            تغییر رمز عبور
        </li>

        <li class="list-group-item">
            تنظیمات اعلان‌ها
        </li>

    </ul>

</div>

کلاس list-group-flush باعث می‌شود List Group با ظاهر مناسب‌تری داخل Card قرار بگیرد.

Componentها را با Utilityها ترکیب کنیم

یکی از نقاط قوت Bootstrap این است که Componentها را می‌توانیم با Utility Classها ترکیب کنیم.

مثلاً:

<div class="card shadow-sm">

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

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

            <h5 class="card-title mb-0">
                کاربران
            </h5>

            <span class="badge text-bg-primary">
                120
            </span>

        </div>

        <p class="text-body-secondary">
            تعداد کاربران ثبت‌شده در سیستم
        </p>

        <button class="btn btn-primary">
            مدیریت کاربران
        </button>

    </div>

</div>

در این مثال از چند قابلیت مختلف استفاده شده است:

Card
Badge
Button
Flexbox
Spacing
Shadow
Typography

این دقیقاً همان روشی است که Bootstrap در پروژه‌های واقعی قدرتمند می‌شود.

ساخت Dashboard Card

حالا یک کارت آماری شبیه پنل مدیریت ایجاد کنیم.

<div class="card">

    <div class="card-body">

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

            <div>

                <p class="text-body-secondary mb-1">
                    کاربران
                </p>

                <h2 class="mb-0">
                    12,540
                </h2>

            </div>

            <span class="badge text-bg-success">
                +12%
            </span>

        </div>

        <p class="small text-body-secondary mt-3 mb-0">
            نسبت به ماه گذشته
        </p>

    </div>

</div>

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

  • تعداد کاربران

  • تعداد سفارش‌ها

  • درآمد

  • تعداد محصولات

  • تعداد تبلیغات

  • تعداد تیکت‌ها

ساخت چند Dashboard Card

<div class="container py-4">

    <div class="row g-4">

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

            <div class="card h-100">

                <div class="card-body">

                    <p class="text-body-secondary mb-1">
                        Users
                    </p>

                    <h2 class="mb-2">
                        12,540
                    </h2>

                    <span class="badge text-bg-success">
                        +12%
                    </span>

                </div>

            </div>

        </div>

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

            <div class="card h-100">

                <div class="card-body">

                    <p class="text-body-secondary mb-1">
                        Orders
                    </p>

                    <h2 class="mb-2">
                        3,240
                    </h2>

                    <span class="badge text-bg-success">
                        +8%
                    </span>

                </div>

            </div>

        </div>

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

            <div class="card h-100">

                <div class="card-body">

                    <p class="text-body-secondary mb-1">
                        Revenue
                    </p>

                    <h2 class="mb-2">
                        $42,500
                    </h2>

                    <span class="badge text-bg-success">
                        +15%
                    </span>

                </div>

            </div>

        </div>

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

            <div class="card h-100">

                <div class="card-body">

                    <p class="text-body-secondary mb-1">
                        Tickets
                    </p>

                    <h2 class="mb-2">
                        84
                    </h2>

                    <span class="badge text-bg-warning">
                        12 Pending
                    </span>

                </div>

            </div>

        </div>

    </div>

</div>

این ساختار برای شروع یک Dashboard بسیار مناسب است.

استفاده از Componentها در صفحات واقعی

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

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

Dashboard
   |
   +-- Statistics Cards
   |
   +-- Alerts
   |
   +-- User Table
   |
   +-- Action Buttons

در Bootstrap هر قسمت را می‌توان با Component یا Utility مناسب ساخت.

برای مثال:

<div class="container py-4">

    <div class="alert alert-info">
        اطلاعات کاربران به‌روزرسانی شد.
    </div>

    <div class="row g-4 mb-4">

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

            <div class="card">
                <div class="card-body">
                    <h2>120</h2>
                    <p class="mb-0">
                        کاربران فعال
                    </p>
                </div>
            </div>

        </div>

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

            <div class="card">
                <div class="card-body">
                    <h2>15</h2>
                    <p class="mb-0">
                        کاربران جدید
                    </p>
                </div>
            </div>

        </div>

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

            <div class="card">
                <div class="card-body">
                    <h2>5</h2>
                    <p class="mb-0">
                        کاربران غیرفعال
                    </p>
                </div>
            </div>

        </div>

    </div>

</div>

در این مثال:

  • Alert برای پیام

  • Grid برای Layout

  • Card برای آمار

  • Typography برای متن

استفاده شده است.

Componentهای Bootstrap فقط محدود به این موارد نیستند

Bootstrap Componentهای بسیار بیشتری دارد.

در ادامه دوره با آنها به‌صورت تخصصی‌تر کار خواهیم کرد.

برخی از Componentهای مهم عبارت‌اند از:

Alert
Badge
Breadcrumb
Button
Button Group
Card
Carousel
Close Button
Collapse
Dropdown
List Group
Modal
Navbar
Navs
Offcanvas
Pagination
Placeholders
Popovers
Progress
Scrollspy
Spinners
Toasts
Tooltips

لازم نیست همه این Componentها را یک‌باره یاد بگیرید.

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

تفاوت Component و Utility

این دو مفهوم را با یکدیگر اشتباه نگیرید.

Utility معمولاً یک قابلیت کوچک ارائه می‌کند.

مثلاً:

<div class="d-flex p-3 mt-4">

در اینجا:

  • d-flex یک Utility است.

  • p-3 یک Utility است.

  • mt-4 یک Utility است.

اما Card یک Component کامل‌تر است:

<div class="card">

بنابراین:

Utility
   ↓
Small styling feature

Component
   ↓
Reusable UI structure

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

نکته مهم درباره JavaScript Componentها

برخی Componentهای Bootstrap صرفاً با CSS کار می‌کنند.

اما برخی دیگر به JavaScript نیاز دارند.

برای مثال:

Card
Alert
Badge
List Group

معمولاً برای ظاهر پایه نیازی به JavaScript ندارند.

اما:

Modal
Dropdown
Tooltip
Popover
Collapse
Offcanvas
Carousel
Toast

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

اگر Bootstrap JavaScript را بارگذاری نکرده باشید، ممکن است ظاهر Component نمایش داده شود اما رفتار تعاملی آن کار نکند.

بهترین روش یادگیری Componentها

به جای اینکه فقط کلاس‌ها را حفظ کنید، برای هر Component سه سؤال بپرسید:

سؤال اول: این Component چه مشکلی را حل می‌کند؟

مثلاً:

Alert

برای نمایش پیام.

سؤال دوم: ساختار HTML آن چیست؟

مثلاً:

<div class="alert alert-success">
    پیام
</div>

سؤال سوم: آیا JavaScript نیاز دارد؟

مثلاً:

Modal

بله، برای رفتار تعاملی به Bootstrap JavaScript نیاز دارد.

این روش باعث می‌شود Bootstrap را مفهومی‌تر یاد بگیرید.

تمرین عملی

یک صفحه Dashboard ساده ایجاد کنید که شامل موارد زیر باشد:

بخش اول

یک Alert برای نمایش پیام:

عملیات با موفقیت انجام شد.

بخش دوم

چهار Card آماری:

Users
Orders
Products
Tickets

بخش سوم

برای هر Card یک Badge ایجاد کنید که تغییر یا وضعیت را نشان دهد.

بخش چهارم

یک List Group برای منوی زیر ایجاد کنید:

Dashboard
Products
Orders
Users
Settings

بخش پنجم

تمام صفحه را با Bootstrap Grid Responsive کنید.

در موبایل:

Card
Card
Card
Card

به شکل عمودی نمایش داده شوند.

در Desktop:

Card | Card | Card | Card

در یک ردیف قرار بگیرند.

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

یک پنل مدیریت فروشگاه طراحی کنید که شامل قسمت‌های زیر باشد:

Admin Dashboard
       |
       +-- Alert
       |
       +-- Statistics
       |      |
       |      +-- Users
       |      +-- Products
       |      +-- Orders
       |      +-- Revenue
       |
       +-- Sidebar
       |
       +-- Recent Orders
       |
       +-- Actions

برای هر بخش از Component مناسب Bootstrap استفاده کنید.

در این تمرین هنوز نیازی به JavaScript اختصاصی ندارید.

هدف تمرین این است که یاد بگیرید چند Component را در کنار یکدیگر قرار دهید.

جمع‌بندی

در این مقاله با مفهوم Component در Bootstrap آشنا شدیم و یاد گرفتیم Componentها اجزای آماده و قابل استفاده رابط کاربری هستند که می‌توانند سرعت توسعه و هماهنگی طراحی را افزایش دهند. با Alert برای نمایش پیام، Badge برای نمایش وضعیت و اطلاعات کوتاه، Card برای نمایش محتوای مستقل و List Group برای نمایش فهرست‌ها کار کردیم. همچنین یاد گرفتیم Componentها را می‌توان با Grid، Flexbox، Spacing، Typography، Button و سایر Utilityهای Bootstrap ترکیب کرد و از آنها برای ساخت قسمت‌های واقعی یک Dashboard یا پنل مدیریت استفاده کرد. در پایان نیز تفاوت Utility و Component و همچنین تفاوت Componentهای CSS و Componentهای نیازمند JavaScript را بررسی کردیم.

۲۰

نظرات

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

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