【发布时间】：2014-08-25 11:31:53
【问题描述】：
我想创建一个类似于 Windows 8 Metro UI 的设计，如下图所示：
这些跨度中的每一个都链接到我服务器上的一个子页面。磁贴的 URL、内容和背景图像都是从 MySQL 数据库加载的，因此没有任何内容是硬编码的。我正在使用 Twitter Bootstrap 进行设计。
每个图块有三种不同的可能尺寸：
- 大（跨度 1）
- 中等（跨度 7）
- 小（跨度 2）
我可以轻松处理中小型瓷砖，因为它们中的每一个都只跨越一排。小瓷砖使用col-md-3，大中瓷砖使用col-md-6。我可以想到这样的设计所需的标记：
<div class='row'>
<span class='size-large col-md-6'>span 1</span>
<span>
<span class='row'>
<span class='size-small col-md-3'>span 2</span>
<span class='size-small col-md-3'>span 3</span>
</span>
<span class='row'>
<span class='size-small col-md-3'>span 4</span>
<span class='size-small col-md-3'>span 5</span>
</span>
</span>
</div>
<div class='row'>
<span class='size-small col-md-3'>span 6</span>
<span class='size-medium col-md-6'>span 7</span>
<span class='size-small col-md-3'>span 8</span>
</div>
<div class='row'>
<span class='row'>
<span class='size-medium col-md-6'>span 9</span>
</span>
<span>
<span class='size-small col-md-3'>span 11</span>
<span class='size-small col-md-3'>span 12</span>
</span>
<span class='size-large col-md-6'>span 10</span>
</div>
到目前为止，一切都很容易理解。但这里开始困难的部分：从数据库加载磁贴数据后动态创建标记。
这些是我拥有的值：$size、$name、$description、$background。
我是从这个开始的：
$width = 0;
echo "<div class='row'>";
foreach (Project::getAllTiles() as $i => $project) {
$thisWidth = 0;
list($size, $name, $description, $image) =
array($project['size'], $project['name'], $project['description'], $project['background']);
$thisWidth = $size == 'small' ? 3 : 6; // Width of this tile
$width += $thisWidth; // Width of current row
if ($width > 12) {
echo "</div><div class='row'>"; // Jump to next row
$width = 0; // Reset width of row
}
echo "<div class='col-md-$thisWidth size-$size'>";
echo $name; // Placeholder
echo "</div>";
}
echo "</div>";
这适用于中小型瓷砖。但是，我无法想象一种简单的方法来处理跨越两行的大瓷砖。我希望有人能给我一些关于如何做到这一点或一些 sn-ps 的提示，以便我自己尝试一下。
【问题讨论】：
-
你真的想重新发明轮子吗？ talkslab.github.io/metro-bootstrap/components.html
-
@GeraldSchneider 我知道那里有可用的 Metro 框架，但是我还没有看到其中任何一个适用于多行图块
标签： php html css twitter-bootstrap-3