Bootstrap 3 之 Bootstrap 输入框组

Bootstrap 输入框组是一种用于将输入框和按钮组合在一起的组件，可以用于创建各种形式的表单。输入框组的结构如下：

<div class="input-group">
  <input type="text" class="form-control" placeholder="请输入内容">
  <span class="input-group-addon">按钮</span>
</div>

在上面的代码中，input-group 类用于包裹输入框和按钮，form-control 类用于设置输入框样式，input-group-addon 类用于设置按钮样式。

基本输入框组

下面是一个基本的输入框组示例，包含一个输入框和一个按钮：

<div class="input-group">
  <input type="text" class="form-control" placeholder="搜索...">
  <span class="input-group-addon">
    <button class="btn btn-primary">搜索</button>
  </span>
</div>

在上面的示例中，用户可以在输入框中输入内容，然后点击按钮执行搜索操作。

复杂输入框组

除了基本的输入框组外，Bootstrap 还支持更加复杂的输入框组结构。例如，可以在输入框组中添加多个按钮或下拉菜单：

<div class="input-group">
  <input type="text" class="form-control" placeholder="搜索...">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">按钮1</button>
    <button class="btn btn-default" type="button">按钮2</button>
  </span>
</div>

在上面的示例中，输入框组包含两个按钮，用户可以点击这两个按钮执行不同的操作。

小结

通过使用 Bootstrap 输入框组，我们可以方便地将输入框和按钮组合在一起，创建出更加美观和功能强大的表单组件。在实际开发中，可以根据需要定制输入框组的样式和结构，以满足项目的需求。