bootstrap-tagsinput的简单上手

  • 时间:2018-10-30 22:56 作者:Noah来举个栗子 来源:Noah来举个栗子 阅读:987
  • 扫一扫,手机访问
摘要:Bootstrap Tags Input当前的稳固版本为:v0.8.0GitHub地址:https://github.com/bootstrap-tagsinput/bootstrap-tagsinput在线示例:http://bootstrap-tagsinput.github.io/bootst

Bootstrap Tags Input

当前的稳固版本为:v0.8.0

GitHub地址:https://github.com/bootstrap-tagsinput/bootstrap-tagsinput

在线示例:http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

Bootstrap Tags Input是一个提供给使用Twitter开源框架Bootstrap客户,用来管理标签的jQuery插件。

首先我们点击上面提到的GitHub地址来对源码进行下载。

bootstrap-tagsinput的简单上手

下载下来的是个zip压缩包,我们进行解压。

解压完成后,将其中的dist目录放置在我们的前台demo目录内,并将其重新命名为bootstrap-tagsinput。

bootstrap-tagsinput的简单上手

我们在页面引入css和js文件。

首先看下目录结构

demo

|---style

|------lib

|------public

|------static

|------------bootstrap-tagsinput

|------temp

|---views

|------card

|---------card-add.html

页面内引入css文件


页面内引入js文件


需要注意的是 css 文件需要在Bootstrap的css文件下,js文件需要在jQuery,popper(Bootstrap 4.x新添加),Bootstrap的js文件之下。

接下来我们使用该插件。






方法1比如法2要更“麻烦”少量,主要起因在于我们需要使用js代码告诉前台服务器说这是一个使用BootstrapTagsInput插件的标签,但是当需要对该插件进行少量个性化设置的时候,就必需使用js代码来对其进行配置。就像上面代码里的

maxChars: 11

一样,它的意思是单个标签的最大长度为11个字符。还有更多好玩好用的自己设置配置在【在线示例】的链接里可以看到。

bootstrap-tagsinput的简单上手

PS:

1. 当前版本基于Bootrap 3.x,使用Bootstrap 4.x 的客户可能需要重新确认样式。

2. 本文没有使用bootstrap进行样式构建,使用的为H-UI框架。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】树莓派安装TensorFlow(2020-04-24 21:11)
【系统环境|服务器应用】防面试-SD_WebImage(2020-04-24 21:11)
【系统环境|服务器应用】推荐一款视频控件xgplayer(2020-04-24 21:11)
【系统环境|服务器应用】PostgreSQL 源码解读(27)- 查询语句#12(查询优化-上拉子链接#2)(2020-04-24 21:11)
【系统环境|服务器应用】如何轻松学习JavaScript?(2020-04-24 21:10)
【系统环境|服务器应用】【源码剖析】Launcher 8.0 源码 (12) --- Launcher 启动流程 第五步之计算桌面各布局细节参数(2020-04-24 21:10)
【系统环境|服务器应用】前台碰撞室之console.log与文本字符(2020-04-24 21:10)
【系统环境|服务器应用】好用的Middleware实现(2020-04-24 21:10)
【系统环境|服务器应用】前台面试每日 3+1 —— 第373天(2020-04-24 21:10)
【系统环境|服务器应用】绍圣--kafka之生产者(五)(2020-04-24 21:10)
手机二维码手机访问领取大礼包
返回顶部