Matdash Bootstrap Admin

ورودی

ورودی پیش فرض

                                          
      <form>
          <div class="form-group">
              <input type="text" class="form-control">
          </div>
      </form>

برای استفاده از افزودن form-control در کلاس به

ورودی با متن یاور

                                          
      <form>
          <div class="form-group">
              <input type="text" class="form-control" id="nametext" aria-describedby="name" placeholder="Name">
              <small id="name" class="form-text text-muted">Helper Text</small>
          </div>
      </form>

رمز

                                        
      <form>
          <div class="form-group">
              <input type="password" class="form-control" id="passtext" placeholder="Password">
          </div>
      </form>

ورودی غیرفعال

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="text" class="form-control" id="nametext1" placeholder="Name" disabled>
          </div>
      </form>

ویژگی را اضافه کنیدdisabledبرای غیرفعال کردن ورودی

مقدار ورودی از پیش تعریف شده

                                                                                  
      <form class="mt-2">
          <div class="form-group">
              <input type="text" class="form-control" id="prenametext" value="Name">
          </div>
      </form>

ویژگی را اضافه کنید value="VALUE" به

قسمت ورودی Readonly

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="text" class="form-control" id="readonly" placeholder="Readonly Text" readonly>
          </div>
      </form>

ویژگی را اضافه کنید readonly برای تنظیم

ورودی با نگهدارنده مکان

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="text" class="form-control" id="placeholder" placeholder="Placeholder Text">
          </div>
      </form>

ویژگی را اضافه کنید placeholder="..." به منطقه ورودی

حداکثر مقدار

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="text" class="form-control" maxlength="6" id="maxval" aria-describedby="maxval" placeholder="Name">
          </div>
      </form>

ویژگی را اضافه کنید maxlength="6" به

حداقل مقدار

                                                                                  
      <form class="mt-4">
        <div class="form-group">
          <input type="text" class="form-control" minlength="5" id="minval" aria-describedby="minval" placeholder="Name">
        </div>
      </form>

ویژگی را اضافه کنید minlength="5" به

گزینه های نوع ورودی

متن نوع ورودی

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="text" class="form-control" value="Name">
          </div>
      </form>

با استفاده از input type="text"

رمز ورود نوع ورودی

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="password" class="form-control" value="Name">
          </div>
      </form>

با استفاده از input type="password"

شماره تلفن ورودی

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="tel" class="form-control" value="1-(444)-444-4445">
          </div>
      </form>

با استفاده از input type="tel"

ایمیل نوع ورودی

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="email" class="form-control" value="abc@example.com">
          </div>
      </form>

با استفاده از input type="email"

URL نوع ورودی

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="url" class="form-control" value="http://google.com">
          </div>
      </form>

با استفاده از input type="url"

جستجوی نوع ورودی

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="search" class="form-control" value="how to...">
          </div>
      </form>

با استفاده از input type="search"

شماره های نوع ورودی

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="number" class="form-control" value="6029">
          </div>
      </form>

با استفاده از input type="number"

زمان تاریخ ورودی زمان

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="datetime-local" class="form-control" value="2008-05-13T22:33:00">
          </div>
      </form>

با استفاده از input type="datetime-local"

تاریخ نوع ورودی

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="date" class="form-control" value="2018-05-13">
          </div>
      </form>

با استفاده از input type="date"

زمان نوع ورودی

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="time" class="form-control" value="22:33:00">
          </div>
      </form>

با استفاده از input type="time"

هفته نوع ورودی

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="week" class="form-control" value="2011-W33">
          </div>
      </form>

با استفاده از input type="week"

ماه نوع ورودی

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="month" class="form-control" value="1999-08">
          </div>
      </form>

با استفاده از input type="month"

رنگ نوع ورودی

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="color" class="form-control" value="#563d7c">
          </div>
      </form>

با استفاده از input type="color"

ColorPicker Bootstrap

                                                                                  
      <form class="mt-4">
          <div class="form-group">
              <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
          </div>
      </form>

استفاده کردن form-control-color کلاس

محدوده نوع ورودی

                                                                                  
      <form class="mt-3">
          <div class="form-group">
              <input type="range" class="form-range" id="customRange1">
          </div>
      </form>

با استفاده از input type="range"

تنیس عمومی

تنیس

                                                                                  
      <form class="mt-3">
          <div class="form-group">
              <textarea class="form-control" rows="3"></textarea>
          </div>
      </form>

Textarea با مکان نگهدارنده

                                                                                  
      <form class="mt-3">
          <div class="form-group">
              <textarea class="form-control" rows="3" placeholder="Text Here..."></textarea>
          </div>
      </form>

