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">Go</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="一些文本">
  <button class="btn btn-primary" type="button">OK</button>
  <button class="btn btn-danger" type="button">Cancel</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>

親自試一試