articles

Bootstrap Color Picker

Bootstrap Color Picker

Anonymous User 13492 21-Aug-2014

Into this article, I’m explaining about Bootstrap color picker.

Download bootstrap CSS and JavaScript file from http://getbootstrap.com/, download the latest jQuery file from http://jquery.com/,
download pick a color.css file from http://www.zombieobsession.com/App/Lib/pick-a-color-master/build/1.1.6/css/ and download pick a color.js file from
http://www.zombieobsession.com/App/Lib/pick-a-color-master/build/1.1.6/js/.
Pick-a-Color is designed to be easy for anyone to use. According to a good UI, the interface is based on Twitter bootstrap styles, so it looks cute with almost any site's styles.
A-Color-Picker tool is a cool and easy-to-use jQuery plugin that helps you pick beautiful and powerful colors using Twitter's Bootstrap framework.

Add these files in your project

<link href="~/Content/bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet" /> 

Download link: http://getbootstrap.com/ 

<link href="~/Content/bootstrap-3.1.1-dist/css/pick-a-color-1.1.6.min.css" rel="stylesheet" /> 

Download link: http://www.zombieobsession.com/App/Lib/pick-a-color-master/build/1.1.6/css/   

<script src="~/scripts/jquery-2.1.0.min.js"></script> 

Download link: http://jquery.com/ 

<script src="~/scripts/tinycolor-0.9.14.min.js"></script>

<script src="~/scripts/pick-a-color-1.1.6.min.js"></script>

Download link: http://www.zombieobsession.com/App/Lib/pick-a-color-master/build/1.1.6/js/  

Add this to your HTML where you want a Color Picker:

<input type="text" value="Your Default value" name="Name for Color" class="color-picker form-control">

Replace Your Default value with the default color code in hex code and replace Name For Color with your unique identifier for the color picker like (border-color or background-color). 

Example:

Html code here

<div class="container">
    <input type="text" value="000" name="bgcolor" class="color-picker form-control">
</div>
JavaScript code here
<script type="text/javascript">
    $(document).ready(function () {
        $(".color-picker").pickAColor({
            inlineDropdown: true
        });
 
    });
</script>

 Output 

Bootstrap Color Picker

 You should read this Article - Console Color Enumeration in C#



Updated 19-Nov-2019
I am a content writter !

Leave Comment

Comments

Liked By