如何在输入字段中使用bootstrap 4制作芯片

Bootstrap 4 是一个流行的前端框架，它提供了许多预定义的样式和组件，用于快速构建响应式网页。芯片（Chips）是一种常见的 UI 元素，通常用于显示标签、分类或其他小块信息。虽然 Bootstrap 4 本身没有内置的芯片组件，但可以通过一些自定义样式和组件来实现类似的效果。

基础概念

芯片通常用于表示一组数据中的单个项目，例如标签、联系人、过滤器选项等。它们通常是可点击的，并且可以包含图标、文本或两者兼有。

类型

静态芯片：固定内容的芯片，不可编辑。
可编辑芯片：允许用户添加或删除芯片内容。
可搜索芯片：结合输入框，允许用户通过搜索添加芯片。

应用场景

标签管理：在博客、文章编辑器中用于标记主题或关键词。
联系人列表：在通讯录或消息应用中显示联系人。
过滤选项：在数据表格或列表中用于筛选数据。

实现方法

以下是一个使用 Bootstrap 4 和自定义 CSS 制作芯片的示例：

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Chips</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .chip {
            display: inline-block;
            padding: 0 15px;
            height: 32px;
            font-size: 14px;
            line-height: 32px;
            border-radius: 16px;
            background-color: #e0e0e0;
            margin: 4px 2px;
        }
        .chip img {
            float: left;
            margin: 0 8px 0 -12px;
            height: 32px;
            width: 32px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Add a tag...">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button">Add</button>
            </div>
        </div>
        <div class="mt-3" id="chips-container"></div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.input-group button').click(function() {
                var tag = $('.input-group input').val();
                if (tag) {
                    $('#chips-container').append('<div class="chip">' + tag + '<span class="closebtn">&times;</span></div>');
                    $('.input-group input').val('');
                }
            });

            $('#chips-container').on('click', '.closebtn', function() {
                $(this).parent().remove();
            });
        });
    </script>
</body>
</html>

解释

HTML 结构：
- 使用 Bootstrap 的 input-group 组件创建一个输入框和一个按钮。
- 使用一个 div 容器来存放生成的芯片。

CSS 样式：
- 定义 .chip 类来设置芯片的基本样式，包括背景色、边框圆角、内边距等。
- 可以根据需要添加图标或其他元素。
JavaScript 功能：
- 当用户点击“Add”按钮时，获取输入框的值并创建一个新的芯片元素。
- 添加一个关闭按钮（×），允许用户移除已添加的芯片。