-
-
-
-
- مدیر
جان اسمیت
عناصر پیشرفته
- خانه
- عناصر پیشرفته
اجزای انتخابگر
<div class="row">
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">انتخاب پیش فرض</label>
<div class="form-group position-relative">
<select class="form-select form-control h-58" aria-label="Default select example">
<option selected class="text-dark">ارزش 1</option>
<option value="1" class="text-dark">ارزش 2</option>
<option value="2" class="text-dark">ارزش 3</option>
<option value="3" class="text-dark">ارزش 4</option>
</select>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">چند برچسب</label>
<div class="tag-container p-1 rounded-3 form-control h-auto p-0" id="tagContainer">
<input type="text" id="tagInput" class="form-control h-49 border-0" placeholder="چند برچسب را انتخاب کنید">
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">انتخاب برچسب</label>
<div class="form-group position-relative">
<select class="form-select form-control h-58" aria-label="Default select example">
<option selected class="text-dark">فارول</option>
<option value="1" class="text-dark">سکو</option>
<option value="2" class="text-dark">ادلو</option>
<option value="3" class="text-dark">اورلا</option>
</select>
</div>
</div>
</div>
</div>
ورودی انتخاب کشور سفارشی
<form>
<div class="row">
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">Default Select</label>
<div class="form-group position-relative">
<select class="form-select form-control h-58" aria-label="Default select example">
<option selected class="text-dark">ارزش 1</option>
<option value="1" class="text-dark">ارزش 2</option>
<option value="2" class="text-dark">ارزش 3</option>
<option value="3" class="text-dark">ارزش 4</option>
</select>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">چند برچسب</label>
<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroupUsername">شماره را وارد کنید</label>
<div class="input-group h-58 form-control p-0">
<div class="input-group-text rounded-10 px-3">
<img src="assets/images/united-states.jpg" alt="united-states">
<span class="ms-3 text-dark">+1</span>
</div>
<input type="number" class="form-control h-auto border-0 text-dark" id="inlineFormInputGroupUsername" placeholder="شماره را وارد کنید">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label">انتخاب برچسب</label>
<div class="form-group position-relative">
<select class="form-select form-control h-58 ps-5" aria-label="Default select example">
<option selected class="text-dark">آمریکا</option>
<option value="1" class="text-dark">انگلستان</option>
<option value="2" class="text-dark">آلمان</option>
</select>
<img src="assets/images/united-states.jpg" class="position-absolute top-50 start-0 translate-middle-y ps-3" alt="united-states">
</div>
</div>
</div>
</div>
</form>
بر اساس تاریخ
ی | د | س | چ | پ | ج | ش |
---|
<div class="calendar-content">
<h1 id="month-year"></h1>
<table id="calendar">
<thead>
<tr>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
</tr>
</thead>
<tbody id="calendar-body"></tbody>
</table>
</div>
چرخش لمسی سفارشی
<div class="product-quantity">
<div class="add-to-cart-counter gap-2">
<button type="submit" class="minusBtn"></button>
<inputtype="text"size="25"value="1"class="count"/>
<button type="submit" class="plusBtn"></button>
</div>
</div>
<div class="product-quantity bg-e2e8f0">
<div class="add-to-cart-counter gap-2">
<button type="submit" class="minusBtn"></button>
<inputtype="text"size="25"value="1"class="count"/>
<button type="submit" class="plusBtn"></button>
</div>
</div>
(عرض کامل) چرخش لمسی سفارشی
<div class="product-quantity w-100">
<div class="add-to-cart-counter gap-2 justify-content-between">
<button type="submit" class="minusBtn"></button>
<inputtype="text"size="25"value="1"class="count"/>
<button type="submit" class="plusBtn"></button>
</div>
</div>
<div class="product-quantity w-100 bg-e2e8f0">
<div class="add-to-cart-counter gap-2 justify-content-between">
<button type="submit" class="minusBtn"></button>
<inputtype="text"size="25"value="1"class="count"/>
<button type="submit" class="plusBtn"></button>
</div>
</div>
رنگهای چرخش لمسی سفارشی
<div class="product-quantity">
<div class="add-to-cart-counter gap-3 justify-content-between">
<button type="submit" class="minusBtn bg-primary text-white"></button>
<inputtype="text"size="25"value="1"class="count"/>
<button type="submit" class="plusBtn bg-primary text-white"></button>
</div>
</div>
<div class="product-quantity bg-e2e8f0">
<div class="add-to-cart-counter gap-3 justify-content-between">
<button type="submit" class="minusBtn bg-white text-primary"></button>
<inputtype="text"size="25"value="1"class="count bg-primary text-white"/>
<button type="submit" class="plusBtn bg-white text-primary"></button>
</div>
</div>
<div class="product-quantity">
<div class="add-to-cart-counter gap-3 justify-content-between">
<button type="submit" class="minusBtn bg-danger text-white"></button>
<inputtype="text"size="25"value="1"class="count border-danger"/>
<button type="submit" class="plusBtn bg-danger text-white"></button>
</div>
</div>
<div class="product-quantity">
<div class="add-to-cart-counter gap-3 justify-content-between">
<button type="submit" class="minusBtn bg-success text-white"></button>
<inputtype="text"size="25"value="1"class="count border-success"/>
<button type="submit" class="plusBtn bg-success text-white"></button>
</div>
</div>