副队长BootStrap5探究(8)--输入框组 input group

点此查看 所有教程、项目、源码导航

文章目录

[1. 开篇介绍与环境引入](#1. 开篇介绍与环境引入)
- [1.1 本章节学习背景](#1.1 本章节学习背景)
- [1.2 引入 Bootstrap 5](#1.2 引入 Bootstrap 5)
[2. input group 使用方法](#2. input group 使用方法)
- [2.1 基础输入框组](#2.1 基础输入框组)
- [2.2 两侧同时附加内容](#2.2 两侧同时附加内容)
- [2.3 和按钮组合](#2.3 和按钮组合)
- [2.4 尺寸控制](#2.4 尺寸控制)
[3. 底层实现关键点解析](#3. 底层实现关键点解析)
- [3.1 input-group 外层容器](#3.1 input-group 外层容器)
- [3.2 input-group-text](#3.2 input-group-text)
- [3.3 内部输入框弹性拉伸](#3.3 内部输入框弹性拉伸)
- [3.4 处理两端圆角](#3.4 处理两端圆角)
- [3.5 大号、小号尺寸](#3.5 大号、小号尺寸)
- [3.6 边框颜色调整](#3.6 边框颜色调整)
- [3.7 调整输入框聚焦效果](#3.7 调整输入框聚焦效果)
[4. 小结](#4. 小结)

1. 开篇介绍与环境引入

1.1 本章节学习背景

上一节我们学习了 form-control，掌握了标准输入框、文本域、尺寸、只读和禁用样式。这一节我们学习输入框组 input group。

实际开发里经常会遇到这样的需求：在输入框的左侧或者右侧固定挂上一段文字、按钮、图标，例如金额输入前面带上人民币符号、搜索框后面带上搜索按钮。

如果自己手写布局，很容易出现边角对不齐、圆角冲突、缝隙难以消除等问题。Bootstrap 的 input-group 组件就是专门解决这类场景，把附加元素和输入框组合成一个视觉整体，自动处理相邻元素的圆角，看起来浑然一体。

按照本系列固定的学习思路，我们不会仅仅记住类名、复制代码。先学会 input group 的使用方式，之后通过精简的 CSS 复刻，看懂它背后依靠哪些 CSS 特性实现，反过来巩固我们的 CSS 基础，完善前端技术体系。

输入框组属于纯 CSS 组件，不需要 JavaScript。

1.2 引入 Bootstrap 5

这里着重强调：引入 Bootstrap，本质就是引用别人提前写好的 CSS 类库以及配套的 JS，不需要把完整源码复制到页面当中，通过外链加载即可。想要使用 input-group，只需要引入 Bootstrap 的 CSS 文件。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- Bootstrap 5 CSS -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/css/bootstrap.min.css">
</head>

<body>
    <!-- Bootstrap JS + Popper，用于部分交互 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/js/bootstrap.bundle.min.js"></script>
</body>

</html>

2. input group 使用方法

2.1 基础输入框组

外层使用 input-group，附加文字使用 input-group-text，内部放置 form-control。附加文字可以放在输入框左侧或者右侧。

html 复制代码

<div class="mb-3">
  <div class="input-group">
    <span class="input-group-text">¥</span>
    <input type="text" class="form-control" placeholder="请输入金额">
  </div>
</div>

<div class="mb-3">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="请输入邮箱">
    <span class="input-group-text">@qq.com</span>
  </div>
</div>

效果：

mb-3 是 Bootstrap 5 的间距工具类：mb = margin-bottom，下外边距****3 是档位编号。

2.2 两侧同时附加内容

左右都可以搭配 input-group-text，中间保留输入框。

html 复制代码

<div class="mb-3">
  <div class="input-group">
    <span class="input-group-text">https://</span>
    <input type="text" class="form-control" placeholder="域名">
    <span class="input-group-text">.com</span>
  </div>
</div>

效果：

2.3 和按钮组合

input-group 里面不仅可以放文本，还可以放入 button，做成搜索组合框。

html 复制代码

<div class="mb-3">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="输入关键词搜索">
    <button class="btn btn-primary" type="button">搜索</button>
  </div>
</div>

效果：

2.4 尺寸控制

给外层 input-group 添加 input-group-lg、input-group-sm，一次性控制整套输入框组的大小，不需要单独修改内部每一个控件。

html 复制代码

<div class="mb-3">
  <div class="input-group input-group-lg">
    <span class="input-group-text">大号</span>
    <input type="text" class="form-control">
  </div>
</div>
<div class="mb-3">
  <div class="input-group input-group-sm">
    <span class="input-group-text">小号</span>
    <input type="text" class="form-control">
  </div>
</div>

效果：

3. 底层实现关键点解析

下面是精简复刻版本，去掉大量浏览器兼容代码，只保留核心逻辑。

使用上面的 HTML 代码，加下面自己写的 CSS，能得到基本类似的效果，大家可以尝试下。

3.1 input-group 外层容器

css 复制代码

.input-group {
  /* 弹性布局，让内部元素横向排成一行 */
  display: flex;
  /* 默认宽度撑满父容器 */
  width: 100%;
}

暂时效果有限如下：

3.2 input-group-text

css 复制代码

.input-group-text {
  /* 和输入框保持一致内边距 */
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  /* 背景灰色，区分输入区域 */
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  /* 阻止内容收缩 */
  white-space: nowrap;
}

有点意思了：

3.3 内部输入框弹性拉伸

css 复制代码

.input-group .form-control {
  /* 让输入框自动占满剩余空间 */
  flex: 1 1 auto;
  /* 清除左右圆角，交给相邻元素处理 */
  border-radius: 0;
}

flex: 1 1 auto 是简写，等价于把三个属性一次性写完，具体解释：

flex-grow: 1
如果弹性盒子还有剩余空间，这个元素可以瓜分剩下的空白；如果是同组里唯一设置 grow:1 的，它会吃掉全部剩余宽度。
flex-shrink: 1
当空间不够、装不下所有子元素的时候，允许这个元素自动收缩变小。如果设为 0，就禁止收缩。
flex-basis: auto
元素初始基准尺寸：优先看元素自身内容或者 width；没有设置宽度时，由内容撑开。

所以此时元素被撑开：

3.4 处理两端圆角

css 复制代码

/* 组里面第一个子元素，开启左侧圆角 */
.input-group > :first-child {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
/* 组里面最后一个子元素，开启右侧圆角 */
.input-group > :last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

此时效果更加圆润：

3.5 大号、小号尺寸

css 复制代码

.input-group-lg > .input-group-text,
.input-group-lg > .form-control {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
}

.input-group-sm > .input-group-text,
.input-group-sm > .form-control {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

此时效果：

3.6 边框颜色调整

这个黑线不符合BootStrap浅会色特质，更换下border颜色：

css 复制代码

		.input-group .form-control {
            /* 让输入框自动占满剩余空间 */
            flex: 1 1 auto;
            /* 清除左右圆角，交给相邻元素处理 */
            border-radius: 0;
            border: 1px solid #dee2e6;
        }

效果：

3.7 调整输入框聚焦效果

css 复制代码

.input-group .form-control:focus {
  outline: 0;
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

此时聚焦时：

4. 小结

input-group 的核心就是弹性布局加上圆角自动分配，这也是它最巧妙的地方。

input-group 使用 flex，内部所有控件排在一行；输入框设置 flex:1，自动吃掉剩下的宽度；
组件自动抹掉中间相邻元素的圆角，只保留整组最左端、最右端的圆角，视觉上合并成一体；
input-group-text 适合静态文字；按钮直接放进去即可，不需要额外类；
在最外层统一控制尺寸，组内所有元素同步放大缩小；
如果手动修改内部元素的 float、display，很容易破坏这种相邻圆角合并的效果；
这个组件经常用于搜索框、金额、网址、账号前缀这类表单场景，是后台管理页面高频组件。