bootstrap-tags
Version:
Bootstrap styled tag pills
181 lines (175 loc) • 6.07 kB
HTML
<html>
<head>
<title>Bootstrap tags - pills UI component</title>
<link rel="stylesheet" href="components/bootstrap.css"/>
<link rel="stylesheet" href="css/fontello-d1d7d531/css/fontello.css"/>
</head>
<body>
<div class="container pt-5">
<div class="card mb-5 bg-light p-5">
<h1 class="display-4">Bootstrap Tags Demo</h1>
<p class="lead">Bootstrap tags is an UI component based on Bootstrap 4 and jQuery to create dynamic pills list element.</p>
<style type="text/css">
.btn-twitter {
padding-left: 30px;
background: rgba(0, 0, 0, 0) url(https://platform.twitter.com/widgets/images/btn.27237bab4db188ca749164efd38861b0.png) -20px 6px no-repeat;
}
.btn-twitter:hover {
background-position: -20px -18px;
}
</style>
<p>
<a class="btn btn-success" href="https://github.com/Serhioromano/bootstrap-tags/blob/master/README.md">Documentation</a>
<a href="https://github.com/Serhioromano/bootstrap-tags" class="btn btn-light">Fork on GitHub</a>
<a href="https://twitter.com/serhioromano" class="btn btn-light btn-sm btn-twitter" data-show-count="false" data-size="large">Follow @serhioromano</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</p>
</div>
<div class="row">
<div class="col-4"><h3>Standard demo</h3>
<p class="small">Simple tags with default options and few lines of CSS.</p>
</div>
<div class="col-8">
<div class="card bg-light p-3">
<div id="bs-tags"></div>
<style type="text/css">
#bs-tags .badge i.icon-cancel {
font-size: 0.75rem;
}
#bs-tags .badge a,
#bs-tags .badge {
color:aliceblue;
font-size: 1rem;
font-weight: 100;
}
</style>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-4"><h3>Custom style</h3>
<p class="small">This is example how you can customize tags to anything you like.</p>
</div>
<div class="col-8">
<div class="card bg-light p-3">
<div id="bs-tags-custom"></div>
<style type="text/css">
#bs-tags-custom .pills-list {
display: block;
}
#bs-tags-custom .tag-badge {
margin-right: 10px;
margin-bottom: 10px;
border-radius: 8px;
border: 2px dashed transparent;
background-color: #f5f5f5;
width: 250px;
line-height: 20px;
padding: 5px;
overflow: hidden;
height: 57px;
text-overflow: ellipsis;
position: relative;
}
#bs-tags-custom .tag-badge a.tag-link {
color: #151515;
}
#bs-tags-custom .tag-badge:hover {
border: 2px dashed #c4ca65;
background-color: #e8ee80;
}
#bs-tags-custom .tag-badge:hover a.tag-link {
text-decoration: none;
color: #555b2b;
}
#bs-tags-custom .tag-remove {
position: absolute;
top: 3px;
right: 2px;
}
</style>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-4">
<h3>Tags in a Form</h3>
<p class="small">This is an example of including tags in a form and using a custom function when duplicate tags are added it will highlight duplicate.</p>
</div>
<div class="col-8">
<div class="card bg-light p-3">
<form >
<div id="bs-tags-form" class=""></div>
<button type="submit" class="btn btn-sm btn-primary mt-2">Submit</button>
<style type="text/css">
#bs-tags-form .badge i.icon-cancel {
font-size: 0.75rem;
}
#bs-tags-form .badge a,
#bs-tags-form .badge {
color:black;
font-size: 0.75rem;
font-weight: 100;
}
</style>
</form>
</div>
</div>
</div>
<div id="disqus_thread" class="mt-4"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'bootstraptagsinput'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
<script type="text/javascript" src="components/jquery.min.js"></script>
<script type="text/javascript" src="components/bootstrap.bundle.js"></script>
<script type="text/javascript" src="components/bootstrap3-typeahead.js"></script>
<script type="text/javascript" src="components/jquery.color.js"></script>
<script type="text/javascript" src="js/bootstrap-tags.js"></script>
<script type="text/javascript">
(function($){
$('#bs-tags').tags({
suggestions: ["Banana", "Durian", "Cocos"],
suggestion_url: "urls/suggestions.json",
values_url: 'urls/defaults.json',
only_suggestions: true
});
$('#bs-tags-custom').tags({
double_hilight: '#C4CA65',
only_suggestions: true,
suggestion_url: "urls/user_suggestions.json",
templates: {
pill: '<div class="float-left tag-badge p-2">{0}</div>',
add_pill: '<div class="tag-form"></div>',
number: ' <sup><small>{0}</small></sup>',
plus_icon: '<button class="btn btn-primary btn-sm"><i class="icon-plus"></i></button>',
delete_icon: '<i class="icon-trash-empty"></i>',
},
values_url: 'urls/default_users.json'
});
$('#bs-tags-form').tags({
suggestions: ["Banana", "Durian", "Cocos"],
suggestion_url: "urls/suggestions.json",
values_url: 'urls/defaults.json',
templates: {
pill: '<span class="badge badge-warning badge-pill tag-badge p-2 mr-2">{0}</span>'
},
onDuplicate: function(original, duplicate){
$(original).hide().fadeIn();
return false;
}
});
}(jQuery))
</script>
</body>
</html>