"Bootstrap Material Design"
Bootstrap 4.0.0 Snippet by MDBootstrap

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/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<style>
.md-form .prefix {
float: left;
position: relative;
width: 0;
}
.view:not(.hm-zoom) {
overflow:visible;
}
/* Animations */
.wow {
visibility: hidden;
}
.btn-group {
display:inline-flex;
}
</style>
<!--Main layout-->
<main class="mt-2">
<div class="container text-center">
<h3 class="mb-2 wow fadeIn" data-wow-delay="0.2s">Material Design for Bootstrap 4 or 3</h3>
<p class="lead mb-2 wow fadeIn" data-wow-delay="0.2s">This presentation shows a small part of components and features available in Material Design for Bootstrap. <strong>To see all of them have a look at our full demo.</strong></p>
<h4 class="mb-2 wow fadeIn" data-wow-delay="0.3s">Full demo & download</h4>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css);
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
// Adds some data to charts
$(function() {
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}, {
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
var option = {
responsive: true,
scaleFontSize: 10,
};
//Chart 1
var ctx = document.getElementById("lineChartEx").getContext('2d');
var lineChart = new Chart(ctx).Line(data, option);
// Chart 2
var ctx = document.getElementById("radarChartEx").getContext('2d');
var radarChart = new Chart(ctx).Radar(data, option);
// Chart 3
var ctx = document.getElementById("barChartEx").getContext('2d');
var barChart = new Chart(ctx).Bar(data, option);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

i want to check that your designed page code is working on my notepad, but this code is not display anything on my browser, why?

razia mubashar () - 7 years ago - Reply 0