这是一款基于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