菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何 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 数据科学
     ❯   

Bootstrap 4 输入组


Bootstrap 4 输入组

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

使用 .input-group-prepend 在输入前面添加帮助文本,使用 .input-group-append 在输入后面添加帮助文本。

最后,添加 .input-group-text 类来样式化指定的帮助文本。

@
@example.com

示例

<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control" placeholder="用户名">
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="您的邮箱">
    <div class="input-group-append">
      <span class="input-group-text">@example.com</span>
    </div>
  </div>
</form>
自己动手试一试 »

提示:我们使用 .mb-3 实用程序类来确保输入组获得适当的底部外边距。有关实用程序类的更多信息,请参阅我们的 BS4 实用程序章节


输入组大小

使用 .input-group-sm 类创建小型输入组,使用 .input-group-lg 类创建大型输入组

默认值

示例

<form>
  <div class="input-group mb-3 input-group-sm">
     <div class="input-group-prepend">
       <span class="input-group-text">小</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">默认</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>
<form>
  <div class="input-group mb-3 input-group-lg">
    <div class="input-group-prepend">
      <span class="input-group-text">大</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>
自己动手试一试 »


多个输入和辅助文本

添加多个输入或附加组件

人物

示例

<!-- 多个输入 -->
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">人物</span>
    </div>
    <input type="text" class="form-control" placeholder="名字">
    <input type="text" class="form-control" placeholder="姓氏">
  </div>
</form>

<!-- 多个附加组件/帮助文本 -->
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">一</span>
      <span class="input-group-text">二</span>
      <span class="input-group-text">三</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>
自己动手试一试 »

带复选框和单选按钮的输入组

您也可以使用复选框或单选按钮代替文本

示例

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox">
    </div>
  </div>
  <input type="text" class="form-control" placeholder="一些文本">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio">
    </div>
  </div>
  <input type="text" class="form-control" placeholder="一些文本">
</div>
自己动手试一试 »

输入组按钮

示例

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-primary" type="button">基本按钮</button>
  </div>
  <input type="text" class="form-control" placeholder="一些文本">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="搜索">
  <div class="input-group-append">
    <button class="btn btn-success" type="submit">Go</button>
  </div>
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="一些巧妙的东西..">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">确定</button>
    <button class="btn btn-danger" type="button">取消</button>
  </div>
</div>
自己动手试一试 »

带下拉按钮的输入组

在输入组中添加一个下拉按钮。请注意,您不需要像通常那样使用 .dropdown 包装器。

示例

<div class="input-group mt-3 mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
      下拉按钮
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">链接 1</a>
      <a class="dropdown-item" href="#">链接 2</a>
      <a class="dropdown-item" href="#">链接 3</a>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="用户名">
</div>
自己动手试一试 »

输入组标签

将标签放在输入组外部,并记住 for 属性的值应与输入的 id 匹配。

点击标签,它将使输入获得焦点

@example.com

示例

<label for="demo">在这里写下您的电子邮件:</label>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="电子邮件" id="demo" name="email">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
</div>
自己动手试一试 »

×

联系销售

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

报告错误

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

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

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