我想制作一些彩色瓷砖,单击打开带有更多瓷砖的模态。 这些磁贴应刷新模式并显示另一个磁贴。
我想制作一个类似文件夹的东西,其中有更多的文件夹和更多的文件夹。
只要告诉我如何深入一层,我就会休息。
现在我所做的只是:
html, body, .container
{
height: 100%;
min-height: 100%;
}
.first {
float: left;
width: 20%;
height: 30%;
background-color: red;
}
.second{
float: left;
width: 20%;
height: 70%;
background-color: green;
}
.third{
float: right;
width: 80%;
height: 80%;
background-color: blue;
}
.fourth {
float: right;
width: 40%;
height: 20%;
background-color: #DDDDDD;
}
.last{
float: right;
width: 40%;
height: 20%;
background-color: yellow;
}
<div class="container">
<div class="first">first</div><div class="third">third</div>
<div class="second">second</div><div class="fourth">fourth</div>
<div class="last">last</div>
</div>
最好使用像 Bootstrap 这样的东西(它也需要 jQuery(:
https://jsfiddle.net/ryanpcmcquen/jpe70pLy/
html,
body,
.container {
height: 100%;
min-height: 100%;
}
.first {
float: left;
width: 20%;
height: 30%;
background-color: red;
}
.second {
float: left;
width: 20%;
height: 70%;
background-color: green;
}
.third {
float: right;
width: 80%;
height: 80%;
background-color: blue;
}
.fourth {
float: right;
width: 40%;
height: 20%;
background-color: #DDDDDD;
}
.last {
float: right;
width: 40%;
height: 20%;
background-color: yellow;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="first" data-toggle="modal" data-target="#myModal">
first
</div>
<div class="third">third</div>
<div class="second">second</div>
<div class="fourth">fourth</div>
<div class="last">last</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
Put a bunch of tiles here.
</div>
</div>
</div>
这将为您处理JavaScript,然后您可以编写一些干净的模态标记。有关如何使用引导模式的更多详细信息:
https://getbootstrap.com/javascript/#live-demo