बूटस्ट्रैप फॉर्म इनपुट्स
समर्थित प्रपत्र नियंत्रण
बूटस्ट्रैप निम्नलिखित प्रपत्र नियंत्रणों का समर्थन करता है:
- इनपुट
- पाठ क्षेत्र
- चेक बॉक्स
- रेडियो
- चुनते हैं
बूटस्ट्रैप इनपुट
बूटस्ट्रैप सभी HTML5 इनपुट प्रकारों का समर्थन करता है: टेक्स्ट, पासवर्ड, डेटाटाइम, डेटाटाइम-लोकल, दिनांक, माह, समय, सप्ताह, नंबर, ईमेल, यूआरएल, सर्च, टेल, और रंग।
नोट: यदि इनपुट का प्रकार ठीक से घोषित नहीं किया गया है तो इनपुट पूरी तरह से स्टाइल नहीं होंगे!
निम्नलिखित उदाहरण में दो इनपुट तत्व हैं; एक प्रकार का टेक्स्ट और एक प्रकार का पासवर्ड:
उदाहरण
<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
निम्नलिखित उदाहरण में एक टेक्स्टरेरा है:
उदाहरण
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
बूटस्ट्रैप चेकबॉक्स
चेकबॉक्स का उपयोग किया जाता है यदि आप चाहते हैं कि उपयोगकर्ता प्रीसेट विकल्पों की सूची से किसी भी विकल्प का चयन करे।
निम्नलिखित उदाहरण में तीन चेकबॉक्स हैं। अंतिम विकल्प अक्षम है:
उदाहरण
<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>
बूटस्ट्रैप रेडियो बटन
यदि आप उपयोगकर्ता को प्रीसेट विकल्पों की सूची से केवल एक चयन तक सीमित करना चाहते हैं तो रेडियो बटन का उपयोग किया जाता है।
निम्नलिखित उदाहरण में तीन रेडियो बटन हैं। पहला विकल्प डिफ़ॉल्ट रूप से चेक किया जाता है और अंतिम विकल्प अक्षम होता है:
उदाहरण
<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>
.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>
बूटस्ट्रैप चयन सूची
यदि आप उपयोगकर्ता को एकाधिक विकल्पों में से चुनने की अनुमति देना चाहते हैं तो चयन सूचियों का उपयोग किया जाता है।
निम्न उदाहरण में एक ड्रॉपडाउन सूची है (सूची का चयन करें):
उदाहरण
<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>