"Admin-Stats"
Bootstrap 3.3.0 Snippet by Demircii

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
33
34
35
36
37
<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="container">
<div class="row">
<div class="btn-group btn-group-justified">
<div class="btn-group" onclick="#">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-user"></span>
<h4>Profile</h4>
</button>
</div>
<div class="btn-group" onclick="#">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-time"></span>
<h4>Statistics</h4>
</button>
</div>
<div class="btn-group" onclick="#">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-usd"></span>
<h4>Donate</h4>
</button>
</div>
<div class="btn-group" onclick="#">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-cog"></span>
<h4>Settings</h4>
</button>
</div>
<div class="btn-group" onclick="#">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-question-sign"></span>
<h4>Help</h4>
</button>
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
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
/*
Inspired by http://dribbble.com/shots/890759-Ui-Kit-Metro/attachments/97174
*/
*, *:before, *:after {
/* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
-webkit-box-sizing: border-box;
/* Firefox (desktop or Android) 28- */
-moz-box-sizing: border-box;
/* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
box-sizing: border-box;
}
body {
background: #16A085;
font-family: 'Roboto', sans-serif;
padding-top: 40px;
}
.main {
background-color: #ECF0F1;
border: 0px solid #8E44AD;
border-radius: 5px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
margin-bottom: 40px;
margin-right: 10%;
margin-left: 10%;
}
.btn-nav {
text-align: center;
background-color: #ECF0F1;
border: 0px solid #8E44AD;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
var activeEl = 1;
$(function() {
var items = $('.btn-nav');
$( items[activeEl] ).addClass('active');
$( ".btn-nav" ).click(function() {
$( items[activeEl] ).removeClass('active');
$( this ).addClass('active');
activeEl = $( ".btn-nav" ).index( this );
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Argon Design System
Simple Admin
S-Admin interface
Admin Side Menu

Questions / Comments: