<div class="card card-custom">
<div class="card-header">
<div class="card-title">
<h3 class="card-title">
انتخابگر بوت استرپ
</h3>
</div>
</div>
<!--begin::Form-->
<form class="form">
<div class="card-body">
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">نمونه پایه</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker">
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">اندازه بندی</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker" data-size="4">
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
<option>گرافیست</option>
<option>تولید محتوا</option>
<option>سئوکار</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">گروه بندی</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker">
<optgroup label="تخصص ها" data-max-options="2">
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
</optgroup>
<optgroup label="تکنسین ها" data-max-options="2">
<option>گرافیست</option>
<option>تولید محتوا</option>
<option>سئوکار</option>
</optgroup>
</select>
<span class="form-text text-muted">گروه بندی شده</span>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">انتخاب چندگانه</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker" multiple>
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">جستجو زنده</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker" data-size="7" data-live-search="true">
<option value="">انتخاب</option>
<option value="AF">افغانستان</option>
<option value="AX">جزایر الند</option>
<option value="AL">آلبانی</option>
<option value="DZ">الجزایر</option>
<option value="AS">آمریکا</option>
<option value="AD">آندورا</option>
<option value="AO">آنگولا</option>
<option value="AI">آنگولا</option>
<option value="AQ">جنوبگان</option>
<option value="AG">آنتیگوا و باربودا</option>
<option value="AR">آرژانتین</option>
<option value="AM">ارمنستان</option>
<option value="AW">آروبا</option>
<option value="AU">استرالیا</option>
<option value="AT">اتریش</option>
<option value="AZ">آذربایژوئن</option>
<option value="BS">باهاما</option>
<option value="BH">بحرین</option>
<option value="BD">بنگلادش</option>
<option value="BB">باربادوس</option>
<option value="BY">بلاروس</option>
<option value="BE">بلژیک</option>
<option value="BZ">بلیز</option>
<option value="BJ">بنین</option>
<option value="BM">برمودا</option>
<option value="BT">بوتان</option>
<option value="BO"> Plurinational استان of, Plurinational استان of</option>
<option value="BQ"> Sint Eustatius and Saba, Sint Eustatius and Saba</option>
<option value="BA">بوسنی و هرزگوین</option>
<option value="BW">بوتسوانا</option>
<option value="BV">جزیره بوت</option>
<option value="BR">برزیل</option>
<option value="IO">قلمرو اقیانوس هند انگلیس</option>
<option value="BN">برونئی دارالسلام</option>
<option value="BG">بلغارستان</option>
<option value="BF">بورکینافاسو</option>
<option value="BI">بوروندی</option>
<option value="KH">کامبوج</option>
<option value="CM">کامرون</option>
<option value="CA">کانادا</option>
<option value="CV">کیپ ورد</option>
<option value="KY">جزایر کیمن</option>
<option value="CF">جمهوری آفریقای مرکزی</option>
<option value="TD">چاد</option>
<option value="CL">شیلی</option>
<option value="CN">چین</option>
<option value="CX">جزیره کریسمس</option>
<option value="CC">جزایر کوکو</option>
<option value="CO">کلمبیا</option>
<option value="KM">کومور</option>
<option value="CG">کنگو</option>
<option value="CD">کنگو, the نسخه ی نمایشیcratic Republic of the</option>
<option value="CK">جزایر کوک</option>
<option value="CR">کاستاریکا</option>
<option value="CI">ساحل عاج</option>
<option value="HR">کرواسی</option>
<option value="CU">کوبا</option>
<option value="CW">کوراسائو</option>
<option value="CY">قبرس</option>
<option value="CZ">جمهوری چک</option>
<option value="DK">دانمارک</option>
<option value="DJ">جیبوتی</option>
<option value="DM">دومینیکا</option>
<option value="DO">دومینیکا</option>
<option value="EC">اکوادور</option>
<option value="EG">مصر</option>
<option value="SV">السالوادور</option>
<option value="GQ">گینه استوایی</option>
<option value="ER">اریتره</option>
<option value="EE">استونی</option>
<option value="ET">اتیوپی</option>
<option value="FK">جزایر فالکلند (مالویناس)</option>
<option value="FO">جزایر فارو</option>
<option value="FJ">فیجی</option>
<option value="FI">فنلاند</option>
<option value="FR">همدان</option>
<option value="GF">فرانسه گویانا</option>
<option value="PF">فرانسه پلینزی</option>
<option value="TF">سرزمین های فرانسه</option>
<option value="GA">گابن</option>
<option value="GM">گامبیا</option>
<option value="GE">جورجیا</option>
<option value="DE">آلمانی</option>
<option value="GH">غنا</option>
<option value="GI">جبل الطارق</option>
<option value="GR">یونان</option>
<option value="GL">گرینلند</option>
<option value="GD">گرنادا</option>
<option value="GP">گوادلوپ</option>
<option value="GU">گوام</option>
<option value="GT">گواتمالا</option>
<option value="GG">گورنسی</option>
<option value="گ ن">گینه</option>
<option value="GW">گینه بیساو</option>
<option value="GY">گویان</option>
<option value="HT">هائیتی</option>
<option value="HM">جزایر هارد</option>
<option value="VA">مقدس</option>
<option value="HN">هندوراس</option>
<option value="HK">هنگ کنگ</option>
<option value="HU">مجارستان</option>
<option value="IS">ایسلند</option>
<option value="IN">هند</option>
<option value="ID">اندونزی</option>
<option value="IR"> Islamic Republic of, Islamic Republic of</option>
<option value="IQ">عراق</option>
<option value="IE">ایرلند</option>
<option value="IM">جزیره من</option>
<option value="IL">اسرائيل</option>
<option value="IT">ایتالیا</option>
<option value="JM">جامائیکا</option>
<option value="JP">ژاپن</option>
<option value="JE">جرسی</option>
<option value="JO">اردن</option>
<option value="KZ">قزاقستان</option>
<option value="KE">کنیا</option>
<option value="KI">کیریباتی</option>
<option value="KP"> نسخه ی نمایشیcratic مردم's Republic of, نسخه ی نمایشیcratic مردم's Republic of</option>
<option value="KR"> نسخه ی نمایشیcratic مردم's Republic of, Republic of</option>
<option value="KW">کویت</option>
<option value="KG">قرقیزستان</option>
<option value="LA">جمهوری خلق</option>
<option value="LV">لتونی</option>
<option value="LB">لبنان</option>
<option value="LS">لسوتو</option>
<option value="LR">لیبریا</option>
<option value="LY">لیبی</option>
<option value="LI">لیختن اشتاین</option>
<option value="LT">لیتوانی</option>
<option value="LU">لوکزامبورگ</option>
<option value="MO">ماکائو</option>
<option value="MK"> the former Yugoslav Republic of, the former Yugoslav Republic of</option>
<option value="MG">ماداگاسکار</option>
<option value="MW">مالاوی</option>
<option value="MY">مالزی</option>
<option value="MV">مالدیو</option>
<option value="ML">مالی</option>
<option value="MT">مالت</option>
<option value="MH">جزایر مارشال</option>
<option value="MQ">مارتینیک</option>
<option value="MR">موریتانی</option>
<option value="MU">موریس</option>
<option value="YT">مایوت</option>
<option value="MX">مکزیک</option>
<option value="FM"> Federated استانs of, Federated استانs of</option>
<option value="MD"> Republic of, Republic of</option>
<option value="MC">موناکو</option>
<option value="MN">مغولستان</option>
<option value="ME">مونته نگرو</option>
<option value="MS">مونتسرات</option>
<option value="MA">مراکش</option>
<option value="MZ">موزامبیک</option>
<option value="MM">میانمار</option>
<option value="NA">ناميبيا</option>
<option value="NR">نائورو</option>
<option value="NP">نپال</option>
<option value="NL">هیرلند</option>
<option value="NC">کالدونیا</option>
<option value="NZ">نیوزیلند</option>
<option value="NI">نیکاراگوئه</option>
<option value="NE">نیجر</option>
<option value="NG">نیجرia</option>
<option value="NU">نیو</option>
<option value="NF">جزیره نورفولک</option>
<option value="م ح">جزایر ماریانای شمالی</option>
<option value="NO">نروژ</option>
<option value="OM">عمان</option>
<option value="PK">پاکستان</option>
<option value="PW">پالائو</option>
<option value="PS"> Occupied, Occupied</option>
<option value="PA">پاناما</option>
<option value="PG">Papua جدید گینه</option>
<option value="PY">پاراگوئه</option>
<option value="PE">پرو</option>
<option value="PH">فیلیپین</option>
<option value="PN">پیتکراین</option>
<option value="PL">لهستان</option>
<option value="PT">پرتغال</option>
<option value="PR">پورتوریکو</option>
<option value="QA">قطر</option>
<option value="RE">ریئنون</option>
<option value="RO">رومانی</option>
<option value="RU">روسیه</option>
<option value="RW">رواندا</option>
<option value="BL">سنت بارتلی</option>
<option value="SH"> Ascension and Tristan da Cunha, Ascension and Tristan da Cunha</option>
<option value="KN">سنت کیتس و نوویس</option>
<option value="LC">سنت لوسیا</option>
<option value="MF">سنت مارتین</option>
<option value="PM">سنت پیر</option>
<option value="VC">سنت وینسنت</option>
<option value="WS">ساموآ</option>
<option value="س م">سن مارینو</option>
<option value="ST">سائو تومه و پرینسیپ</option>
<option value="SA">عربستان سعودی</option>
<option value="SN">سنگال</option>
<option value="RS">صربستان</option>
<option value="SC">سیشل</option>
<option value="SL">سیرا لئون</option>
<option value="SG">سنگاپور</option>
<option value="SX">مارتین</option>
<option value="SK">اسلواکی</option>
<option value="SI">اسلوونی</option>
<option value="SB">جزایر سلیمان</option>
<option value="SO">سومالی</option>
<option value="ZA">آفریقای جنوبی</option>
<option value="GS">South جورجیا and the South Sandwich Islands</option>
<option value="SS">سودان جنوبی</option>
<option value="ES">اسپانیا</option>
<option value="LK">سری لانکا</option>
<option value="SD">سودان</option>
<option value="SR">سورینام</option>
<option value="SJ">سوالبارد و ژوئن مین</option>
<option value="SZ">سوازیلند</option>
<option value="SE">سوئد</option>
<option value="CH">سوئیس</option>
<option value="SY">جمهوری عربی سوریه</option>
<option value="TW"> Province of چین, Province of چین</option>
<option value="TJ">تاجیکستان</option>
<option value="TZ"> United Republic of, United Republic of</option>
<option value="TH">تایلند</option>
<option value="TL">تیمور-لست</option>
<option value="TG">رفتن</option>
<option value="TK">توکلو</option>
<option value="TO">تونگا</option>
<option value="TT">ترینیداد و توباگو</option>
<option value="TN">تونس</option>
<option value="TR">بوقلمون</option>
<option value="TM">ترکمنستان</option>
<option value="TC">جزایر تورکس و کایکوس</option>
<option value="TV">تووالو</option>
<option value="UG">اوگاندا</option>
<option value="UA">اوکراین</option>
<option value="AE">امارات متحده عربی</option>
<option value="GB">انگلستان</option>
<option value="US" selected>استان متحده</option>
<option value="UM">استان متحده Minor Outlying Islands</option>
<option value="UY">اروگوئه</option>
<option value="UZ">ازبکستان</option>
<option value="VU">واناتو</option>
<option value="VE"> Bolivarian Republic of, Bolivarian Republic of</option>
<option value="VN">ویتنام</option>
<option value="VG"> British, British</option>
<option value="VI"> British, U.S.</option>
<option value="WF">والیس و فوتونا</option>
<option value="EH">صحرای غربی</option>
<option value="YE">یمن</option>
<option value="ZM">زامبیا</option>
<option value="ZW">زیمبابوه</option>
</select>
<span class="form-text text-muted">برای اینکه بتونید جستجو کنید از این خصوصیات استفاده کنید<code>data-live-search="true"</code> attribute</span>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">کلمات کلیدی</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker" data-live-search="true">
<option data-tokens="ketchup mustard">هات داگ پنیری</option>
<option data-tokens="mustard">پپرونی</option>
<option data-tokens="frosting">سالاد پاستا</option>
</select>
<span class="form-text text-muted">برای بهبود قابلیت جستجو در استفاده از آنها ، کلمات کلیدی را به گزینه ها اضافه کنید<code>data-tokens</code></span>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">انتخاب محدود</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker" multiple data-max-options="2" data-width="200">
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
</select>
<select class="form-control selectpicker" multiple data-width="200">
<optgroup label="تخصص ها" data-max-options="2">
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
</optgroup>
<optgroup label="تکنسین ها" data-max-options="2">
<option>گرافیست</option>
<option>دیجیتال مارکتر</option>
<option>تولید محتوا</option>
</optgroup>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">متن نگهدارنده</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker" title="انتخاب گزینه">
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12"> انتخاب شده متن</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker" title="انتخاب گزینه">
<option title="انتخاب شده 1">هات داگ پنیری</option>
<option title="انتخاب شده 2" selected>پپرونی</option>
<option title="انتخاب شده 3">سالاد پاستا</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">استایل متن انتخاب شده</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker" multiple data-selected-text-format="count">
<option title="انتخاب شده 1">هات داگ پنیری</option>
<option title="انتخاب شده 2">پپرونی</option>
<option title="انتخاب شده 3" selected>سالاد پاستا</option>
</select>
<div class="mt-2"></div>
<select class="form-control selectpicker" multiple data-selected-text-format="count > 3">
<option title="انتخاب شده 1" selected>هات داگ پنیری</option>
<option title="انتخاب شده 2">پپرونی</option>
<option title="انتخاب شده 3">سالاد پاستا</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">استایل گزینه ها</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker" title="">
<option class="kt--bg-success text-light-success">طراحی سایت</option>
<option class="kt--bg-warning text-light-warning">برنامه نویسی</option>
<option class="kt--bg-primary text-light-primary">رابط کاربری</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">عرض گزینه ها</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker" data-width="" title="خودکار">
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
</select>
<div class="mt-2"></div>
<select class="form-control selectpicker" data-width="200px" title="ثابت: 200px">
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
</select>
<div class="mt-2"></div>
<select class="form-control selectpicker" data-width="75%" title="ثابت: 75%">
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">آیکون</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker">
<option data-icon="la la-bullhorn font-size-lg bs-icon">طراحی سایت</option>
<option data-icon="la la-bookmark font-size-lg bs-icon">برنامه نویسی</option>
<option data-icon="la la-calendar-check-o font-size-lg bs-icon">رابط کاربری</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">متن سفارشی</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker">
<option data-content="<span class='label label-success label-inline label-rounded'>رابط کاربری</span>">طراحی سایت</option>
<option data-content="<span class='label label-warning label-inline label-rounded'>برنامه نویسی</span>">برنامه نویسی</option>
<option data-content="<span class='label label-primary label-inline label-rounded'>رابط کاربری</span>">رابط کاربری</option>
<option data-content="<span class='label label-danger label-inline label-rounded'>تجربه کاربری</span>">تجربه کاربری</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">زیر متن</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker">
<option data-subtext="فرانسه's">طراحی سایت</option>
<option data-subtext="بک اند">برنامه نویسی</option>
<option data-subtext="فرانت اند">رابط کاربری</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">انتخاب و عدم انتخاب همه</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker" multiple data-actions-box="true">
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
<option>تجربه کاربری</option>
<option>تایپیست</option>
<option>مدیر وب</option>
<option>افزونه نویس</option>
<option>وردپرس کار</option>
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
<option>تجربه کاربری</option>
<option>تایپیست</option>
<option>مدیر وب</option>
<option>افزونه نویس</option>
<option>وردپرس کار</option>
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
<option>تجربه کاربری</option>
<option>تایپیست</option>
<option>مدیر وب</option>
<option>افزونه نویس</option>
<option>وردپرس کار</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">جدا کننده</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker">
<option data-subtext="فرانسه's">طراحی سایت</option>
<option data-subtext="بک اند">برنامه نویسی</option>
<option data-divider="true" label="برچسب"></option>
<option data-subtext="فرانت اند">رابط کاربری</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">هدر منو</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker" data-header="انتخاب گزینه">
<option data-subtext="فرانسه's">طراحی سایت</option>
<option data-subtext="بک اند">برنامه نویسی</option>
<option data-subtext="فرانت اند">رابط کاربری</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">غیرفعال</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker" disabled>
<option data-subtext="فرانسه's">طراحی سایت</option>
<option data-subtext="بک اند">برنامه نویسی</option>
<option data-subtext="فرانت اند">رابط کاربری</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">غیرفعال گزینه ها</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker">
<option data-subtext="فرانسه's">طراحی سایت</option>
<option data-subtext="بک اند" disabled>برنامه نویسی</option>
<option data-subtext="فرانت اند">رابط کاربری</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">دکمه ها</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<select class="form-control selectpicker" title="موفقیت" data-style="btn-success">
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
</select>
<div class="mt-2"></div>
<select class="form-control selectpicker" title="هشدار" data-style="btn-warning">
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
</select>
<div class="mt-2"></div>
<select class="form-control selectpicker" title="هشدار" data-style="btn-danger">
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
</select>
<div class="mt-2"></div>
<select class="form-control selectpicker" title="primary" data-style="btn-primary">
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
</select>
<div class="mt-2"></div>
<select class="form-control selectpicker" title="اولیه" data-style="btn-primary">
<option>طراحی سایت</option>
<option>برنامه نویسی</option>
<option>رابط کاربری</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label text-right col-lg-3 col-sm-12">مودال</label>
<div class="col-lg-4 col-md-9 col-sm-12">
<a href="" class="btn btn-light-success font-weight-bold" data-toggle="modal" data-target="#kt_select_modal">راه اندازی مودال</a>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-lg-9 ml-lg-auto">
<button type="reset" class="btn btn-primary mr-2">ارسال</button>
<button type="reset" class="btn btn-secondary">لغو</button>
</div>
</div>
</div>
</form>
<!--end::Form-->
</div>
// کلاس definition
var KTبوت استرپانتخاب = function () {
// خصوصی functions
var demos = function () {
// minimum setup
دلار('.kt-selectpicker').selectpicker();
}
return {
// public functions
init: function() {
demos();
}
};
}();
jQuery(document).ready(function() {
KTبوت استرپانتخاب.init();
});
