బ్రౌసర్ 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>

స్వయంగా ప్రయత్నించండి