Bootstrap 5 इनपुट ग्रुप

इनपुट समूह

.input-group क्लास एक कंटेनर है, जो इनपुट फील्ड के सामने या पीछे चिह्न, पाठ या बटन जोड़कर 'मदद पाठ' के रूप में बढ़ावा देती है。

विशिष्ट मदद पाठ की शैली नियत करने के लिए, इसे इस्तेमाल करें .input-group-text क्लास:

उदाहरण

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="उपयोगकर्ता नाम">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="आपका ई-मेल">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

स्वयं प्रयोग करें

इनपुट समूह आकार

कृपया .input-group-sm वर्ग को छोटे इनपुट समूह के लिए उपयोग करें, जो .input-group-lg बड़े इनपुट समूह के लिए उपयोग:

उदाहरण

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">सूक्ष्म</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">डिफ़ॉल्ट</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">बड़ा</span>
  <input type="text" class="form-control">
</div>

स्वयं प्रयोग करें

अनेक इनपुट और सहायक

अनेक इनपुट कंट्रोल या प्लगइन जोड़ें:

उदाहरण

<!-- अनेक इनपुट कंट्रोल -->
<div class="input-group mb-3">
  <span class="input-group-text">नाम</span>
  <input type="text" class="form-control" placeholder="फर्स्ट नाम">
  <input type="text" class="form-control" placeholder="नाम">
</div>
<!-- अनेक प्लगइन/सहायक पाठ -->
<div class="input-group mb-3">
  <span class="input-group-text">एक</span>
  <span class="input-group-text">दो</span>
  <span class="input-group-text">तीन</span>
  <input type="text" class="form-control">
</div>

स्वयं प्रयोग करें

चेकबॉक्स और रेडियो बटन वाला इनपुट समूह

आप फिर टेक्स्ट के स्थान पर चेकबॉक्स या रेडियो बटन का उपयोग कर सकते हैं:

उदाहरण

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="कुछ टेक्स्ट">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="कुछ टेक्स्ट">
</div>

स्वयं प्रयोग करें

इनपुट समूह बटन

उदाहरण

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">बुनियादी बटन</button>
  <input type="text" class="form-control" placeholder="कुछ टेक्स्ट">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="खोज">
  <button class="btn btn-success" type="submit">जाओ</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="कुछ टेक्स्ट">
  <button class="btn btn-primary" type="button">ठीक है</button>
  <button class="btn btn-danger" type="button">रद्द</button>
</div>

स्वयं प्रयोग करें

ड्रॉपडाउन बटन वाला इनपुट ग्रुप

इनपुट ग्रुप में ड्रॉपडाउन बटन जोड़ें।ध्यान दें कि आपको आम तौर पर .dropdown वॉपर पैकेज के लिए नहीं जरूरत है।

उदाहरण

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    ड्रॉपडाउन बटन
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">लिंक 1</a></li>
    <li><a class="dropdown-item" href="#">लिंक 2</a></li>
    <li><a class="dropdown-item" href="#">लिंक 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="उपयोगकर्ता नाम">
</div>

स्वयं प्रयोग करें