[jQuery plugin] Bootstrap 4 的 Tag input

網址

https://www.jqueryscript.net/form/Bootstrap-4-Tag-Input-Plugin-jQuery.html

2021-10-21 21:55:28

Bootstrap 應該是現在很多人做網站都會用到的 UI Framework，在第四版之後有些舊版的 plugin UI 支援上可能有問題，這個 tag input 的功能應該也是不少想做內容型的網站的朋友需要用到的，就跟大家分享一下支援 Bootstrap 4 的 Tag input。

外掛網址: Bootstrap 4 Tag Input Plugin With jQuery - Tagsinput.js

下載後將 css 和 js 掛上去就好了。

view plain copy to clipboard print

<link href="tagsinput.css" rel="stylesheet" type="text/css">
<script src="tagsinput.js">script>

直接使用

view plain copy to clipboard print

$(".taginput").tagsinput();

1001 Fonts- 線上免費字型資源庫 Zwicon- 高品質免費圖示集，支援各種格式

你可能也會喜歡的

[Vue.js] v-for 與列表

為網頁寫的 2D 物理碰撞引擎- matter.js

QueryLoader2.js- 簡單製作遮住整頁的讀取效果

透過 fabric.js 建置圖片編輯的 canvas

[jQuery Plugin] dragScroll.js- 幫頁面上可捲動的區塊套上 drag/swipe 效果

JavaScript 的 Set 與用法

課程推薦

AI工作術全面學習實戰營：6 堂精選課程，學會最好用 AI 工具，翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師，打造上述 6 堂實用課程，教你學會時下最好用的 AI 工具，導入生成式 AI 來產製工作內容，改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。