متن با متن یاور

                                                                                  
      <form>
          <div class="form-group">
              <textarea class="form-control" rows="3" placeholder="Text Here..."></textarea>
              <small id="textHelp" class="form-text text-muted">Helper Text</small>
          </div>
      </form>

کادر انتخاب درون خطی و رادیوها

کادر انتخاب پیش فرض درون خطی

                                                                                  
      <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
          <label class="form-check-label" for="inlineCheckbox1">1</label>
      </div>
      <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
          <label class="form-check-label" for="inlineCheckbox2">2</label>
      </div>
      <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
          <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
      </div>

3 (غیرفعال)

دکاردیبهشت‌ رادیویی پیش فرض درون خطی

                                                                                  
      <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
          <label class="form-check-label" for="inlineRadio1">1</label>
      </div>
      <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
          <label class="form-check-label" for="inlineRadio2">2</label>
      </div>
      <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
          <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
      </div>

3 (غیرفعال)

کادر انتخاب درون خطی

                                                                                  
      <div class="form-check-inline">
          <div class="form-check">
              <input type="checkbox" class="form-check-input" id="customCheck1">
              <label class="custom-" for="customCheck1">1</label>
          </div>
      </div>
      <div class="form-check-inline">
          <div class="form-check">
              <input type="checkbox" class="form-check-input" id="customCheck2">
              <label class="custom-" for="customCheck2">2</label>
          </div>
      </div>
      <div class="form-check-inline">
          <div class="form-check">
              <input type="checkbox" class="form-check-input" id="customCheck3" disabled="">
              <label class="custom-" for="customCheck3">3</label>
          </div>
      </div>

رادیوهای سفارشی درون خطی

                                                                                  
      <div class="form-check-inline">
          <div class="form-check">
              <input type="radio" class="form-check-input" id="customControlValidation2" name="radio-stacked">
              <label class="custom-" for="customControlValidation2">1</label>
          </div>
      </div>
      <div class="form-check-inline">
          <div class="form-check">
              <input type="radio" class="form-check-input" id="customControlValidation3" name="radio-stacked">
              <label class="custom-" for="customControlValidation3">2</label>
          </div>
      </div>
      <div class="form-check-inline">
          <div class="form-check">
              <input type="radio" class="form-check-input" id="customControlValidation4" name="radio-stacked" disabled>
              <label class="custom-" for="customControlValidation4">3</label>
          </div>
      </div>

انتخاب عمومی

انتخاب کردن

                                                                                  
      <form class="mt-4">
          <div class="form-group mb-4">
              <label for="exampleFormControlSelect1">Select No</label>
              <select class="form-control" id="exampleFormControlSelect1">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
              </select>
          </div>
      </form>

فرم را انتخاب کنید

                                                                                  
      <form>
          <div class="form-group mb-4">
              <label class="mr-sm-2" for="inlineFormCustomSelect">Select</label>
              <select class="form-select mr-sm-2" id="inlineFormCustomSelect">
                  <option selected>Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
              </select>
          </div>
      </form>

برای استفاده از افزودن .form-select طبقه

چند انتخاب کنید

                                                                                  
      <form>
          <select multiple class="form-control" id="exampleFormControlانتخاب">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
          </select>
      </form>

برای استفاده از افزودن multiple به میدان

با افزودنیها انتخاب کنید

                                                                                  
      <form>
          <div class="input-group mb-3">
              <label class="input-group-text" for="inputGroupSelect01">Options</label>
              <select class="form-select" id="inputGroupSelect01">
                  <option selected>Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
              </select>
          </div>
      </form>

برای استفاده از افزودن .input-group-prepend در کلاس به

با دکاردیبهشت‌ ها انتخاب کنید

                                                                                  
      <form>
          <div class="input-group">
              <select class="form-select" id="inputGroupSelect04">
                  <option selected>Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
              </select>
                  <button class="btn btn-outline-secondary" type="button">Button</button>
          </div>
      </form>

برای استفاده از افزودن .input-group-append کلاس به

بارگذاری پرونده

بارگذاری پرونده پیش فرض

                                                                                  
      <form class="mt-3">
          <input class="form-control" type="file" id="formFile">
      </form>

برای استفاده از افزودن .form-control-file کلاس به

بارگذاری پرونده غیرفعال

                                                                                  
<form>
  <div class="mb-3">
    <input class="form-control" type="file" id="formFileDisabled" disabled>
  </div>
</form>

برای استفاده از افزودن disabled جذب به

