开心档之Bootstrap4 输入框组

iOS学霸

于 2023-02-21 18:01:09 发布

阅读量402

点赞数

分类专栏： C语言移动端产品文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_74760716/article/details/129147335

版权

Bootstrap4 输入框组

我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。

使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。

最后，我们还需要使用 .input-group-text 类来设置文本的样式。

Bootstrap4 实例

<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="Username">
  </div>
 
  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Your Email">
    <div class="input-group-append">
      <span class="input-group-text">@kxdang.com</span>
    </div>
  </div>
</form>