Bootstrap 输入框组学习笔记

Bootstrap 是一个流行的前端 CSS 框架，它提供了许多现成的样式和组件，可以帮助我们更快速地构建网站。其中，输入框组是一个常用的组件，它可以让我们更方便地组织和布局表单输入框。

基本用法

Bootstrap 的输入框组由一个 <div> 元素和若干个 <input> 或 <select> 元素构成。我们可以通过添加特定的 CSS 类来定义输入框组的样式和布局。以下是一个简单的例子：

htmlCopy Code
<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

这段代码定义了一个包含用户名输入框的输入框组，其中 @ 符号是一个附加的文本标签。input-group 类是必须的，它定义了整个输入框组的样式。input-group-addon 类定义了标签的样式。form-control 类定义了输入框的样式。

尺寸

Bootstrap 提供了三种尺寸的输入框组：大、默认和小。我们可以通过添加相应的类来设置尺寸：

htmlCopy Code
<div class="input-group input-group-lg">
  ...
</div>

<div class="input-group">
  ...
</div>

<div class="input-group input-group-sm">
  ...
</div>

按钮

输入框组还可以包含按钮，以实现更复杂的功能。我们可以在 <div> 元素中添加一个带有 input-group-btn 类的 <span> 元素，然后在其中添加按钮。

htmlCopy Code
<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">搜索</button>
  </span>
</div>

实例

以下是一个完整的实例，它包含了一个带有搜索按钮的输入框组：

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

在这个例子中，我们使用了 input-group-lg 类来设置输入框组的大尺寸，使用了 form-control 类来设置输入框的样式，使用了 btn 和 btn-primary 类来定义按钮的样式。