سبد (0)

انواع input ها در بوت استرپ

پشتیبانی از کنترل های فرم

Wiki

بوتسترپ از تگ های مربوط به فرم که در زیر قرار دارند، پشتیبانی می کند:

  • input
  • textarea
  • checkbox
  • radio
  • select

input ها در بوت استرپ

Wiki

بوت استرپ از تمام انواعinputهای  HTML5 پشتیبانی می کند:

  1. text
  2. password
  3. datetime
  4. datetime-local
  5. date
  6. month
  7. time
  8. week
  9. number
  10. email
  11. url
  12. search
  13. tel
  14. color

نکته: در صورتی که نوع inputها به درستی تعریف نشده باشد، آنها به طور کامل استایل دهی نخواهند شد.

مثال زیر در بر دارنده ی دو عنصر input می باشد. یکی از نوع text و دیگری از نوع password:

مثال (ورودی های بوت استرپ)

<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>

خودتان امتحان کنید »

 عنصر Textarea در بوتسترپ

Wiki

مثال زیر شامل یک textarea می باشد:

مثال (ورودی های بوت استرپ)

<div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

خودتان امتحان کنید »

چک باکس های بوت استرپ

Wiki

اگر می خواهید که کاربر هر تعداد از گزینه ها را از یک لیست گزینه ها انتخاب کند، از چک باکس ها استفاده کنید.

مثال زیر شامل 3 چک باکس می باشد. آخرین گزینه نیز به صورت غیر فعال(disabled) در آمده است:

مثال (ورودی های بوت استرپ)

<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>

خودتان امتحان کنید »

در صورتی که می خواهید چک باکس ها در یک خط قرار بگیرند، می توانید از کلاس checkbox-inline استفاده کنید:

مثال (ورودی های بوت استرپ)

<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>

خودتان امتحان کنید »

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

Wiki

 در صورتی که می خواهید کاربر را محدود کرده تا تنها یک گزینه را از یک لیست گزینه ها انتخاب کند، می توانید از دکمه های رادیویی استفاده کنید.

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

مثال (ورودی های بوت استرپ)

<div class="radio">
  <label><input type="radio" name="optradio">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>

خودتان امتحان کنید »

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

مثال (ورودی های بوت استرپ)

<label class="radio-inline"><input type="radio" name="optradio">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>

خودتان امتحان کنید »

لیست کشویی(select ) در بوت استرپ

Wiki

در صورتی که می خواهد به کاربر این امکان را بدهید تا از گزینه های چندگانه، یکی را انتخاب کند، می توانید از لیست select استفاده کنید.

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

مثال (ورودی های بوت استرپ)

<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>

خودتان امتحان کنید »

 

آموزش صوتی Bootstrap

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه