这是一款基于Bootstrap4的标签输入框插件。该插件使用Bootstrap 4 badge组件来制作标签输入和移除的效果。

使用方法

在页面中引入下面的文件。

<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="jquery-tagsinput.min.css" rel="stylesheet" type="text/css" />

<script src="jquery-3.3.1.min.js"></script>
<script src="jquery.color.plus-names-2.1.2.min.js"></script>
<script src="bootstrap.min.js" defer></script>
<script src="jquery-tagsinput.min.js" defer></script>                    
                
HTML结构

基本HTML结构如下:

<input id="tags" name="tags" value="first;second;third;" />
                
初始化插件

在页面DOM元素加载完毕之后,通过tagsInput()方法来初始化插件。

$('#tags').tagsInput();
                

该Bootstrap4的标签输入框插件的github地址为:https://github.com/khenfei/jquery-tagsinput