bootstrap

select در bootstrap

21 آوریل

در حالی که عنصر استاندارد <select> تنها عملکرد کشویی را ارائه می‌دهد، Bootstrap آن را با استایل‌های پیشرفته‌تر، پاسخ‌گویی بهتر و ادغام در طرح‌بندی فرم‌ها به سطح بالاتری می‌برد. این راهنمای جامع به بررسی کامل عناصر انتخابی (select) در Bootstrap می‌پردازد و گزینه‌های استایل‌دهی، ادغام با سیستم گرید، کنترل اندازه و حتی شخصی‌سازی‌های پیشرفته را بررسی می‌کند.

استایل پایه Bootstrap برای Select (.form-select)

پایه‌ی اصلی استایل‌دهی به select در Bootstrap کلاس .form-select است. با اعمال این کلاس به یک عنصر <select>، بلافاصله ظاهر آن به شکل مدرن و هماهنگ‌تری تغییر می‌کند:

  • فونت و حاشیه‌ی یکپارچه: استایل‌های فونت و حاشیه‌ی پیش‌فرض Bootstrap اعمال می‌شوند که باعث یکنواختی ظاهر در مرورگرهای مختلف می‌شود.
  • پدینگ و ظاهر بهبود یافته: فاصله‌گذاری داخلی مناسب‌تر برای خوانایی بهتر و ظاهری مدرن‌تر اضافه می‌شود.
  • آیکون کشویی پیش‌فرض مرورگر: آیکون کشویی حفظ می‌شود اما با Bootstrap هماهنگ می‌شود.
  • عرض کامل به‌صورت پیش‌فرض: در سیستم گرید Bootstrap، عنصر select معمولاً تمام عرض ستون والد خود را اشغال می‌کند.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Select</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>Basic Bootstrap Select</h2>
        <label for="basicSelect" class="form-label">Choose an option</label>
        <select class="form-select" id="basicSelect">
            <option selected>Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ادغام با طرح‌بندی فرم و سیستم گرید

سیستم گرید Bootstrap روشی انعطاف‌پذیر برای جای‌گذاری عناصر select در فرم‌ها فراهم می‌کند:

  • قرارگیری مبتنی بر ستون: از کلاس‌های .row و .col-* برای کنار هم قرار دادن عناصر select با سایر کنترل‌های فرم یا برچسب‌ها استفاده کنید.
<form class="row g-3 mt-4">
    <div class="col-md-6">
        <label for="countrySelect" class="form-label">Country</label>
        <select class="form-select" id="countrySelect">
            <option selected>Choose...</option>
            <option value="us">United States</option>
            <option value="ca">Canada</option>
            <option value="uk">United Kingdom</option>
        </select>
    </div>
    <div class="col-md-6">
        <label for="citySelect" class="form-label">City</label>
        <select class="form-select" id="citySelect" disabled>
            <option selected>Please select a country first</option>
        </select>
    </div>
    </form>

گروه‌بندی فرم‌ها (.mb-3)

برای ایجاد فاصله‌ی عمودی مناسب میان برچسب‌ها و کنترل‌های فرم، از کلاس .mb-3 استفاده کنید.

کنترل اندازه‌ی Select ها (.form-select-sm, .form-select-lg)

Bootstrap کلاس‌هایی برای تنظیم اندازه‌ی ظاهری select ارائه می‌دهد:

Select کوچک (.form-select-sm)
مناسب برای طراحی فشرده‌تر.

<select class="form-select form-select-sm" aria-label=".form-select-sm example">
    <option selected>Small select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Select بزرگ (.form-select-lg)
مناسب برای تأکید بیشتر بر روی کنترل‌ها.

<select class="form-select form-select-lg" aria-label=".form-select-lg example">
    <option selected>Large select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

استفاده از Select با ویژگی Multiple

با استفاده از ویژگی multiple در عنصر <select>، کاربر می‌تواند چند گزینه را انتخاب کند. ظاهر آن معمولاً به گونه‌ای تغییر می‌کند که چند آیتم منتخب را نمایش دهد (اغلب به صورت لیست قابل اسکرول):

<label for="multipleSelect" class="form-label">Select multiple options</label>
<select class="form-select" id="multipleSelect" multiple aria-label="multiple select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

