Bootstrap 5 Input Group

输入组

.input-group 类是一种容器，通过在输入字段的前面或后面添加图标、文本或按钮作为“帮助文本”来增强输入。

如需设置指定帮助文本的样式，请使用 .input-group-text 类：

Duba

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Sunan wanda ke da hanyar">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="您的电邮">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

Kai samu ya kai samu

ƙarar ƙirar ɗaya ko ƙirar ɗaya

ƙarar: .input-group-sm ƙashe ƙashe don ƙirar ƙirar ɗaya ko ƙirar ɗaya, ƙarar: .input-group-lg Don ƙirar ƙirar ɗaya ko ƙirar ɗaya:

Duba

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">ƙarfi</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">ƙarfi</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">ƙarfi</span>
  <input type="text" class="form-control">
</div>

Kai samu ya kai samu

ƙirar ƙirar da ɗaya ko ƙirar ɗaya da ƙirar ƙirar

Tambayi ƙirar ƙirar ɗaya ko ƙirar ɗaya ko ƙirar ƙirar:

Duba

<!-- ƙirar ƙirar ɗaya ko ƙirar ɗaya -->
<div class="input-group mb-3">
  <span class="input-group-text">mingming</span>
  <input type="text" class="form-control" placeholder="xing">
  <input type="text" class="form-control" placeholder="ming">
</div>
<!-- ƙirar ƙirar / matan ƙarfi -->
<div class="input-group mb-3">
  <span class="input-group-text">ƙo</span>
  <span class="input-group-text">ƙarfi</span>
  <span class="input-group-text">san</span>
  <input type="text" class="form-control">
</div>

Kai samu ya kai samu

ƙirar ƙirar da ɗaya ko ƙirar ɗaya

Iya, ƙarar ƙirar ko ɗaya ko ƙirar ɗaya don talle ƙalmu:

Duba

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="Duba da yake da hanyar">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="Duba da yake da hanyar">
</div>

Kai samu ya kai samu

ƙirar ƙirar

Duba

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">ƙarar ƙarfi</button>
  <input type="text" class="form-control" placeholder="Duba da yake da hanyar">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Tafin da ake neman">
  <button class="btn btn-success" type="submit">Go
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Duba da yake da hanyar">
  <button class="btn btn-primary" type="button">OK
  <button class="btn btn-danger" type="button">Yanke
</div>

Kai samu ya kai samu

Gurɗi na tsaye da hanyar tsaye

Tambayi hanyar tsaye a cikin gurɗi na tsaye. Ka注意，ka ba kwarin kamar yadda ake samun .dropdown ƙarƙashin mai gurɗi.

Duba

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Hanyar na tsaye
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Hanyar 1</a></li>
    <li><a class="dropdown-item" href="#">Hanyar 2</a></li>
    <li><a class="dropdown-item" href="#">Hanyar 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Sunan wanda ke da hanyar">
</div>

Kai samu ya kai samu