如何使用 Bootstrap 标签输入

Question

我正在尝试使用 Markup https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/ 但无法正常工作

.bootstrap-tagsinput {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  display: block;
  padding: 4px 6px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  max-width: 100%;
  line-height: 22px;
  cursor: text;
}

.bootstrap-tagsinput input {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0 6px;
  margin: 0;
  width: auto;
  max-width: inherit;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384- 
    KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>

这是我在网络浏览器中的输出

我错在哪里以及遗漏了什么

我在项目中使用模板。

这是我想要的输出

Answer 1

您需要实际包含用于 bootstrap 标记的库。查看示例页面，它们将其包含在 html 标记的末尾。

如何使用 Bootstrap 标签输入

How to use Bootstrap Tags Input

html

css

jquery

bootstrap-4