बूटस्ट्रैप इनपुट साइज़िंग
प्रपत्रों में इनपुट साइज़िंग
.input-lgऔर जैसे वर्गों का उपयोग करके इनपुट तत्वों की ऊंचाई निर्धारित करें .input-sm।
.col-lg-*ग्रिड कॉलम वर्गों जैसे और का उपयोग करके तत्वों की चौड़ाई निर्धारित करें .col-sm-*।
ऊंचाई आकार:
निम्नलिखित उदाहरण विभिन्न ऊंचाइयों के साथ इनपुट तत्व दिखाते हैं:
उदाहरण
<form>
<div class="form-group">
<label for="inputsm">Small
input</label>
<input class="form-control input-sm" id="inputsm" type="text">
</div>
<div class="form-group">
<label for="inputdefault">Default input</label>
<input class="form-control" id="inputdefault" type="text">
</div>
<div class="form-group">
<label for="inputlg">Large
input</label>
<input class="form-control input-lg" id="inputlg" type="text">
</div>
</form>
आप तत्व को जोड़कर क्षैतिज रूप में लेबल और प्रपत्र नियंत्रणों को त्वरित रूप से आकार दे सकते हैं :.form-group-*<div class="form-group">
उदाहरण
<div class="form-group form-group-lg">
आप a या कक्षाओं .input-groupके अंदर सभी इनपुट और अन्य तत्वों को त्वरित रूप से आकार दे सकते हैं :.input-group-sm.input-group-lg
उदाहरण
<div class="input-group input-group-lg">
कॉलम साइजिंग
.col-xs-*निम्नलिखित उदाहरण विभिन्न वर्गों का उपयोग करके विभिन्न चौड़ाई वाले इनपुट तत्वों को दिखाता है
:
उदाहरण
<div class="form-group row">
<div class="col-xs-2">
<label for="ex1">col-xs-2</label>
<input class="form-control" id="ex1" type="text">
</div>
<div class="col-xs-3">
<label for="ex2">col-xs-3</label>
<input class="form-control" id="ex2" type="text">
</div>
<div class="col-xs-4">
<label for="ex3">col-xs-4</label>
<input class="form-control" id="ex3" type="text">
</div>
</div>
मदद पाठ
.help-blockप्रपत्रों में ब्लॉक स्तरीय सहायता पाठ जोड़ने के लिए कक्षा का उपयोग करें :
उदाहरण
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
<span class="help-block">This is some help text...</span>
</div>