现有前端页面:
![](https://www.crifan.com/files/pic/uploads/2021/05/b1659dd1a36c468d98690e01258c0a1b.jpg)
希望此处的标签部分,可以显示出单个独立的有背景和边框的效果,类似于:
![](https://www.crifan.com/files/pic/uploads/2021/05/81ddf803da89456fb64bb8ecf20b2ea7.jpg)
bootstrap tag
去试试:
<span class=”badge badge-secondary”>Secondary</span>
代码:
function generateTagsHtml(tags){ var tagsHtml = "" // const BadgeType = "badge-primary" const BadgeType = "badge-secondary" // const BadgeType = "badge-success" // const BadgeType = "badge-danger" // const BadgeType = "badge-warning" // const BadgeType = "badge-info" // const BadgeType = "badge-light" // const BadgeType = "badge-dark" for(var eachTag of tags){ eachTagHtml = `<span class="badge ${BadgeType}">${eachTag}</span>` tagsHtml += eachTagHtml } console.log("tagsHtml=", tagsHtml) return tagsHtml }
效果:
![](https://www.crifan.com/files/pic/uploads/2021/05/63c91169b0de483580bb50f6c5fe4845.jpg)
然后可以改为其他类型。
另外试试badge-pill效果
const BadgeType = "badge-pill badge-secondary"
效果貌似更好看些:
![](https://www.crifan.com/files/pic/uploads/2021/05/95e4cbe0a74640e48d6d88ee98c4de79.jpg)
然后再去换个其他的效果看看:
info的:
![](https://www.crifan.com/files/pic/uploads/2021/05/c1dbec6a0adb42e1a1036eda4e462b07.jpg)
success的
![](https://www.crifan.com/files/pic/uploads/2021/05/b6d914cf2e3e45e2831c073dba372dc3.jpg)
转载请注明:在路上 » 【已解决】bootstrap中显示多个分离的有背景的tag标签