बूटस्ट्रैप प्रपत्र
बूटस्ट्रैप की डिफ़ॉल्ट सेटिंग्स
प्रपत्र नियंत्रण स्वचालित रूप से बूटस्ट्रैप के साथ कुछ वैश्विक स्टाइल प्राप्त करते हैं:
वर्ग वाले सभी पाठ्य <input>, <textarea>, और
<select>तत्वों .form-controlकी चौड़ाई 100% है।
बूटस्ट्रैप फॉर्म लेआउट
बूटस्ट्रैप तीन प्रकार के फॉर्म लेआउट प्रदान करता है:
- लंबवत रूप (यह डिफ़ॉल्ट है)
- क्षैतिज रूप
- इनलाइन फॉर्म
तीनों प्रपत्र लेआउट के लिए मानक नियम:
- लेबल और प्रपत्र नियंत्रणों को इसमें लपेटें
<div class="form-group">(इष्टतम रिक्ति के लिए आवश्यक) .form-controlसभी पाठ्य<input>,<textarea>, और<select>तत्वों में वर्ग जोड़ें
बूटस्ट्रैप वर्टिकल फॉर्म (डिफ़ॉल्ट)
निम्न उदाहरण दो इनपुट फ़ील्ड, एक चेकबॉक्स और सबमिट बटन के साथ एक लंबवत रूप बनाता है:
उदाहरण
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
बूटस्ट्रैप इनलाइन फॉर्म
इनलाइन रूप में, सभी तत्व इनलाइन, बाएँ-संरेखित होते हैं, और लेबल बगल में होते हैं।
नोट: यह केवल उन व्यूपोर्ट्स के फ़ॉर्म पर लागू होता है जो कम से कम 768px चौड़े होते हैं!
इनलाइन फॉर्म के लिए अतिरिक्त नियम:
- तत्व
.form-inlineमें वर्ग जोड़ें<form>
निम्न उदाहरण दो इनपुट फ़ील्ड, एक चेकबॉक्स और एक सबमिट बटन के साथ एक इनलाइन फॉर्म बनाता है:
उदाहरण
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
युक्ति: यदि आप प्रत्येक इनपुट के लिए एक लेबल शामिल नहीं करते हैं, तो स्क्रीन रीडर्स को आपके फ़ॉर्म में समस्या होगी। आप कक्षा का उपयोग करके, स्क्रीन रीडर को छोड़कर, सभी उपकरणों के लिए लेबल छिपा सकते हैं
.sr-only:
उदाहरण
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
बूटस्ट्रैप क्षैतिज रूप
एक क्षैतिज रूप का अर्थ है कि लेबल बड़े और मध्यम स्क्रीन पर इनपुट फ़ील्ड (क्षैतिज) के बगल में संरेखित होते हैं। छोटे स्क्रीन (767px और नीचे) पर, यह एक लंबवत रूप में बदल जाएगा (लेबल प्रत्येक इनपुट के शीर्ष पर रखे जाते हैं)।
क्षैतिज रूप के लिए अतिरिक्त नियम:
- तत्व
.form-horizontalमें वर्ग जोड़ें<form> .control-labelसभी<label>तत्वों में वर्ग जोड़ें
युक्ति: लेबल और प्रपत्र नियंत्रणों के समूहों को क्षैतिज लेआउट में संरेखित करने के लिए बूटस्ट्रैप की पूर्वनिर्धारित ग्रिड कक्षाओं का उपयोग करें।
निम्न उदाहरण दो इनपुट फ़ील्ड, एक चेकबॉक्स और एक सबमिट बटन के साथ एक क्षैतिज रूप बनाता है।
उदाहरण
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>