"pallete"
Bootstrap 3.3.0 Snippet by Burny0205

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="row2">
<div class="col-md-1 col">
<div class="flex-item red"></div>
<div class="flex-item green"></div>
</div>
<div class="col-md-1 col">
<div class="flex-item green"></div>
<div class="flex-item red"></div>
</div>
<div class="col-md-1 col">
<div class="flex-item blue"></div>
<div class="flex-item green"></div>
</div>
<div class="col-md-1 col">
<div class="flex-item green" ></div>
<div class="flex-item blue"></div>
</div>
<div class="col-md-1 col">
<div class="flex-item green" ></div>
<div class="flex-item green"></div>
</div>
<div class="col-md-1 col">
<div class="flex-item blue" ></div>
<div class="flex-item blue"></div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
html, body {
height: 100%;
}
body {
margin: 0;
}
.red{
background-color:red;
}
.green{
background-color:green;
}
.blue{
background-color:blue;
}
.flex-container {
height: 100%;
margin: 3;
}
.row2 {
display: inline-block;
}
.col{
cursor:pointer;
width:28px;
padding:0;
align:center;
border: transparent 2px solid;
margin:4px 0px;
}
.col:hover{
border: 2px solid lightblue;
border-radius:10px;
}
.sel{
z-index:10000;
background-color:grey;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
$(".col").click(function (e) {
alert('!');
$(this).toggleClass('sel');
$(this).siblings().removeClass('sel');
$("#colorPalette").val($(this).attr('id'));
var id = $(this).attr('id');
});
$("span.tel").click(function (e) {
$(this).toggleClass('glyphicon glyphicon-ok');
$(this).siblings().removeClass('glyphicon glyphicon-ok');
$("#colorPalette2").val($(this).attr('id'));
var id = $(this).attr('id');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Pro

Questions / Comments: