ساخت bootstrap forms input

بوت استرپ از فرم های کنترل زیر پشتیبانی می کند:

input
textarea
checkbox
radio
select

بوت استرپ از تمام انواع ورودی HTML5 پشتیبانی می کند: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, رنگ

نکته: اگر نوع آنها به درستی اعلام نشده باشد، ورودی ها به طور کامل طراحی نمی شوند!

مثال زیر شامل دو عنصر input است. یکی از نوع متن و یکی از نوع رمز عبور:

<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>

</div>

<label for="pwd">Password:</label>

</div>

مقالات

Bootstrap Textarea

<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>

</div>

<label for="pwd">Password:</label>

</div>

Bootstrap Checkboxes

checkbox ها زمانی شود که شما می خواهید کاربر هر تعداد گزینه از یک لیست از گزینه های از پیش تعیین شده را انتخاب کنید.

مثال زیر شامل سه جعبه چک است. آخرین گزینه غیرفعال است:

<div class="checkbox">
  <label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled="">Option 3</label>
</div>

<label><input type="checkbox" value="">Option 1</label>

</div>

<label><input type="checkbox" value="">Option 2</label>

</div>

<label><input type="checkbox" value="" disabled="">Option 3</label>

</div>

اگر میخواهید کادرهای جعبه در یک خط ظاهر شوند، از کلاس checkcheck-inline استفاده کنید:

Bootstrap Radio Buttons

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

دکمه های رادیویی زمانی استفاده می شود که شما می خواهید کاربر را تنها به یک انتخاب از یک لیست از گزینه های از پیش تعیین شده محدود کنید.

مثال زیر شامل سه دکمه رادیویی است. گزینه اول به صورت پیش فرض بررسی می شود و آخرین گزینه غیرفعال می شود:

مثال

<div class="radio">
  <label><input type="radio" name="optradio" checked="">Option 1</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled="">Option 3</label>
</div>

<label><input type="radio" name="optradio" checked="">Option 1</label>

</div>

<label><input type="radio" name="optradio">Option 2</label>

</div>

<label><input type="radio" name="optradio" disabled="">Option 3</label>

</div>

اگر شما می خواهید دکمه های رادیویی در همان خط ظاهر شوند، از کلاس .radio-inline استفاده کنید:

<label class="radio-inline"><input type="radio" name="optradio" checked="">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>

<label class="radio-inline"><input type="radio" name="optradio" checked="">Option 1</label>

<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>

<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>

Bootstrap Select List

لیست انتخاب بوت استرپ

Select List ها زمانی مورد استفاده قرار می گیرد که شما می خواهید به کاربر اجازه می دهد از چند گزینه را انتخاب کنید.

مثال زیر شامل لیست کشویی (لیست انتخابی):

مثال

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

<label for="sel1">Select list:</label>

</select>

</div>

Rate this post

ساخت bootstrap forms input

Bootstrap Textarea

Bootstrap Checkboxes

Bootstrap Radio Buttons

Bootstrap Select List

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

Bootstrap Textarea

Bootstrap Checkboxes

Bootstrap Radio Buttons

Bootstrap Select List

مطالب زیر را حتما مطالعه کنید

افزونه و کلاس Carousel در بوت استرپ bootstrap

کلاس collapse در بوت استرپ bootstrap

کلاس jumbotron در بوت استرپ

فیلترهای بوت استرپ

افزونه Affix بوت استرپ

افزونه Scrollspy بوت استرپ

دیدگاهتان را بنویسید لغو پاسخ