像页面一样创建地铁UI

时间：2014-07-04 07:36:21

标签： php html css twitter-bootstrap-3

我想创建一个类似于Windows 8 metro UI的设计，就像在这个示例中的图像：

Example

这些跨度中的每一个都链接到我服务器上的一个子页面。磁贴的URL，内容和背景图像都是从MySQL数据库加载的，因此没有任何硬编码。我正在使用 Twitter Bootstrap 进行设计。

每个瓷砖有三种不同的尺寸：

  • large（ span 1 ）
  • medium（ span 7 ）
  • small（ span 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>";

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

2 个答案:

答案 0 :(得分：3)

经过更多研究后，我发现了一个能够完全实现我想要实现的引导框架。 Gerald Schneider suggested me使用 Metro Bootstrap ，根据我的测试，它不具备多线图块。

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

答案 1 :(得分：-1)

这可以使用Metro UI完成。 Metro UI实现将在下一节中逐步介绍。

第1步

从https://github.com/olton/Metro-UI-CSS下载Metro-UI-CSS-master zip文件。 解压缩此zip文件。提取后，将生成＆＃39; Metro-UI-CSS-master＆＃39;文件夹。

第2步

复制＆＃39; Metro-UI-CSS-master＆＃39;文件夹到所需目录。 我将其复制到我的项目文件夹的css文件夹中 我的项目文件夹：-C：\ xampp \ htdocs \ xampp \ doc \ 我的css文件夹：-C：\ xampp \ htdocs \ xampp \ doc \ user \ css

复制＆＃39; / Metro-UI-CSS-master＆＃39;进入css文件夹文件夹结构将如下所示。

C：/ XAMPP / htdocs中/ XAMPP / DOC /用户/ CSS /地铁-UI-CSS-主/

第3步

将Metro-UI框架链接到我们的html代码。 我将下面的代码复制到＆＃39; index.tpl＆＃39;。＆＃39; index.tpl＆＃39;放在文件夹中＆＃39; C：\ xampp \ htdocs \ xampp \ doc \ user \ html＆＃ 39;它起作用了。

<link href="css/Metro-UI-CSS-master/build/css/metro.css" rel="stylesheet">
<link href="css/Metro-UI-CSS-master/build/css/metro-icons.css" rel="stylesheet">
<script src="http://metroui.org.ua/js/jquery-2.1.3.min.js"></script>
<script src="css/Metro-UI-CSS-master/build/js/metro.js"></script>

或 

<link href="http://metroui.org.ua/css/metro.css" rel="stylesheet">
<link href="http://metroui.org.ua/css/metro-icons.css" rel="stylesheet">
<script src="http://metroui.org.ua/js/jquery-2.1.3.min.js"></script>
<script src="http://metroui.org.ua/js/metro.js"></script>

完整代码（实施地铁用户界面的示例代码）

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
<meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">
<link rel='shortcut icon' type='image/x-icon' href='../favicon.ico' />
<title>Sample Metro</title>
<link href="css/Metro-UI-CSS-master/build/css/metro.css" rel="stylesheet">
<link href="css/Metro-UI-CSS-master/build/css/metro-icons.css" rel="stylesheet">
<script src="http://metroui.org.ua/js/jquery-2.1.3.min.js"></script>
<script src="css/Metro-UI-CSS-master/build/js/metro.js"></script>
</head>
<body>
<h1>Hello world!</h1>
<div class="countdown" data-role="countdown" data-days="2"></div>
</body>
</html>
相关问题
最新问题