CSS Bootstrap 3、Bootstrap 4和Bootstrap 5 – input-xs（小于sm）

在本文中，我们将介绍CSS Bootstrap 3、Bootstrap 4和Bootstrap 5中的input-xs（小于sm）。

阅读更多：CSS 教程

CSS Bootstrap 3 – input-xs

在Bootstrap 3中，我们可以使用.input-xs类来创建一个较小的输入框（输入框高度和字体尺寸均减小），适用于移动设备和小屏幕。

示例代码如下所示：

<input type="text" class="form-control input-xs" placeholder="Small input">

在这个示例中，通过将.input-xs类应用于.form-control类，我们可以创建一个小尺寸的输入框。

CSS Bootstrap 4 – input-xs

在Bootstrap 4中，.input-xs类已被废弃。相反，我们可以使用.form-control-sm类来创建一个较小的输入框。

示例代码如下所示：

<input type="text" class="form-control form-control-sm" placeholder="Small input">

通过将.form-control-sm类应用于.form-control类，我们可以创建一个小尺寸的输入框，该输入框比默认尺寸稍小。

CSS Bootstrap 5 – input-xs

在Bootstrap 5中，.input-xs类已被完全删除。相反，我们可以使用.form-control-sm类来创建一个较小的输入框，同样适应移动设备和小屏幕。

示例代码如下所示：

<input type="text" class="form-control form-control-sm" placeholder="Small input">

通过将.form-control-sm类应用于.form-control类，我们可以创建一个小尺寸的输入框，该输入框比默认尺寸稍小。

总结

在本文中，我们了解了在CSS Bootstrap 3、Bootstrap 4和Bootstrap 5中如何创建较小的输入框。在Bootstrap 3中，我们使用.input-xs类，而在Bootstrap 4和Bootstrap 5中，我们使用.form-control-sm类。这些小尺寸的输入框非常适用于移动设备和小屏幕。