BS kiritish maydonlari
Qo‘llab-quvvatlanadigan forma boshqaruv elementlari
Bootstrap quyidagi forma boshqaruv elementlarini qo‘llab-quvvatlaydi:
- input
- textarea
- checkbox
- radio
- select
Bootstrap input elementi
Bootstrap barcha HTML5 input turlarini qo‘llab-quvvatlaydi: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel va color.
Eslatma: Agar input elementlarining turi (type) to‘g‘ri ko‘rsatilmagan bo‘lsa, ularga stillar to‘liq QO‘LLANMAYDI!
Quyidagi misolda ikkita input elementi bor: biri text turida, ikkinchisi password turida:
Misol
<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>
O‘zingiz sinab ko‘ring »
Bootstrap textarea elementi
Quyidagi misolda textarea elementi bor:
Misol
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
O‘zingiz sinab ko‘ring »
Bootstrap checkbox’lari
Checkbox’lar foydalanuvchiga oldindan belgilangan variantlar ro‘yxatidan istalgan miqdordagi variantni tanlash imkonini berish kerak bo‘lganda ishlatiladi.
Quyidagi misolda uchta checkbox bor. Oxirgi variant nofaol:
Misol
<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>
O‘zingiz sinab ko‘ring »
Agar checkbox’lar bitta qatorda ko‘rinishini istasangiz, .checkbox-inline klassidan foydalaning:
Misol
<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>
O‘zingiz sinab ko‘ring »
Bootstrap radio tugmalari
Radio tugmalar foydalanuvchini oldindan belgilangan variantlar ro‘yxatidan faqat bittasini tanlash bilan cheklash kerak bo‘lganda ishlatiladi.
Quyidagi misolda uchta radio tugma bor. Birinchi variant standart holatda tanlangan, oxirgi variant esa nofaol:
Misol
<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>
O‘zingiz sinab ko‘ring »
Agar radio tugmalar bitta qatorda ko‘rinishini istasangiz, .radio-inline klassidan foydalaning:
Misol
<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>
O‘zingiz sinab ko‘ring »
Bootstrap tanlash ro‘yxati (select)
Tanlash ro‘yxatlari foydalanuvchiga bir nechta variant orasidan tanlash imkonini berish kerak bo‘lganda ishlatiladi.
Quyidagi misolda ochiluvchi ro‘yxat (select list) bor:
Misol
<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>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!