php – 创建像页面一样的城域用户界面

2023年11月24日 189次阅读

我想创建一个类似于
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>

到目前为止,一切都很容易理解.但是这里开始了困难的部分：从数据库加载tile数据后动态创建标记.

这些是我拥有的值：$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>";

这适用于中小型瓷砖.但是我无法想象一种简单的方法来处理跨越两行的大型瓷砖.我希望有人可以给我一些关于如何做这个或一些片段的提示,这样我就可以自己尝试一下.

最佳答案 经过更多的研究,我发现了一个能够完全实现我想要实现的引导框架. Gerald Schneider
suggested me使用Metro Bootstrap,根据我的测试,它不能真正具备多线瓷砖.

但是,Metro UI是(working demo).我仍然无法弄清楚如何通过PHP动态创建这个标记,所以我将使用更简单的已存在的Metro UI.

点赞