بارگذاری پرونده کوچک

                                                                                  
<form class="mt-4">
  <input class="form-control form-control-sm" id="formFileSm" type="file">
</form>

برای استفاده از افزودن .form-control-sm در کلاس به

بارگذاری پرونده بزرگ

                                                                                  
<form class="mt-4">
  <input class="form-control form-control-lg" id="formFileLg" type="file">
</form>

برای استفاده از افزودن .form-control-lg کلاس به

سبک متفمرداد‌ در متن یاور

متن یاور چپ

                                                                                  
      <form class="mt-3">
          <div class="form-group">
              <input type="text" class="form-control" id="nametext2" aria-describedby="name" placeholder="Name">
              <div class="d-flex justify-content-start">
                  <small id="name1" class="badge badge-default text-info  bg-info-subtle form-text">Helper Text</small>
              </div>
          </div>
      </form>

برای استفاده از افزودن justify-content-start در کلاس به

متن یاور مرکزی

                                                                                  
      <form class="mt-3">
          <div class="form-group mb-0">
              <input type="text" class="form-control" id="nametext4" aria-describedby="name" placeholder="Name">
              <p class="text-center mb-0">
                  <small id="name45" class="badge badge-default text-warning  bg-warning-subtle form-text">Helper Text</small>
              </p>
          </div>
      </form>

برای استفاده از افزودن text-center در کلاس به

متن یاور راست

                                                                                  
      <form class="mt-3">
          <div class="form-group">
              <input type="text" class="form-control" id="nametext12" aria-describedby="name" placeholder="Name">
              <div class="d-flex justify-content-end">
                  <small id="name13" class="badge badge-default text-danger  bg-danger-subtle form-text">Helper Text</small>
              </div>
          </div>
      </form>

برای استفاده از افزودن justify-content-end کلاس به

متن یاور درون خطی

                                                                                  
      <form class="mt-3">
          <div class="row">
              <div class="col-md-8">
                  <input type="text" class="form-control" id="helpInput10" placeholder="Helper Text">
              </div>
              <div class="col-md-4">
                  <small class="text-muted">Helper Text</small>
              </div>
          </div>
      </form>

متن یاور درون خطی با رنگ

                                                                                  
      <form class="mt-3">
        <div class="row">
            <div class="col-md-8">
                <input type="text" class="form-control" id="helpInput11" placeholder="Help Text">
            </div>
            <div class="col-md-4 block-tag">
                <small class="badge bg-success-subtle text-success ">Helper Text</small>
            </div>
        </div>
      </form>

ورودی با Valitaton

ورودی با موفقیت

                                                                                  
      <form class="mt-3">
        <label class="form-" for="inputSuccess1">Input with success</label>
        <input type="text" class="form-control is-valid" id="inputSuccess1">
        <div class="valid-feedback">
            Success! You've done it.
        </div>
      </form>

برای استفاده از افزودن is-valid کلاس به

ورودی با خطر

                                                                                  
      <form class="mt-3">
          <label class="form-" for="inputDanger1">Input with danger</label>
          <input type="text" class="form-control is-invalid" id="inputDanger1">
          <div class="invalid-feedback">
              Sorry, that username's taken. Try another?
          </div>
      </form>

برای استفاده از افزودن is-invalid در کلاس به

ورودی درون خطی با موفقیت

                                                                                  
      <form class="mt-3 form-horizontal">
          <form class="mt-3 form-horizontal">
          <div class="form-group row">
              <label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">Email</label>
              <div class="col-sm-10">
                  <input type="email" class="form-control is-valid" id="inputHorizontalSuccess" placeholder="name@example.com">
                  <div class="valid-feedback">Success! You've done it.</div>
              </div>
          </div>
      </form>

برای استفاده از افزودن form-horizontal طبقه

ورودی درون خطی با خطر

                                                                                  
      <form class="mt-3 form-horizontal">
        <div class="form-group row">
            <label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control is-invalid" id="inputHorizontalDnger" placeholder="name@example.com">
                <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
            </div>
        </div>
      </form>

برای استفاده از افزودن form-horizontal طبقه

ورودی با ابزار

تولتیپ پایین

                                                                                  
      <form class="mt-3">
          <input type="text" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom" class="form-control" placeholder="Bottom">
      </form>

تولتیپ راست

                                                                                  
      <form class="mt-3">
          <input type="text" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right" class="form-control" placeholder="Right">
      </form>

تولتیپ بالا

                                                                                  
      <form class="mt-3">
          <input type="text" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" class="form-control" placeholder="Top">
      </form>

