Question

我一直在尝试使用Bootstrap Tags Input，就像这个链接中的示例一样： http://timschlechter.github.io/bootstrap-tagsinput/examples/ 这是我的代码：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>Bootstrap Tags Input</title>

    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.css" />
    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css" />
   <!-- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" /> -->
    <link rel="stylesheet" href="libs/bootstrap-tagsinput.css" />


  </head>

  <body>
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />

 <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script src="libs/bootstrap/js/bootstrap.min.js"></script>
     <script src="libs/bootstrap-tagsinput.js"></script>
     <script src="libs/bootstrap-tagsinput-angular.js"></script>
     <script src="libs/typeahead.bundle.js"></script>
  </body>

</html>

但代码似乎不起作用。关于如何使这项工作的任何想法或想法？谢谢！

Answer 1

如果没有看到你的lib文件夹中的内容，我们就不可能知道出了什么问题。

如果您对所有库使用适当的CDN，那么一切都将正常工作：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Bootstrap Tags Input</title>

  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.css" />
  <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="http://timschlechter.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" />
</head>
<body>

  <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />

  <script src="http://code.angularjs.org/1.2.15/angular.js" ></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <script src="http://timschlechter.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.js"></script>
  <script src="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput-angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
</body>
</html>

Demo in Plunker

那就是说，你这里有很多冲突的图书馆。您使用的是ng-tags-input或bootstrap-tagsinput还是bootstrap-tagsinput-angular？您应该选择一个并选择围绕它的开发策略以避免冲突。

例如，这些是上面例子中实际使用的唯一libraries：

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.min.js"></script>

使用Bootstrap标签输入工作

1 个答案:

Demo in Plunker