बूटस्ट्रैप 4 इनपुट समूह
बूटस्ट्रैप 4 इनपुट समूह
.input-groupवर्ग एक "सहायता पाठ" के रूप में इनपुट फ़ील्ड के सामने या पीछे एक आइकन, टेक्स्ट या एक बटन जोड़कर इनपुट को बढ़ाने के लिए एक कंटेनर है ।
.input-group-prependइनपुट के सामने हेल्प टेक्स्ट जोड़ने के लिए और इनपुट के .input-group-appendपीछे इसे जोड़ने के लिए उपयोग करें ।
अंत में, .input-group-textनिर्दिष्ट सहायता पाठ को स्टाइल करने के लिए कक्षा जोड़ें।
उदाहरण
<form>
<div class="input-group mb-3">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group mb-3">
<input type="text"
class="form-control" placeholder="Your Email">
<div
class="input-group-append">
<span class="input-group-text">@example.com</span>
</div>
</div>
</form>
युक्ति: हम यह सुनिश्चित करने के .mb-3लिए उपयोगिता वर्ग का उपयोग करते हैं कि इनपुट समूह को उचित मार्जिन नीचे मिले। हमारे बीएस4 यूटिलिटीज चैप्टर में यूटिलिटी क्लासेस के बारे में और पढ़ें ।
इनपुट ग्रुप साइजिंग
.input-group-smछोटे इनपुट समूहों और बड़े इनपुट समूहों के लिए कक्षा का उपयोग करें .input-group-lg:
उदाहरण
<form>
<div class="input-group mb-3 input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">Small</span>
</div>
<input type="text" class="form-control">
</div>
</form>
<form>
<div class="input-group mb-3">
<div
class="input-group-prepend">
<span
class="input-group-text">Default</span>
</div>
<input type="text" class="form-control">
</div>
</form>
<form>
<div
class="input-group mb-3 input-group-lg">
<div
class="input-group-prepend">
<span
class="input-group-text">Large</span>
</div>
<input type="text" class="form-control">
</div>
</form>
एकाधिक इनपुट और सहायक
कई इनपुट या ऐडऑन जोड़ें:
उदाहरण
<!-- Multiple inputs -->
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span
class="input-group-text">Person</span>
</div>
<input type="text" class="form-control" placeholder="First Name">
<input type="text" class="form-control" placeholder="Last Name">
</div>
</form>
<!-- Multiple addons / help text -->
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span
class="input-group-text">One</span>
<span
class="input-group-text">Two</span>
<span
class="input-group-text">Three</span>
</div>
<input type="text" class="form-control">
</div>
</form>
चेकबॉक्स और रेडियो के साथ इनपुट समूह
आप टेक्स्ट के बजाय चेकबॉक्स या रेडियो बटन का भी उपयोग कर सकते हैं:
उदाहरण
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input
type="checkbox">
</div>
</div>
<input type="text" class="form-control" placeholder="Some text">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input
type="radio">
</div>
</div>
<input
type="text" class="form-control" placeholder="Some text">
</div>
इनपुट समूह बटन
उदाहरण
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-primary" type="button">Basic Button</button>
</div>
<input type="text" class="form-control"
placeholder="Some text">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search">
<div
class="input-group-append">
<button class="btn btn-success"
type="submit">Go</button>
</div>
</div>
<div
class="input-group mb-3">
<input type="text" class="form-control"
placeholder="Something clever..">
<div class="input-group-append">
<button class="btn btn-primary" type="button">OK</button>
<button class="btn btn-danger" type="button">Cancel</button>
</div>
</div>
ड्रॉपडाउन बटन के साथ इनपुट समूह
इनपुट समूह में एक ड्रॉपडाउन बटन जोड़ें। ध्यान दें कि आपको .ड्रॉपडाउन रैपर की आवश्यकता नहीं है, जैसा कि आप सामान्य रूप से करते हैं।
उदाहरण
<div class="input-group mt-3 mb-3">
<div class="input-group-prepend">
<button
type="button" class="btn btn-outline-secondary dropdown-toggle"
data-toggle="dropdown">
Dropdown
button
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
इनपुट समूह लेबल
इनपुट समूह के बाहर लेबल लगाएं, और याद रखें कि विशेषता के लिए मान इनपुट की आईडी से मेल खाना चाहिए।
लेबल पर क्लिक करें और यह इनपुट पर फोकस लाएगा:
उदाहरण
<label for="demo">Write your email here:</label>
<div class="input-group
mb-3">
<input type="text" class="form-control" placeholder="Email"
id="demo" name="email">
<div class="input-group-append">
<span class="input-group-text">@example.com</span>
</div>
</div>