ورودیی متن
ورودیی پسورد
ورودیی ایمیل
ورودیی لینک
ورودیی تلفن
ورودیی جستجو
ورودیی رنج
ورودیی رنج سفارشی
ورودیی با لیبل
<div class="form-group">
<label for="exampleFormControlInput1">Full Name</label>
<input type="text" class="form-control" id="exampleFormControlInput1" value="محمد رضا رضایی">
</div>
کنترل های فرم
طرح بندی های شبکه
شبکه فرم
<form>
<div class="row mb-4">
<div class="col">
<input type="text" class="form-control" placeholder="نام کوچک">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="نام فامیلی">
</div>
</div>
<input type="submit" name="time" class="btn btn-primary">
</form>
ردیف فرم
<form>
<div class="form-row mb-4">
<div class="col">
<input type="text" class="form-control" placeholder="نام کوچک">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="نام فامیلی">
</div>
</div>
<input type="submit" name="time" class="mb-4 btn btn-primary">
</form>
فرم گروهی
<form>
<div class="form-group mb-4">
<label for="formGroupExampleInput">برچسب نمونه</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="مثال ورودی">
</div>
<div class="form-group mb-4">
<label for="formGroupExampleInput2">برچسب دیگر</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="ورودی دیگر">
</div>
<input type="submit" name="time" class="btn btn-primary">
</form>
اندازه ستون
<form>
<div class="form-row mb-4">
<div class="col-7">
<input type="text" class="form-control" placeholder="شهر">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="دولت">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="کد پستی">
</div>
</div>
<input type="submit" name="time" class="mb-4 btn btn-primary">
</form>
متن راهنما
ورودیی با متن راهنما (پیش فرض سمت چپ)
برای متن یاور از small
و .text-off
استفاده کنید.
<div class="form-group">
<p>Use <code>small</code> tag and <code>.text-muted</code> من متن کمک کننده هستم </p>
<label for="h-text1" class="sr-only">آدرس ایمیل</label>
<input type="text" class="form-control" id="h-text1" aria-describedby="h-text1" placeholder="">
<small id="sh-text1" class="form-text text-muted">من متن کمک کننده هستم</small>
</div>
ورودیی با متن راهنمایی نشان (پیش فرض سمت چپ)
برچسب small
را در داخل برچسب span
با .badge ببندید
من متن کمک کننده هستم
<div class="form-group">
<p>Wrap the <code>small</code> tag inside the <code>span</code> tag with <code>.badge</code></p>
<label for="h-text4" class="sr-only">آدرس ایمیل</label>
<input type="text" class="form-control" id="h-text4" aria-describedby="h-text4" placeholder="">
<div class=" mt-1">
<span class="badge badge-primary">
<small id="sh-text4" class="form-text mt-0">من متن کمک کننده هستم</small>
</span>
</div>
</div>
ورودیی با متن راهنمایی نشان بلوک (پیش فرض سمت چپ)
برای ایجاد انسداد از کلاس .w-100
به برچسب دهانه
استفاده کنید.
من متن کمک کننده هستم
<div class="form-group">
<p>Use <code>.w-100</code> class to the <code>span</code> tag to make block.</p>
<label for="h-text7" class="sr-only">آدرس ایمیل</label>
<input type="text" class="form-control" id="h-text7" aria-describedby="h-text7" placeholder="">
<div class="mt-1">
<span class="badge badge-primary w-100">
<small id="sh-text7" class="form-text mt-0 text-left">من متن کمک کننده هستم</small>
</span>
</div>
</div>
متن راهنمایی درون خطی
<form class="form-inline mb-4">
<div class="form-group d-block text-left">
<label for="inputPassword6" class="d-block">Password</label>
<input type="password" id="inputPassword6" class=" form-control mt-2" aria-describedby="passwordHelpInline">
<small id="passwordHelpInline" class="text-muted">
حداقل 8-20 کاراکتر
</small>
</div>
</form>
<input type="submit" name="time" class="btn btn-primary">
اندازه
زمینه های ورودی
<!-- ورودی بزرگ -->
<div class="form-group">
<label for="exampleFormControlInput1">ورودی بزرگ</label>
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
</div>
<!-- ورودی پیش فرض -->
<div class="form-group">
<label for="exampleFormControlInput1">ورودی پیش فرض</label>
<input class="form-control" type="text" placeholder="Default input">
</div>
<!-- ورودی کوچک -->
<div class="form-group">
<label for="exampleFormControlInput1">ورودی کوچک</label>
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>
فیلد را انتخاب کنید
<!-- ورودی بزرگ -->
<select class="form-control form-control-lg">
<option>بزرگ را انتخاب کنید</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<!-- ورودی پیش فرض -->
<select class="form-control">
<option>پیش فرض را انتخاب کنید</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<!-- ورودی کوچک -->
<select class="form-control form-control-sm">
<option>کوچک را انتخاب کنید</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
اندازه برچسب افقی
<div class="form-group row mb-4">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
<div class="form-group row mb-4">
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div>
</div>
<div class="form-group row mb-4">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
</div>
</div>
فقط خواندنی
ورودی فقط خواندنی
<input class="form-control" type="text" placeholder="فقط خواندنی" readonly>
بارگذاری پرونده سفارشی HTML
بارگذاری پرونده
<div class="custom-file mb-4">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">انتخاب فایل</label>
</div>
غیرفعال
زمینه غیرفعال
<form>
<fieldset disabled>
<div class="form-group mb-4">
<label for="disabledTextInput">ورودی غیرفعال است</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="ورودی غیرفعال است">
</div>
<div class="form-group mb-4">
<label for="disabledSelect">منوی انتخاب غیرفعال است</label>
<select id="disabledSelect" class="form-control">
<option>انتخاب غیرفعال</option>
</select>
</div>
<div class="form-check mt-5 mb-3 pl-0">
<div class="custom-control custom-checkbox mb-4">
<input type="checkbox" class="custom-control-input" id="disabledFieldsetCheck">
<label class="custom-control-label" for="disabledFieldsetCheck">نمی توانید این را بررسی کنید</label>
</div>
</div>
<button type="submit" class="btn btn-primary mt-0">Submit</button>
</fieldset>
</form>
سفارشی
چک باکس ها
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">این کادر تأیید را علامت بزنید</label>
</div>
رادیو درون خطی
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">این رادیو سفارشی را تغییر دهید</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">این رادیو سفارشی را تغییر دهید</label>
</div>
رادیو
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">این رادیو سفارشی را تغییر دهید</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">یا این رادیو سفارشی دیگر را تغییر دهید</label>
</div>
غیرفعال
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
<label class="custom-control-label" for="customCheckDisabled">این کادر تأیید را علامت بزنید</label>
</div>
<div class="custom-control custom-radio mb-4">
<input type="radio" id="radio3" name="radioDisabled" class="custom-control-input" disabled>
<label class="custom-control-label" for="radio3">این رادیو سفارشی را تغییر دهید</label>
</div>
انتخاب منو
<select class="custom-select mb-4">
<option selected>این منوی انتخاب را باز کنید</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
اندازه منو را انتخاب کنید
<select class="custom-select custom-select-lg">
<option selected>این منوی انتخاب را باز کنید</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm">
<option selected>این منوی انتخاب را باز کنید</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
چند انتخاب کنید
<select class="custom-select" multiple>
<option selected>این منوی انتخاب را باز کنید</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
اندازه را انتخاب کنید
<select class="custom-select mb-4" size="4">
<option selected>این منوی انتخاب را باز کنید</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="3">Four</option>
<option value="3">Five</option>
</select>
© کپی رایت
بومی سازی شده توسط : ایمان پاکروح