Bootstrap—输入框组input-group

最新推荐文章于 2024-08-08 18:58:30 发布

Tiramisu_C

最新推荐文章于 2024-08-08 18:58:30 发布

阅读量4.1w

点赞数 4

分类专栏： Bootstrap Bootstrap学习之路文章标签： Bootstrap 输入框组

本文链接：https://blog.csdn.net/nongweiyilady/article/details/53648768

版权

Bootstrap的输入框组(input-group)提供了一种简便的方法来在输入框前后添加文本或按钮元素。通过添加适当的class，如`form-control`和`input-group-addon`，可以轻松实现这种常见设计，常用于商城搜索框等场景，方便自定义样式以适应项目需求。

摘要由CSDN通过智能技术生成

相信你在很多的网站页面上都看见过这样的输入框：

这样的输入框我们通过原生的手写css也能实现，但是使用Bootstrap的输入框组会让你实现起来更加简便。

实现在输入框前后添加元素的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入框组</title>
    <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
    <div class="container" style="width: 300px;margin-top: 20px">
        <form action="#">
            <div class="input-group form-group">
                <span class="input-group-addon">@</span>