گروه های ورودی فرم
افزونه های ورودی سمت چپ
-
افزونه های ورودی سمت چپ - مشاهده کد
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
دهانه را با آن اضافه کنید
.input-group-text
کلاس قبل
<input>
@
افزونه های ورودی هر دو طرف
افزونه های ورودی هر دو طرف - مشاهده کد
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
دهانه را با آن اضافه کنید
.input-group-text
کلاس قبل
<input>
دلار
.00
افزونه های ورودی درست
افزونه های ورودی سمت راست - مشاهده کد
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
<span class="input-group-text">@</span>
</div>
دهانه را با آن اضافه کنید
.input-group-text
طبقه
<input>
@
افزونه های ورودی نماد سمت چپ
افزونه های ورودی نماد سمت چپ - مشاهده کد
<div class="input-group">
<span class="input-group-text"><i data-feather="file-text" class="feather-sm fill-white"></i></span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
افزونه های ورودی هر دو نماد جانبی
افزونه های ورودی هر دو نماد جانبی - مشاهده کد
<div class="input-group mb-3">
<span class="input-group-text"><i data-feather="file-text" class="feather-sm fill-white"></i></span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text"><i data-feather="trash-2" class="feather-sm fill-white"></i></span>
</div>
افزونه های ورودی آیکون سمت راست
افزونه های ورودی آیکون سمت راست - مشاهده کد
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
<span class="input-group-text"><i data-feather="file-text" class="feather-sm fill-white"></i></span>
</div>
افزودنی با کادر انتخاب
کادر انتخاب درست
افزونه هایی با کادر انتخاب درست - مشاهده کد
<form>
<div class="input-group">
<div class="input-group-text">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="checkbox3" value="check">
<label class="form-check-label" for="checkbox3"></label>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
</form>
برای استفاده از افزودن
input-group-prepend
قبل از ورودی
کادر و دکاردیبهشت
افزودنیها با کادر و دکاردیبهشت - مشاهده کد
<form>
<div class="input-group">
<div class="input-group-text">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="checkbox2" value="check">
<label class="form-check-label" for="checkbox2"></label>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
<button class="btn bg-info-subtle text-info " type="button">Go!</button>
</div>
</form>
برای استفاده از افزودن
input-group-prepend & append
قسمت ورودی قبل و afetr.
کادر انتخاب سمت چپ
افزونه هایی با کادر انتخاب سمت چپ - مشاهده کد
<form>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with checkbox">
<div class="input-group-text">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="checkbox4" value="check">
<label class="form-check-label" for="checkbox4"></label>
</div>
</div>
</div>
</form>
برای استفاده از افزودن
input-group-append
پس از ورودی
افزودنی با رادیو
رادیو چپ
افزونه های با رادیو سمت چپ - مشاهده کد
<form>
<div class="input-group">
<div class="input-group-text">
<div class="form-check">
<input type="radio" id="customRadio5" name="customRadio" class="form-check-input">
<label class="form-check-label" for="customRadio5"></label>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div>
</form>
برای استفاده از افزودن
input-group-prepend
قبل از ورودی
رادیو و دکاردیبهشت
افزونه های با رادیو و دکاردیبهشت - مشاهده کد
<form>
<div class="input-group">
<button class="btn bg-info-subtle text-info " type="button">Go!</button>
<input type="text" class="form-control" aria-label="Text input with radio button">
<div class="input-group-text">
<div class="form-check">
<input type="radio" id="customRadio6" name="customRadio" class="form-check-input">
<label class="form-check-label" for="customRadio6"></label>
</div>
</div>
</div>
</form>
برای استفاده از افزودن
input-group-prepend & append
قسمت ورودی قبل و afetr.
رادیو راست
افزونه های با رادیو راست - مشاهده کد
<form>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with radio button">
<div class="input-group-append">
<div class="input-group-text">
<div class="form-check">
<input type="radio" id="customRadio7" name="customRadio" class="form-check-input">
<label class="form-check-label" for="customRadio7"></label>
</div>
</div>
</div>
</div>
</form>
برای استفاده از افزودن
input-group-append
پس از ورودی
افزونه ها با دکاردیبهشت ها
دکاردیبهشت رنگ سمت چپ
افزونه هایی با دکاردیبهشت رنگ سمت چپ - مشاهده کد
<form class="mt-3">
<div class="input-group mb-3">
<button class="btn bg-info-subtle text-info " type="button">Go!</button>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
</form>
برای استفاده از افزودن
button
در پدیدار
دکاردیبهشت های رنگی هر دو
افزونه هایی با دکاردیبهشت های رنگی هر دو - مشاهده کد
<form class="mt-3">
<div class="input-group mb-3">
<button class="btn bg-danger-subtle text-danger d-flex align-items-center" type="button"><i data-feather="heart" class="fill-white feather-sm me-1"></i> Love</button>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
<button class="btn bg-info-subtle text-info d-flex align-items-center" type="button"><i data-feather="slash" class="fill-white feather-sm me-1"></i>Hate</button>
</div>
</form>
برای استفاده از افزودن
button
در پدیدار
دکاردیبهشت رنگ راست
افزونه هایی با دکاردیبهشت رنگ راست - مشاهده کد
<form class="mt-3">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
<button class="btn bg-info-subtle text-info " type="button">Go!</button>
</div>
</form>
برای استفاده از افزودن
button
در ضمیاردیبهشت
دکاردیبهشت نماد سمت چپ
افزونه هایی با دکاردیبهشت نماد سمت چپ - مشاهده کد
<form class="mt-3">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn bg-info-subtle text-info" type="button">
<i data-feather="settings" class="fill-white feather-sm"></i>
</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
</form>
دکاردیبهشت های نماد هر دو
افزونه هایی با دکاردیبهشت های نماد هر دو - مشاهده کد
<form class="mt-3">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn bg-info-subtle text-info" type="button">
<i data-feather="edit-2" class="fill-white feather-sm"></i>
</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
<button class="btn bg-danger-subtle text-danger" type="button">
<i data-feather="trash-2" class="fill-white feather-sm"></i>
</button>
</div>
</form>
دکاردیبهشت نماد راست
افزونه هایی با دکاردیبهشت نماد راست - مشاهده کد
<form class="mt-3">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
<button class="btn bg-danger-subtle text-danger" type="button">
<i data-feather="heart" class="fill-white feather-sm"></i>
</button>
</div>
</form>
چند افزونه چندگانه
افزودنی ها با سمت چپ
افزونه هایی با سمت چپ - مشاهده کد
<form class="mt-3">
<div class="input-group">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>
</form>
برای استفاده از افزودن
input-group-text
کلاس در
افزودنی ها با سمت راست
افزونه هایی با سمت راست - مشاهده کد
<form class="mt-3">
<div class="input-group">
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
</form>
برای استفاده از افزودن
input-group-text
کلاس در
ورودی های چندگانه با افزونه ها
ورودی با سمت راست
ورودی با سمت راست - مشاهده کد
<form class="mt-3">
<div class="input-group">
<span class="input-group-text">First and last name</span>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
</form>
برای استفاده از افزودن
form-control
دو
ورودی با سمت چپ
ورودی با سمت چپ - مشاهده کد
<form class="mt-3">
<div class="input-group">
<input type="text" class="form-control">
<input type="text" class="form-control">
<span class="input-group-text">First and last name</span>
</div>
</form>
برای استفاده از افزودن
form-control
دو
افزونه های دکاردیبهشت ای
دکاردیبهشت با سمت چپ
دکاردیبهشت با سمت چپ - مشاهده کد
<form class="mt-3">
<div class="input-group">
<button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
<input type="text" class="form-control" placeholder="Left Side" aria-label="" aria-describedby="basic-addon1">
</div>
</form>
برای استفاده از افزودن
button
در پدیدار
دکاردیبهشت با سمت راست
دکاردیبهشت با سمت راست - مشاهده کد
<form class="mt-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Right Side" aria-label="Recipient's username" aria-describedby="basic-addon2">
<button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
</div>
</form>
برای استفاده از افزودن
button
در ضمیاردیبهشت
چندین دکاردیبهشت با سمت چپ
چندین دکاردیبهشت با سمت چپ - کد مشاهده
<form class="mt-3">
<div class="input-group">
<button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
<button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
<input type="text" class="form-control" placeholder="Left Side" aria-label="" aria-describedby="basic-addon1">
</div>
</form>
چندین دکاردیبهشت با سمت چپ
چندین دکاردیبهشت با سمت چپ - کد مشاهده
<form class="mt-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Right Side" aria-label="Recipient's username" aria-describedby="basic-addon2">
<button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
<button class="btn bg-secondary-subtle text-secondary " type="button">Button</button>
</div>
</form>
افزونه هایی با دکاردیبهشت های کشویی
افزونه هایی با کشویی سمت چپ
افزونه هایی با کشویی سمت چپ - مشاهده کد
<form class="mt-3">
<div class="input-group">
<button class="btn bg-info-subtle text-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
</form>
برای استفاده از افزودن
dropdown
در
افزونه هایی با کشویی سمت راست
افزونه هایی با کشویی سمت راست - مشاهده کد
<form class="mt-3">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<button class="btn bg-info-subtle text-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</form>
برای استفاده از افزودن
dropdown
در
افزونه هایی با بخش های کشویی سمت چپ
افزونه هایی با بخش های کشویی سمت چپ - نمای
<form class="mt-3">
<div class="input-group">
<button type="button" class="btn bg-secondary-subtle text-secondary ">Action</button>
<button type="button" class="btn bg-secondary-subtle text-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>
</form>
افزونه هایی با بخش های کشویی سمت راست
افزونه هایی با بخش های کشویی سمت راست -
<form class="mt-3">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<button type="button" class="btn bg-secondary-subtle text-secondary ">Action</button>
<button type="button" class="btn bg-secondary-subtle text-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</form>
پیوندهای صفحه سریع
- تبعیض /داشبورد/داشبورد 1
- تجارت تجارتی /داشبورد/داشبورد 2
- CRM /داشبورد/داشبورد 3
- مخاطب /برنااردیبهشت ها/مخاطبین
- پست /برنااردیبهشت ها/وبلاگ/پست ها
- شرح /برنااردیبهشت ها/وبلاگ/جزئیات/پخش-ویدئو-راه قبل از آن-آن-was-cool-go-dark-tomor
- مغازه /برنااردیبهشت ها/تجارت الکترونیک/فروشگاه
- مدرن /داشبورد/داشبورد 1
- داشبورد /داشبورد/داشبورد 2
- مخاطب /برنااردیبهشت ها/مخاطبین
- پست /برنااردیبهشت ها/وبلاگ/پست ها
- شرح /برنااردیبهشت ها/وبلاگ/جزئیات/پخش-ویدئو-راه قبل از آن-آن-was-cool-go-dark-tomor
- مغازه /برنااردیبهشت ها/تجارت الکترونیک/فروشگاه