پایه ای غیرفعال طراحی ظاهر عرض

جعبه های انتخاب استاندارد

استفاده از .selectpicker کلاس را بر روی عنصر انتخاب کنید تا آن را به گزینه Bootstrap تبدیل کنید.

<select class="selectpicker">
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
</select>

کادرهای انتخاب شده را انتخاب کنید

گزینه های موجود در داخل را اضافه کنیدoptgroupsبرای گزینه های گروه

<select class="selectpicker">
    <optgroup label="لورم">
        <option>لورم</option>
        <option>لورم</option>
        <option>لورم</option>
    </optgroup>
    <optgroup label="لورم">
        <option>لورم</option>
        <option>لورم</option>
        <option>لورم</option>
    </optgroup>
</select>

جعبه های چندگانه را انتخاب کنید

اضافه کردن multiselect نسبت دادن به چند انتخاب

<select class="selectpicker" multiple>
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
</select>

جستجوی زنده

با عبور می توانید یک ورودی جستجو اضافه کنیدdata-live-search="true"صفت

<select class="selectpicker" data-live-search="true">
    <option>سیب زمینی سرخ شده</option>
    <option>برگر ، لرزش و یک لبخند</option>
    <option>شکر ، ادویه و همه چیز خوب است</option>
</select>

کلید واژه ها

برای بهبود قابلیت جستجوی آنها با استفاده از کلمات کلیدی به گزینه ها اضافه کنید data-tokensاستفاده کنید

<select class="selectpicker" data-live-search="true">
    <option data-tokens="ketchup mustard">هات داگ</option>
    <option data-tokens="mustard">برگر ، لرزش و یک لبخند</option>
    <option data-tokens="frosting">شکر ، ادویه و همه چیز خوب است</option>
</select>

تعداد انتخاب ها را محدود کنید

تعداد گزینه هایی را که می توانید از طریق گزینه انتخاب کنید محدود کنید data-max-optionsاستفاده کنید

<select class="selectpicker" multiple data-max-options="2">
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
</select>

تعداد انتخاب ها را محدود کنید در گروه

تعداد گروههایی را که می توانید با استفاده انتخاب کنید محدود کنید maxOptionsTextاستفاده کنید

<select class="selectpicker" multiple>
    <optgroup label="Condiments" data-max-options="2">
        <option>ustard^</option>
        <option>etchup^</option>
        <option>elish^</option>
    </optgroup>
    <optgroup label="Breads" data-max-options="2">
        <option>lain^</option>
        <option>teamed^</option>
        <option>oasted^</option>
    </optgroup>
</select>

مکان نگهدار

با استفاده از ویژگی عنوان ، مکان نگهدارنده پیش فرض را تعیین می کند.

<select class="selectpicker" multiple title="Choose options">
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
</select>

متن انتخاب شده

ویژگی title را بر روی گزینه های فردی تنظیم کنید تا هنگام انتخاب گزینه متن جایگزین نمایش داده شود

<select class="selectpicker">
    <option title="Combo 1">هات داگ, سیب زمینی سرخ شده and a Soda</option>
    <option title="Combo 2">برگر ، لرزش و یک لبخند</option>
    <option title="Combo 3">شکر ، ادویه و همه چیز خوب است</option>
</select>

فرمت متن انتخاب شده

نحوه نمایش انتخاب با ویژگی data-selected-text-format در چند انتخاب را مشخص کنید

<select class="selectpicker" multiple data-selected-text-format="count">
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
</select>

فرمت متن انتخاب شده

count > x : در جایی که x تعداد مواردی را انتخاب می کند که قالب نمایشگر از مقادیر به شمارش تغییر کند.

<select class="selectpicker" multiple data-selected-text-format="count > 3">
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
    <option>Onions</option>
</select>

گزینه های فردی را سبک کنید

کلاس ها و سبک های اضافه شده به گزینه ها به جعبه انتخاب منتقل می شوند.

<select class="selectpicker">
    <option>لورم</option>
    <option class="bg-danger">لورم</option>
    <option style="background: #8dbf42; color: #fff;">لورم</option>
</select>

محتوای دلخواه

HTML دلخواه را با گزینه وارد کنید data-contentصفت

<select class="selectpicker">
    <option data-content="<span class='badge badge-primary'>اولیه</span>">اولیه</option>
    <option data-content="<span class='badge badge-secondary'>ثانویه</span>">ثانویه</option>
    <option data-content="<span class='badge badge-success'>موفقیت</span>">موفقیت</option>
    <option data-content="<span class='badge badge-warning'>خطا</span>">خطا</option>
</select>

Show Subtext

Add subtext to an option or optgroup with the data-subtext صفت. 

<select class="selectpicker" data-show-subtext="true">
    <option data-subtext="French's">لورم</option>
    <option data-subtext="Heinz">لورم</option>
    <option data-subtext="Sweet">لورم</option>
    <option data-subtext="Miracle Whip">Mayonnaise</option>
    <option data-divider="true">divider</option>
    <option data-subtext="Honey">Barbecue Sauce</option>
    <option data-subtext="Ranch">Salad Dressing</option>
    <option data-subtext="Sweet & Spicy">Tabasco</option>
    <option data-subtext="Chunky">Salsa</option>
</select>

اندازه منو

اندازه منو همچنین می تواند با استفاده از مشخصات مشخص شودdata-size صفت. 

