%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده (تمدید شد)
سبد (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>

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

دیدگاه‌ها  

0 # salar5075 1396-01-13 12:21
و باز هم سلام.اول این که خیلی ممنون که تمامی سوالات رو با حوصله پاسخ میدید.
دوم هم یه سوال:فرض کنید توی تگ option من نوشتم sony برای این که وقتی کاربر روی سونی کلیک کرد، محصولات سونی نمایش داده بشه، باید کار خاصی انجام داد؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1396-01-13 17:32
درود بر شما .
شما باید تگ select خودتون رو مثل مثال زیر، به یک form متصل کنید.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_select_form
سپس وقتی روی دکمه ی submit کلیک میشه، اطلاعات به سمت سرور ارسال میشه. حالا شما می تونید با استفاده از php اطلاعات رو در سمت سرور دریافت کنید و با دیتابیس ارتباط برقرار کنید و محصولات مرتبط با داده ی ورودی رو استخراج کنید. سپس اطلاعات رو به سمت کلاینت برگردانید. همچنین می تونید از آجاکس و جی کوئری هم کمک بگیرید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

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

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

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