使用 Bootstrap 标签输入来工作

Question

使用 Bootstrap 标签输入来工作

mim*_*mim 1 jquery twitter-bootstrap typeahead.js 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>

Run Code Online (Sandbox Code Playgroud)

但代码似乎不起作用。关于如何实现这项工作有什么想法或想法吗？谢谢！

Answer 1

Kyl*_*Mit 5

如果不查看 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>

Run Code Online (Sandbox Code Playgroud)

Plunker 中的演示

也就是说，这里有很多相互冲突的库。您使用的是ng-tags-input或bootstrap-tagsinput或吗bootstrap-tagsinput-angular？您应该选择一个并围绕它选择一种开发策略以避免冲突。

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

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，3 月前
查看次数：	6151 次
最近记录：	11 年，3 月前