<select class="selectpicker" data-size="5">
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
    <option>Mayonnaise</option>
    <option>Barbecue Sauce</option>
    <option>Salad Dressing</option>
    <option>Tabasco</option>
    <option>Salsa</option>
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
    <option>Mayonnaise</option>
    <option>Barbecue Sauce</option>
    <option>Salad Dressing</option>
    <option>Tabasco</option>
    <option>Salsa</option>
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
    <option>Mayonnaise</option>
    <option>Barbecue Sauce</option>
    <option>Salad Dressing</option>
    <option>Tabasco</option>
    <option>Salsa</option>
</select>

همه گزینه ها را انتخاب کنید / از حالت انتخاب خارج کنید

دو دکمه را در بالای منو اضافه می کند- همه را انتخاب کنید و حذف همه را باdata-actions-box="true"استفاده کنید

<select class="selectpicker" multiple data-actions-box="true">
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
</select>

تقسیم کننده

اضافه کردن data-divider="true" به گزینه ای تبدیل شود تا آن را به تقسیم کننده تبدیل کند.

<select class="selectpicker">
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
    <option>Mayonnaise</option>
    <option>Barbecue Sauce</option>
    <option>Salad Dressing</option>
    <option>Tabasco</option>
    <option>Salsa</option>
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
    <option data-divider="true">divider</option>
    <option>Mayonnaise</option>
    <option>Barbecue Sauce</option>
    <option>Salad Dressing</option>
    <option>Tabasco</option>
    <option>Salsa</option>
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
    <option>Mayonnaise</option>
    <option>Barbecue Sauce</option>
    <option>Salad Dressing</option>
    <option>Tabasco</option>
    <option>Salsa</option>
</select>

هدر منو

یک هدر به منوی کشویی اضافه کنیدdata-header="Select a condiment"

Select a condiment
<select class="selectpicker" data-header="Select a condiment"  data-size="5">
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
    <option>Mayonnaise</option>
    <option>Barbecue Sauce</option>
    <option>Salad Dressing</option>
    <option>Tabasco</option>
    <option>Salsa</option>
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
    <option>Mayonnaise</option>
    <option>Barbecue Sauce</option>
    <option>Salad Dressing</option>
    <option>Tabasco</option>
    <option>Salsa</option>
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
    <option>Mayonnaise</option>
    <option>Barbecue Sauce</option>
    <option>Salad Dressing</option>
    <option>Tabasco</option>
    <option>Salsa</option>
</select>

منوی کشویی به بالا

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

<select class="selectpicker dropup">
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
    <option>Mayonnaise</option>
</select>

غیرفعال

جعبه انتخاب غیرفعال

جعبه را با استفاده از غیرفعال کنید disabled ویژگی در select عنصر.

<select class="selectpicker" disabled>
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
</select>

گزینه های غیرفعال شده است

گزینه را با استفاده از غیرفعال کنید disabled ویژگی در select option عنصر.

<select class="selectpicker">
    <option>لورم</option>
    <option disabled>لورم</option>
    <option>لورم</option>
</select>

گزینه های غیرفعال شده است groups

گزینه را با استفاده از غیرفعال کنید disabled ویژگی در select optgroup element

<select class="selectpicker test">
    <optgroup label="لورم" disabled>
        <option>لورم</option>
        <option>لورم</option>
        <option>لورم</option>
    </optgroup>
    <optgroup label="لورم">
        <option>لورم</option>
        <option>لورم</option>
        <option>لورم</option>
    </optgroup>
</select>

طراحی ظاهر

طراحی ظاهر

می توانید کلاس های دکمه را از طریق تنظیم کنید data-styleصفت

<select class="selectpicker mb-4 ml-2" data-style="custom-styling btn btn-outline-primary">
    <option>لورم</option>
    <option>لورم</option>
    <option>لورم</option>
    <option>Onions</option>
</select>

عرض

شبکه

بسته ها را در ستونهای شبکه یا هر عنصر والدینی سفارشی بسته بندی کنید تا به راحتی بتوانید عرض های مورد نظر را اجرا کنید.

<div class="row">
    <div class="col-sm-3 col-12">
        <div class="form-group">
            <select class="selectpicker form-control">
                <option>لورم</option>
                <option>لورم</option>
                <option>لورم</option>
            </select>
        </div>
    </div>
    <div class="col-sm-9 col-12">
        <div class="form-group">
            <select class="selectpicker form-control">
                <option>لورم</option>
                <option>لورم</option>
                <option>لورم</option>
            </select>
        </div>
    </div>
</div>

عرض سفارشی

استفاده از data-width ویژگی را برای تنظیم عرض انتخاب کنید

عرض داده = "fit"
عرض داده = "200px"
عرض داده = "75%"
==================
عرض داده = "fit"
==================
<div class="col-sm-12">
    <select class="selectpicker mb-4" data-width="fit">
        <option>لورم</option>
        <option>لورم</option>
        <option>لورم</option>
        <option>Onions</option>
    </select>
</div>


==================
عرض داده = "200px"
==================

<div class="col-sm-12">
    <select class="selectpicker mb-4" data-width="200px">
        <option>لورم</option>
        <option>لورم</option>
        <option>لورم</option>
        <option>Onions</option>
    </select>
</div>

==================
عرض داده = "75%"
==================
<div class="col-sm-12">
    <select class="selectpicker mb-4" data-width="75%">
        <option>لورم</option>
        <option>لورم</option>
        <option>لورم</option>
        <option>Onions</option>
    </select>
</div>

© کپی رایت

بومی سازی شده توسط : ایمان پاکروح