بوت اسپرینگ 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>

ਸੁਭਾਵਿਕ ਤੌਰ 'ਤੇ ਕਰੋ