2015-03-09 06:28:51 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
<!-- [if lt IE 9]>
< script src = "http://html5shim.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Nested grids demo< / title >
2016-08-12 03:21:00 +02:00
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
2015-03-21 06:13:24 +01:00
< link rel = "stylesheet" href = "../dist/gridstack.css" / >
2015-03-09 06:28:51 +01:00
2016-08-12 03:21:00 +02:00
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js" > < / script >
< script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js" > < / script >
2015-03-21 06:13:24 +01:00
< script src = "../dist/gridstack.js" > < / script >
2016-08-19 06:44:01 +02:00
< script src = "../dist/gridstack.jQueryUI.js" > < / script >
2015-03-09 06:28:51 +01:00
< style type = "text/css" >
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
.grid-stack .grid-stack {
/*margin: 0 -10px;*/
background: rgba(255, 255, 255, 0.3);
}
.grid-stack .grid-stack .grid-stack-item-content {
background: lightpink;
}
< / style >
< / head >
< body >
< div class = "container-fluid" >
< h1 > Nested grids demo< / h1 >
< div class = "grid-stack" >
< div class = "grid-stack-item" data-gs-x = "0" data-gs-y = "0" data-gs-width = "4" data-gs-height = "3" >
< div class = "grid-stack-item-content" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque eius eligendi eos fuga magnam numquam perferendis provident quos rem. Asperiores assumenda dolor error eveniet impedit nihil numquam provident repellat ullam.
< / div >
< / div >
< div class = "grid-stack-item" data-gs-x = "4" data-gs-y = "0" data-gs-width = "4" data-gs-height = "4" >
< div class = "grid-stack-item-content" >
< div class = "grid-stack" >
< div class = "grid-stack-item" data-gs-x = "0" data-gs-y = "0" data-gs-width = "3" data-gs-height = "1" > < div class = "grid-stack-item-content" > 1< / div > < / div >
< div class = "grid-stack-item" data-gs-x = "3" data-gs-y = "0" data-gs-width = "3" data-gs-height = "1" > < div class = "grid-stack-item-content" > 2< / div > < / div >
< div class = "grid-stack-item" data-gs-x = "6" data-gs-y = "0" data-gs-width = "3" data-gs-height = "1" > < div class = "grid-stack-item-content" > 3< / div > < / div >
< div class = "grid-stack-item" data-gs-x = "9" data-gs-y = "0" data-gs-width = "3" data-gs-height = "1" > < div class = "grid-stack-item-content" > 4< / div > < / div >
< div class = "grid-stack-item" data-gs-x = "0" data-gs-y = "1" data-gs-width = "3" data-gs-height = "1" > < div class = "grid-stack-item-content" > 5< / div > < / div >
< div class = "grid-stack-item" data-gs-x = "3" data-gs-y = "1" data-gs-width = "3" data-gs-height = "1" > < div class = "grid-stack-item-content" > 6< / div > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< script type = "text/javascript" >
$(function () {
var options = {
};
$('.grid-stack').gridstack(options);
});
< / script >
< / body >
< / html >