استایل‌دهی به عناصر optgroup

Bootstrap ساختار معنایی <optgroup> را حفظ می‌کند و امکان گروه‌بندی دیداری گزینه‌های مرتبط را فراهم می‌سازد.

<label for="optgroupSelect" class="form-label">Select with optgroup</label>
<select class="form-select" id="optgroupSelect">
    <option selected>Open this select menu</option>
    <optgroup label="Group A">
        <option value="a1">Option A1</option>
        <option value="a2">Option A2</option>
    </optgroup>
    <optgroup label="Group B">
        <option value="b1">Option B1</option>
        <option value="b2">Option B2</option>
    </optgroup>
</select>

وضعیت‌های اعتبارسنجی (.is-valid, .is-invalid)

Bootstrap استایل‌های اعتبارسنجی فرم را به خوبی با عناصر select هماهنگ می‌کند:

  • وضعیت معتبر (.is-valid): مرز سبز و آیکون تیک.
  • وضعیت نامعتبر (.is-invalid): مرز قرمز و آیکون هشدار.
  • بازخورد (.valid-feedback / .invalid-feedback): برای نمایش پیام‌های بازخورد مرتبط با select.
<div class="mb-3">
    <label for="validationSelect" class="form-label">Validation select</label>
    <select class="form-select is-invalid" id="validationSelect" required aria-label="invalid select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Please select a valid option.</div>
</div>

<div class="mb-3">
    <label for="validSelect" class="form-label">Valid select</label>
    <select class="form-select is-valid" id="validSelect" required aria-label="valid select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <div class="valid-feedback">Looks good!</div>
</div>

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

ظاهر سفارشی (فراتر از .form-select)

برای تغییرات ظاهری ریشه‌ای، به CSS سفارشی یا کتابخانه‌های JavaScript برای جایگزینی select نیاز دارید.

دسترسی‌پذیری:

  • برچسب‌های واضح: همیشه از <label> مرتبط با for استفاده کنید.
  • پیمایش با کیبورد: مرورگرها به طور پیش‌فرض از کلیدهای جهت برای پیمایش در گزینه‌ها پشتیبانی می‌کنند.
  • ویژگی‌های ARIA: برای سناریوهای پیچیده‌تر از ویژگی‌هایی مانند aria-labelledby, aria-describedby استفاده کنید.

در نظر گرفتن جایگزین‌ها برای تعاملات پیچیده:

برای داده‌های بزرگ یا نیاز به فیلتر پیشرفته، به جای select از ورودی‌های autocomplete یا listbox قابل فیلتر استفاده کنید.

بهبود با JavaScript:

برای ویژگی‌هایی مانند منوی جستجویی، بارگذاری پویا یا کنترل رویدادها، از کتابخانه‌هایی مانند Select2، Tom Select یا Choices.js استفاده کنید.

ایده‌های طراحی منحصربه‌فرد با Select در Bootstrap

  • Select با تم خاص: استفاده از رنگ‌های زمینه Bootstrap برای ایجاد select‌هایی با ظاهر متفاوت.
  • inline Select: با استفاده از گرید Bootstrap و کمی CSS سفارشی.
  • ادغام آیکون (با JavaScript): استفاده از Bootstrap Icons یا Font Awesome در کنار گزینه‌ها.
  • ارتقای تدریجی: ابتدا با یک select ساده شروع کنید و بعداً با JavaScript قابلیت‌ها را اضافه کنید.

نتیجه‌گیری: ارتقای ورودی کاربر با Select در Bootstrap

Bootstrap یک بستر قدرتمند برای استایل‌دهی و ادغام عناصر select در فرم‌های وب فراهم می‌کند. با بهره‌گیری از کلاس .form-select، سیستم گرید، اندازه‌ها و حالت‌های اعتبارسنجی، می‌توانید منوهای کشویی کاربرپسند و یکنواختی ایجاد کنید. برای تجربه کاربری پیشرفته‌تر، از کتابخانه‌های JavaScript در کنار Bootstrap استفاده کنید و همواره به دسترسی‌پذیری توجه داشته باشید تا فرم‌هایی قابل استفاده برای همه کاربران بسازید.

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *