email@example.com
<div class="card card-custom"> <div class="card-header"> <h3 class="card-title"> کنترل ها </h3> <div class="card-toolbar"> <div class="example-tools justify-content-center"> <span class="example-toggle" data-toggle="tooltip" title="مشاهد کد"></span> <span class="example-copy" data-toggle="tooltip" title="کپی کد"></span> </div> </div> </div> <!--begin::Form--> <form> <div class="card-body"> <div class="form-group mb-8"> <div class="alert alert-custom alert-default" role="alert"> <div class="alert-icon"><i class="flaticon-warning text-primary"></i></div> <div class="alert-text"> فرم مثال زیر عناصر فرم جی اس معمول را نشان می دهد که از کلاس های اضافی سبک های به روز شده را از بوت استرپ دریافت می کنند. </div> </div> </div> <div class="form-group"> <label>آدرس الکترونیک</label> <input type="email" class="form-control" placeholder="ایمیل را وارد کنید"/> <span class="form-text text-muted">ما هرگز ایمیل شما را با هیچ کس دیگری به اشتراک نمی گذاریم.</span> </div> <div class="form-group"> <label for="exampleورودیکلمه عبور1">کلمه عبور</label> <input type="password" class="form-control" id="exampleورودیکلمه عبور1" placeholder="کلمه عبور"/> </div> <div class="form-group"> <label>استاتیک:</label> <p class="form-control-plaintext text-muted">email@example.com</p> </div> <div class="form-group"> <label for="exampleانتخاب1">سلکت</label> <select class="form-control" id="exampleانتخاب1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleانتخابگر2">انتخاب اینپوت چندگانه</label> <select multiple="" class="form-control" id="exampleانتخابگر2"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group mb-1"> <label for="exampleتکس اریا">تکس اریا</label> <textarea class="form-control" id="exampleتکس اریا" rows="3"></textarea> </div> </div> <div class="card-footer"> <button type="reset" class="btn btn-primary mr-2">ارسال</button> <button type="reset" class="btn btn-secondary">لغو</button> </div> </form> <!--end::Form--> </div>
.form-control
<div class="card card-custom"> <div class="card-header"> <h3 class="card-title"> اینپوت </h3> </div> <!--begin::Form--> <form> <div class="card-body"> <div class="form-group mb-8"> <div class="alert alert-custom alert-default" role="alert"> <div class="alert-icon"><i class="flaticon-warning text-primary"></i></div> <div class="alert-text"> اینجا یک مثال <code>.form-control</code> اعمال شده برای هر متن درون اینپوت: </div> </div> </div> <div class="form-group row"> <label class="col-2 col-form-label">متن</label> <div class="col-10"> <input class="form-control" type="text" value="کاله صنعتگر" id="example-text-input"/> </div> </div> <div class="form-group row"> <label for="example-search-input" class="col-2 col-form-label">جستجو</label> <div class="col-10"> <input class="form-control" type="search" value="چگونه وب را تسخیر کنم" id="example-search-input"/> </div> </div> <div class="form-group row"> <label for="example-email-input" class="col-2 col-form-label">پست الکترونیک</label> <div class="col-10"> <input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input"/> </div> </div> <div class="form-group row"> <label for="example-url-input" class="col-2 col-form-label">آدرس اینترنتی</label> <div class="col-10"> <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input"/> </div> </div> <div class="form-group row"> <label for="example-tel-input" class="col-2 col-form-label">تلفن</label> <div class="col-10"> <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input"/> </div> </div> <div class="form-group row"> <label for="example-password-input" class="col-2 col-form-label">کلمه عبور</label> <div class="col-10"> <input class="form-control" type="password" value="hunter2" id="example-password-input"/> </div> </div> <div class="form-group row"> <label for="example-number-input" class="col-2 col-form-label">عدد</label> <div class="col-10"> <input class="form-control" type="number" value="42" id="example-number-input"/> </div> </div> <div class="form-group row"> <label for="example-datetime-local-input" class="col-2 col-form-label">تاریخ و زمان</label> <div class="col-10"> <input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input"/> </div> </div> <div class="form-group row"> <label for="example-date-input" class="col-2 col-form-label">تاریخ</label> <div class="col-10"> <input class="form-control" type="date" value="2011-08-19" id="example-date-input"/> </div> </div> <div class="form-group row"> <label for="example-month-input" class="col-2 col-form-label">ماه</label> <div class="col-10"> <input class="form-control" type="month" value="2011-08" id="example-month-input"/> </div> </div> <div class="form-group row"> <label for="example-week-input" class="col-2 col-form-label">هفته</label> <div class="col-10"> <input class="form-control" type="week" value="2011-W33" id="example-week-input"/> </div> </div> <div class="form-group row"> <label for="example-time-input" class="col-2 col-form-label">زمان</label> <div class="col-10"> <input class="form-control" type="time" value="13:45:00" id="example-time-input"/> </div> </div> <div class="form-group row"> <label for="example-color-input" class="col-2 col-form-label">رنگ</label> <div class="col-10"> <input class="form-control" type="color" value="#563d7c" id="example-color-input"/> </div> </div> <div class="form-group row"> <label for="example-email-input" class="col-2 col-form-label">دامنه</label> <div class="col-10"> <input class="form-control" type="range"/> </div> </div> </div> <div class="card-footer"> <div class="row"> <div class="col-2"> </div> <div class="col-10"> <button type="reset" class="btn btn-success mr-2">ارسال</button> <button type="reset" class="btn btn-secondary">لغو</button> </div> </div> </div> </form> </div>
.form-controller-solid
<div class="card card-custom"> <div class="card-header"> <h3 class="card-title"> اینپوت </h3> </div> <!--begin::Form--> <form class="form"> <div class="card-body"> <div class="form-group form-group-last"> <div class="alert alert-custom alert-default" role="alert"> <div class="alert-icon"><i class="flaticon-warning text-primary"></i></div> <div class="alert-text"> افزودن <code>disabled</code> or <code>readonly</code> ویژگی بولین در ورودی برای جلوگیری از تعامل کاربر. غیرفعال کردن اینپوت ها با افزودن<code>not-allowed</code> cursor. </div> </div> </div> <div class="form-group"> <label>ورودی</label> <input type="email" class="form-control form-control-solid" placeholder="نمونه input"/> </div> <div class="form-group"> <label>انتخاب</label> <select class="form-control form-control-solid"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleتکس اریا">تکس اریا</label> <textarea class="form-control form-control-solid" rows="3"></textarea> </div> </div> <div class="card-footer"> <button type="reset" class="btn btn-primary mr-2">ارسال</button> <button type="reset" class="btn btn-secondary">لغو</button> </div> </form> <!--end::Form--> </div>
disabled
readonly
<div class="card card-custom"> <div class="card-header"> <h3 class="card-title"> اینپوت </h3> </div> <!--begin::Form--> <form class="form"> <div class="card-body"> <div class="form-group form-group-last"> <div class="alert alert-custom alert-default" role="alert"> <div class="alert-icon"><i class="flaticon-warning text-primary"></i></div> <div class="alert-text"> افزودن <code>disabled</code> or <code>readonly</code> ویژگی بولین در ورودی برای جلوگیری از تعامل کاربر. غیرفعال کردن اینپوت ها با افزودن<code>not-allowed</code> cursor. </div> </div> </div> <div class="form-group"> <label>اینپوت غیرفعال</label> <input type="email" class="form-control" disabled="disabled" placeholder="اینپوت غیرفعال"/> </div> <div class="form-group"> <label>انتخاب اینپوت</label> <select class="form-control" disabled="disabled"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleتکس اریا">تکس اریا غیرفعال</label> <textarea class="form-control" disabled="disabled" rows="3"></textarea> </div> <div class="form-group"> <label>اینپوت فقط خواندنی</label> <input type="email" class="form-control" readonly placeholder="اینپوت فقط خواندنی"/> </div> <div class="form-group"> <label for="exampleتکس اریا">تکس اریا فقط خواندنی</label> <textarea class="form-control" readonly rows="3"></textarea> </div> </div> <div class="card-footer"> <button type="reset" class="btn btn-primary mr-2">ارسال</button> <button type="reset" class="btn btn-secondary">لغو</button> </div> </form> <!--end::Form--> </div>
.form-control-lg
.col-lg-*
<div class="card card-custom"> <div class="card-header"> <h3 class="card-title"> اندازه اینپوت </h3> </div> <!--begin::Form--> <form class="form"> <div class="card-body"> <div class="form-group form-group-last"> <div class="alert alert-custom alert-default" role="alert"> <div class="alert-icon"><i class="flaticon-warning text-primary"></i></div> <div class="alert-text"> ارتفاعات را با استفاده از کلاس هایی مانند تنظیم کنید<code>.form-control-lg</code>, و با استفاده از کلاس های ستون گرید ، عرض را تنظیم کنید <code>.col-lg-*</code> </div> </div> </div> <div class="form-group"> <label>اینپوت بزرگ</label> <input type="email" class="form-control form-control-lg" placeholder="اینپوت بزرگ"/> </div> <div class="form-group"> <label>اینپوت پیش فرض</label> <input type="email" class="form-control" placeholder="اینپوت بزرگ"/> </div> <div class="form-group"> <label>اینپوت کوچک</label> <input type="email" class="form-control form-control-sm" placeholder="اینپوت بزرگ"/> </div> <div class="form-group"> <label for="exampleانتخابl">سلکت بزرگ</label> <select class="form-control form-control-lg" id="exampleانتخابl"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleانتخابd">سلکت پیش فرض</label> <select class="form-control" id="exampleانتخابd"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleانتخابs">سلکت کوچک</label> <select class="form-control form-control-sm" id="exampleانتخابs"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div> <div class="card-footer"> <button type="reset" class="btn btn-success mr-2">ارسال</button> <button type="reset" class="btn btn-secondary">لغو</button> </div> </form> <!--end::Form--> </div>
<div class="card card-custom"> <div class="card-header"> <h3 class="card-title"> کنترل های سفارشی </h3> </div> <!--begin::Form--> <form class="form"> <div class="card-body"> <div class="form-group form-group-last"> <div class="alert alert-custom alert-default" role="alert"> <div class="alert-icon"><i class="flaticon-warning text-primary"></i></div> <div class="alert-text"> از عناصر فرم کاملاً سفارشی ما برای جایگزینی پیش فرض مرورگر استفاده کنید. آنها بالای مارک معنایی و در دسترس ساخته شده اند ، از عناصر فرم کاملاً سفارشی ما برای جایگزینی پیش فرض مرورگر استفاده می کنند. آنها در بالای نشانگر معنایی و در دسترس ساخته شده اند ، بنابراین جایگزین های محکم برای هرگونه کنترل فرم پیش فرض هستند. </div> </div> </div> <div class="form-group"> <label>سفارشی دامنه</label> <div></div> <input type="range" class="custom-range" min="0" max="5" id="customدامنه2"/> </div> <div class="form-group"> <label>سلکت سفارشی</label> <div></div> <select class="custom-select form-control"> <option selected>باز کردن سلکت منو</option> <option value="1">یک</option> <option value="2">دو</option> <option value="3">سه</option> </select> </div> <div class="form-group"> <label>مرورگر فایل</label> <div></div> <div class="custom-file"> <input type="file" class="custom-file-input" id="customفایل"/> <label class="custom-file-label" for="customفایل">انتخاب فایل</label> </div> </div> </div> <div class="card-footer"> <button type="reset" class="btn btn-primary mr-2">ارسال</button> <button type="reset" class="btn btn-secondary">لغو</button> </div> </form> <!--end::Form--> </div>
