I would like to create a design similar to the UI interface for Windows 8, as in this example:
Each of these spaces refers to one subpage on my server. The URLs, contents, and background images of the fragments are downloaded from the MySQL database, so nothing is hardcoded. I use Twitter Bootstrap for design purposes.
There are three different sizes for each tile:
- large (span 1)
- medium (span 7)
- small (span 2)
I can easily deal with medium and small plates, since each of them covers only one row. small tiles have a class col-md-3, large and medium tiles use col-md-6. I can come up with the required markup for such a design:
<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 += $thisWidth;
if ($width > 12) {
echo "</div><div class='row'>";
$width = 0;
}
echo "<div class='col-md-$thisWidth size-$size'>";
echo $name;
echo "</div>";
}
echo "</div>";
. , . , - , - , .