تولتیپ سمت چپ

                                                                                  
      <form class="mt-3">
          <input type="text" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left" class="form-control" placeholder="Left">
      </form>

سبک های متن ورودی

متن ورودی پررنگ

                                                                                  
      <form class="mt-3">
          <input type="text" class="form-control fw-bold" placeholder="Bold Text">
      </form>

متن ورودی طبیعی

                                                                                  
      <form class="mt-3">
          <input type="text" class="form-control fw-normal" placeholder="Normal Text">
      </form>

نور متن ورودی

                                                                                  
      <form class="mt-3">
          <input type="text" class="form-control fw-light" placeholder="Light Text">
      </form>

متن ورودی italic

                                                                                  
      <form class="mt-3">
          <input type="text" class="form-control font-italic" placeholder="Italic Text">
      </form>

متن ورودی کوچک

                                                                                  
      <form class="mt-3">
        <input type="text" class="form-control text-lowercase" placeholder="Lowercase">
      </form>

متن بزرگ متن

                                                                                  
      <form class="mt-3">
          <input type="text" class="form-control text-uppercase" placeholder="Uppercase">
      </form>

متن ورودی سرمایه گذاری می کند

                                                                                  
      <form class="mt-3">
          <input type="text" class="form-control text-capitalize" placeholder="capitalize">
      </form>

اندازه ورودی

ورودی کوچک

                                                                                  
      <form class="mt-3">
          <input type="text" id="example-input-small" name="example-input-small" class="form-control form-control-sm" placeholder="Small">
      </form>

ورودی طبیعی

                                                                                  
      <form class="mt-3">
        <input type="text" id="example-input-normal" name="example-input-normal" class="form-control" placeholder="Normal">
      </form>

ورودی بزرگ

                                                                                  
      <form class="mt-3">
        <input type="text" id="example-input-large" name="example-input-large" class="form-control form-control-lg" placeholder="Large">
      </form>

برنااردیبهشت‌ گپ

برنااردیبهشت‌ فاکتور

برنااردیبهشت‌ تماس تلفنی

برنااردیبهشت‌ ایمیل

مشخصات کاربر

برنااردیبهشت‌ تقویم

جدول لیست مخاطب

برنااردیبهشت‌ یادداشت ها

مدیر راه اندازی

رویداد امروز

تنظیمات

مدیر راه اندازی

رویداد امروز

تنظیمات

دیوید مک مایکل طرفدار

برنااردیبهشت‌ گپ

برنااردیبهشت‌ فاکتور

برنااردیبهشت‌ تماس تلفنی

برنااردیبهشت‌ ایمیل

مشخصات کاربر

برنااردیبهشت‌ تقویم

جدول لیست مخاطب

برنااردیبهشت‌ یادداشت ها

مدیر راه اندازی

رویداد امروز

تنظیمات

مدیر راه اندازی

رویداد امروز

تنظیمات

دیوید مک مایکل طرفدار

ورودی

ورودی پیش فرض

ورودی با متن یاور

رمز

ورودی غیرفعال

مقدار ورودی از پیش تعریف شده

قسمت ورودی Readonly

ورودی با نگهدارنده مکان

حداکثر مقدار

حداقل مقدار

گزینه های نوع ورودی

متن نوع ورودی

رمز ورود نوع ورودی

شماره تلفن ورودی

ایمیل نوع ورودی

URL نوع ورودی

جستجوی نوع ورودی

شماره های نوع ورودی

زمان تاریخ ورودی زمان

تاریخ نوع ورودی

زمان نوع ورودی

هفته نوع ورودی

ماه نوع ورودی

رنگ نوع ورودی

ColorPicker Bootstrap

محدوده نوع ورودی

تنیس عمومی

تنیس

Textarea با مکان نگهدارنده

متن با متن یاور

کادر انتخاب درون خطی و رادیوها

کادر انتخاب پیش فرض درون خطی

دکاردیبهشت‌ رادیویی پیش فرض درون خطی

کادر انتخاب درون خطی

رادیوهای سفارشی درون خطی

انتخاب عمومی

انتخاب کردن

فرم را انتخاب کنید

چند انتخاب کنید

با افزودنیها انتخاب کنید

با دکاردیبهشت‌ ها انتخاب کنید

بارگذاری پرونده

بارگذاری پرونده پیش فرض

بارگذاری پرونده غیرفعال

بارگذاری پرونده کوچک

بارگذاری پرونده بزرگ

سبک متفمرداد‌ در متن یاور

متن یاور چپ

متن یاور مرکزی

متن یاور راست