bootstrap-tagsinput的简单上手（bootstrap lg）

Bootstrap Tags Input

当前的稳定版本为：v0.8.0

GitHub地址：https://github.com/bootstrap-tagsinput/bootstrap-tagsinput

在线示例：http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

Bootstrap Tags Input是一个提供给使用Twitter开源框架Bootstrap用户，用来管理标签的jQuery插件。

首先我们点击上面提到的GitHub地址来对源码进行下载。

下载下来的是个zip压缩包，我们进行解压。

解压完成后，将其中的dist目录放置在我们的前端demo目录内，并将其重新命名为bootstrap-tagsinput。

我们在页面引入css和js文件。

首先看下目录结构

demo

|---style

|------lib

|------public

|------static

|------------bootstrap-tagsinput

|------temp

|---views

|------card

|---------card-add.html

页面内引入css文件

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

页面内引入js文件

<script type="text/javascript" src="../../style/static/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>

需要注意的是 css 文件需要在Bootstrap的css文件下，js文件需要在jQuery，popper（Bootstrap 4.x新增），Bootstrap的js文件之下。

接下来我们使用该插件。

<!-- 方法1 -->
<input type="text" class="input-text" id="my-tags">
<script type="text/javascript">
 $(document).ready(function(){
 // 初始化Tags Input
 $('#my-tags').tagsinput({
 // 设定单个标签字符串最大长度为11
 maxChars: 11
 });
 });
</script>
<!-- 方法2 -->
<input type="text" class="input-text" data-role="tagsinput">

方法1比方法2要更“麻烦”一些，主要原因在于我们需要使用js代码告诉前端服务器说这是一个使用BootstrapTagsInput插件的标签，但是当需要对该插件进行一些个性化设置的时候，就必须使用js代码来对其进行配置。就像上面代码里的

maxChars: 11

一样，它的意思是单个标签的最大长度为11个字符。还有更多好玩好用的自定义配置在【在线示例】的链接里可以看到。

PS：

1. 当前版本基于Bootrap 3.x，使用Bootstrap 4.x 的用户可能需要重新确认样式。

2. 本文没有使用bootstrap进行样式构建，使用的为H-UI框架。