菜单
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap 5 输入框组


输入框组

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

要为指定的帮助文本设置样式,请使用 .input-group-text 类。

@
@example.com

示例

<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">确定</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>
自己动手试一试 »


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持