文章/答案/技术大牛

发布

社区首页 >问答首页 >使用Bootstrap标签输入进行工作

问使用Bootstrap标签输入进行工作
EN

Stack Overflow用户

提问于 2014-08-14 02:09:33

回答 1查看 5.3K关注 0票数 0

我一直在尝试使用Bootstrap标签输入，就像这个链接中的例子：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>

但代码似乎不起作用。有没有什么想法或想法可以让它工作呢？谢谢!

jquery

twitter-bootstrap

typeahead.js

bootstrap-tags-input

回答 1

Stack Overflow用户

发布于 2014-08-14 04:25:01

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

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25293206

复制

相似问题

问使用Bootstrap标签输入进行工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Bootstrap标签输入进行工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Bootstrap标签输入进行工作
EN