输入组 - 光年(Light Year Admin V5)后台管理系统模板

输入组

通过在文本输入、自定义选择和自定义文件输入的任一侧添加文本、按钮或按钮组来轻松扩展表单控件。

基本示例

在输入的任一侧放置一个附加组件或按钮。您也可以在输入的两侧放置一个。请记住将 <label> 放在输入组之外。

@example.com

您的个人网址

https://example.com/users/

$ .00

带文本区域

<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="用户名" aria-label="用户名" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="收件人的用户名" aria-label="收件人的用户名" aria-describedby="basic-addon2">
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>

<label for="basic-url" class="form-label">您的个人网址</label>
<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-text">.00</span>
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="用户名" aria-label="用户名">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="服务器" aria-label="服务器">
</div>

<div class="input-group">
  <span class="input-group-text">带文本区域</span>
  <textarea class="form-control" aria-label="带文本区域"></textarea>
</div>

包装

默认情况下，输入组通过 flex-wrap: wrap 进行包装，以便在输入组中适应自定义表单字段验证。您可以使用 .flex-nowrap 禁用它。

<div class="input-group flex-nowrap">
  <span class="input-group-text" id="addon-wrapping">@</span>
  <input type="text" class="form-control" placeholder="用户名" aria-label="用户名" aria-describedby="addon-wrapping">
</div>

尺寸

将相对的表单大小类添加到 .input-group 本身，其中的内容将自动调整大小 - 无需在每个元素上重复表单控件大小类。

不支持调整单个输入组元素的大小。

小

默认

大

<div class="input-group input-group-sm mb-3">
  <span class="input-group-text" id="inputGroup-sizing-sm">小</span>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-3">
  <span class="input-group-text" id="inputGroup-sizing-default">默认</span>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg">
  <span class="input-group-text" id="inputGroup-sizing-lg">大</span>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>

复选框和单选框

将任何复选框或单选选项放在输入组的插件中而不是文本中。当输入旁边没有可见文本时，我们建议将 .mt-0 添加到 .form-check-input。

<div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input">
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<div class="input-group">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button for following text input">
  </div>
  <input type="text" class="form-control" aria-label="Text input with radio button">
</div>

多个输入

虽然视觉上支持多个 <input>，但验证样式仅适用于具有单个 <input> 的输入组。

名字和姓氏

<div class="input-group">
  <span class="input-group-text">名字和姓氏</span>
  <input type="text" aria-label="名字" class="form-control">
  <input type="text" aria-label="姓氏" class="form-control">
</div>

多个插件

支持多个附加组件，并且可以与复选框和单选输入版本混合使用。

$ 0.00

<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
</div>

按钮插件

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button" id="button-addon1">按钮</button>
  <input type="text" class="form-control" placeholder="" aria-label="带有按钮插件的示例文本" aria-describedby="button-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="收件人用户名" aria-label="收件人用户名" aria-describedby="button-addon2">
  <button class="btn btn-outline-secondary" type="button" id="button-addon2">按钮</button>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">按钮</button>
  <button class="btn btn-outline-secondary" type="button">按钮</button>
  <input type="text" class="form-control" placeholder="" aria-label="带有两个按钮插件的示例文本">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="收件人用户名" aria-label="带有两个按钮插件的收件人用户名">
  <button class="btn btn-outline-secondary" type="button">按钮</button>
  <button class="btn btn-outline-secondary" type="button">按钮</button>
</div>

带有下拉菜单的按钮

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">周杰伦</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">东风破</a></li>
    <li><a class="dropdown-item" href="#">听见下雨的声音</a></li>
    <li><a class="dropdown-item" href="#">千里之外</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">夜的第七章</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="带有下拉按钮的文本输入">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" aria-label="带有下拉按钮的文本输入">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">陈奕迅</button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">淘汰</a></li>
    <li><a class="dropdown-item" href="#">富士山下</a></li>
    <li><a class="dropdown-item" href="#">孤勇者</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">六月飞雪</a></li>
  </ul>
</div>

<div class="input-group">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">王菲</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">红豆</a></li>
    <li><a class="dropdown-item" href="#">匆匆那年</a></li>
    <li><a class="dropdown-item" href="#">但愿人长久</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">容易受伤的女人</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="带有 2 个下拉按钮的文本输入">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">张学友</button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">吻别</a></li>
    <li><a class="dropdown-item" href="#">心如刀割</a></li>
    <li><a class="dropdown-item" href="#">一千个伤心的理由</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">楚歌</a></li>
  </ul>
</div>

分段按钮

<div class="input-group mb-3">
  <button type="button" class="btn btn-outline-secondary">选项</button>
  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">切换下拉列表</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">隋唐英雄传</a></li>
    <li><a class="dropdown-item" href="#">七侠五义</a></li>
    <li><a class="dropdown-item" href="#">聊斋志异</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">大唐狄公案</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="带分段下拉按钮的文本输入">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="带分段下拉按钮的文本输入">
  <button type="button" class="btn btn-outline-secondary">选项</button>
  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">切换下拉列表</span>
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">增广贤文 </a></li>
    <li><a class="dropdown-item" href="#">儿女英雄传</a></li>
    <li><a class="dropdown-item" href="#">醒世恒言</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">世说新语</a></li>
  </ul>
</div>

自定义表单

输入组包括对自定义选择和自定义文件输入的支持。不支持这些的浏览器默认版本。

自定义选择

Options

<div class="input-group mb-3">
  <label class="input-group-text" for="inputGroupSelect01">Options</label>
  <select class="form-select" id="inputGroupSelect01">
    <option selected>请选择...</option>
    <option value="1">清稗类钞</option>
    <option value="2">一枕奇</option>
    <option value="3">七修类稿</option>
  </select>
</div>

<div class="input-group mb-3">
  <select class="form-select" id="inputGroupSelect02">
    <option selected>请选择...</option>
    <option value="1">七剑十三侠</option>
    <option value="2">七十二朝人物演义</option>
    <option value="3">万历野获编</option>
  </select>
  <label class="input-group-text" for="inputGroupSelect02">Options</label>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">按钮</button>
  <select class="form-select" id="inputGroupSelect03" aria-label="示例选择按钮插件">
    <option selected>请选择...</option>
    <option value="1">永乐大典残卷</option>
    <option value="2">龙川略志</option>
    <option value="3">龙图公案</option>
  </select>
</div>

<div class="input-group">
  <select class="form-select" id="inputGroupSelect04" aria-label="示例选择按钮插件">
    <option selected>请选择...</option>
    <option value="1">包公案</option>
    <option value="2">齐民要术</option>
    <option value="3">齐东野语</option>
  </select>
  <button class="btn btn-outline-secondary" type="button">按钮</button>
</div>

自定义文件输入

上传

<div class="input-group mb-3">
  <label class="input-group-text" for="inputGroupFile01">上传</label>
  <input type="file" class="form-control" id="inputGroupFile01">
</div>

<div class="input-group mb-3">
  <input type="file" class="form-control" id="inputGroupFile02">
  <label class="input-group-text" for="inputGroupFile02">上传</label>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">按钮</button>
  <input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="上传">
</div>

<div class="input-group">
  <input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="上传">
  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">按钮</button>
</div>