बूटस्ट्रैप फॉर्म इनपुट (अधिक)
स्थिर नियंत्रण
यदि आपको किसी क्षैतिज रूप में प्रपत्र लेबल के आगे सादा पाठ सम्मिलित करने की आवश्यकता है , तो किसी तत्व .form-control-static
पर वर्ग का उपयोग करें:<p>
उदाहरण
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Email:</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
</form>
बूटस्ट्रैप इनपुट समूह
.input-group
वर्ग एक "सहायता पाठ" के रूप में सामने या पीछे एक आइकन, टेक्स्ट या एक बटन जोड़कर इनपुट को बढ़ाने के लिए एक कंटेनर है ।
कक्षा इनपुट फ़ील्ड के .input-group-addon
आगे एक आइकन या सहायता पाठ संलग्न करती है।
मूलपाठ
उदाहरण
<form>
<div class="input-group">
<span class="input-group-addon"><i
class="glyphicon glyphicon-user"></i></span>
<input id="email"
type="text" class="form-control" name="email" placeholder="Email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon
glyphicon-lock"></i></span>
<input id="password" type="password"
class="form-control" name="password" placeholder="Password">
</div>
<div class="input-group">
<span class="input-group-addon">Text</span>
<input id="msg" type="text" class="form-control" name="msg"
placeholder="Additional Info">
</div>
</form>
एक इनपुट के .input-group-btn
बगल में एक बटन संलग्न करता है। यह अक्सर एक खोज बार के साथ प्रयोग किया जाता है:
उदाहरण
<form>
<div class="input-group">
<input
type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button
class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
बूटस्ट्रैप फॉर्म कंट्रोल स्टेट्स
- इनपुट फोकस - इनपुट की आउटलाइन हटा दी जाती है और फोकस पर एक बॉक्स-शैडो लगाया जाता है
- अक्षम
disabled
इनपुट - इनपुट फ़ील्ड को अक्षम करने के लिए एक विशेषता जोड़ें - अक्षम फ़ील्डसेट
disabled
- सभी नियंत्रणों को अक्षम करने के लिए फ़ील्डसेट में एक विशेषता जोड़ें - केवल पढ़ने
readonly
के लिए इनपुट - उपयोगकर्ता इनपुट को रोकने के लिए इनपुट में एक विशेषता जोड़ें - सत्यापन राज्य - बूटस्ट्रैप में त्रुटि, चेतावनी और सफलता संदेशों के लिए सत्यापन शैलियाँ शामिल हैं। उपयोग करने के लिए, जोड़ें
.has-warning
,.has-error
, या.has-success
मूल तत्व में - ICONS
.has-feedback
- आप कक्षा और एक आइकन के साथ फ़ीडबैक आइकन जोड़ सकते हैं - छिपे हुए लेबल
.sr-only
- गैर-दृश्यमान लेबल पर एक वर्ग जोड़ें
निम्न उदाहरण ऊपर दिए गए कुछ प्रपत्र नियंत्रण राज्यों को क्षैतिज रूप में प्रदर्शित करता है :
उदाहरण
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Focused</label>
<div class="col-sm-10">
<input class="form-control" id="focusedInput" type="text" value="Click to focus">
</div>
</div>
<div class="form-group">
<label for="disabledInput" class="col-sm-2 control-label">Disabled</label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput" type="text" disabled>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">Fieldset disabled</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success has-feedback">
<label class="col-sm-2 control-label" for="inputSuccess">
Input with success and icon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
<div class="form-group has-warning has-feedback">
<label class="col-sm-2 control-label" for="inputWarning">
Input with warning and icon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
</div>
<div class="form-group has-error has-feedback">
<label class="col-sm-2 control-label" for="inputError">
Input with error and icon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
</form>
और इनलाइन फॉर्म में कुछ फॉर्म कंट्रोल स्टेट्स का एक उदाहरण यहां दिया गया है :
उदाहरण
<form class="form-inline">
<div class="form-group">
<label for="focusedInput">Focused</label>
<input class="form-control" id="focusedInput" type="text">
</div>
<div class="form-group">
<label for="inputPassword">Disabled</label>
<input class="form-control" id="disabledInput" type="text" disabled>
</div>
<div class="form-group has-success has-feedback">
<label for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>