使用 Twitter Bootstrap 构建屏幕截图库答案

【问题标题】：Building a ScreenShot Gallery with Twitter Bootstrap使用 Twitter Bootstrap 构建屏幕截图库
【发布时间】：2013-07-14 06:09:00
【问题描述】：

我目前正在尝试构建屏幕截图库。我已经完成了第一步，即让用户可以将图像上传到 mysql 数据库。

这就是将画廊的图像提供给画廊脚本的方式。不幸的是，我花了几个月的时间来完善我将各种东西放入数据库的能力，但没有太多时间来研究如何从数据库中取出它们并以用户友好的格式显示。

Twitter Bootstrap 流体网格系统
Twitter Bootstrap 利用流体网格系统来显示数据。您不必使用它，但它可以提供更好看的布局。现在截图库需要显示多行图像，每行 4 列宽。现在这是踢球者，这是每一行的结构。

http://pastebin.com/HvBK5rTC

我需要一遍又一遍地生成该行。但我需要填充它的图像在 4 处停止，回显适当的关闭 div，回显另一行的开始 div，然后再回显四个图像，等等。

我没有任何代码，因为我不知道从哪里开始。如果你能帮助我开始，我可以提供你需要的任何东西。

编辑这是我到目前为止想出的，但我不知道如何关闭<div class="row-fluid">并打开一个新的。

http://pastebin.com/EADji2eh

【问题讨论】：

标签： php mysql twitter-bootstrap screenshot

【解决方案1】：

你几乎在那里。 mysql_* fn 已弃用，您应该使用 PDO 等。

您可以通过添加一个外部循环来进行流量控制，并使用您已经拥有的作为内部循环来做您需要的事情。结果数组，它将自动为您遍历结果集，而无需跟踪限制等的偏移量。

build_gallery_fn.php：

function image_from_database() {
            // use a running counter for flow control of the outer loop
        $runningcount = 0;

        $r = mysql_query("SELECT DISTINCT logo AS `img` FROM NewsArticles WHERE logo IS NOT NULL AND logo !='';");

            //Get # of images in results to use as upper limit for outer loop
        $img_ct = mysql_num_rows($r);

        while ($runningcount <= $img_ct){

                    //rowcount reset to break content blocks
            $rowcount = 0;


            echo "<div class=\"row-fluid\">";

            $runningcount++;

                    while(($rowcount <= 3) && $row = mysql_fetch_assoc($r))
            {
                    $rowcount++; 
                    $img = $row['img'];
                    echo '<div class="span2">';
                    echo "<span class='thumbnail'><img src='attachments/logos/$img'/> Photo # $runningcount of $img_ct</span>";
                    echo '</div>';
            }
            echo "</div>";

        }
}

输出支架：

<div class="container">
    <h1 class="text-center">The American Pacific Group ScreenShot Gallery</h1>
    <hr>

            <?php
                    echo image_from_database();
            ?>

</div>

【讨论】：