PHP与Bootstrap实现图片文本左右交替显示教程

DDD

发布时间：2025-11-17 13:29:38

400人浏览过

来源于php中文网

原创

PHP与Bootstrap实现图片文本左右交替显示教程

本教程将详细介绍如何结合php动态加载图片和文本内容，并利用bootstrap的栅格系统及其`order`类，实现图片与描述文本在网页中左右交替显示的布局效果。通过php遍历文件系统，配合bootstrap的响应式布局能力，您可以轻松构建出视觉吸引力强且结构灵活的图文展示页面。

1. 核心概念：动态内容与交替布局

在现代网页设计中，展示图片和相关描述文本是常见的需求。为了提升视觉吸引力，有时需要让图片和文本的左右位置在不同条目间交替出现。例如，第一张图片在左，文本在右；第二张图片在右，文本在左，以此类推。

实现这种效果，我们需要解决两个主要问题：

动态内容加载：从服务器上的指定文件夹读取图片文件和对应的文本文件。PHP作为服务器端脚本语言，非常适合处理文件系统操作。
布局控制：利用CSS框架（如Bootstrap）的强大功能，实现列的左右交替排列，同时保持响应式设计。

本教程将结合PHP的文件操作能力和Bootstrap的栅格系统，提供一个优雅的解决方案。

2. 准备工作：文件结构与Bootstrap引入

在开始编写代码之前，请确保您的项目具有以下基本结构和依赖：

立即学习“PHP免费学习笔记（深入）”；

2.1 文件结构

建议将图片和文本文件分别存放在不同的目录中，并使用统一的命名约定以便PHP进行匹配。例如：

your_project/
├── index.php
└── images/
    ├── images/
    │   ├── photo1.jpg
    │   ├── photo2.jpg
    │   └── ...
    └── text/
        ├── photo1.txt
        ├── photo2.txt
        └── ...

在这个结构中，photo1.jpg 对应 photo1.txt，以此类推。

2.2 引入Bootstrap

为了使用Bootstrap的栅格系统和order类，您需要在HTML文件的<head>部分引入Bootstrap的CSS文件。您可以从CDN引入，这是最快捷的方式：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片文本交替布局</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <style>
        /* 可选：为图片添加一些样式 */
        .img-fluid {
            max-width: 100%;
            height: auto;
            display: block; /* 避免图片下方出现额外空白 */
        }
        .row.my-4 {
            margin-top: 1.5rem !important;
            margin-bottom: 1.5rem !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- PHP生成的内容将在此处 -->
    </div>
    <!-- 引入Bootstrap JS (可选，如果不需要JS组件可以省略) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>

3. PHP动态加载与内容匹配

PHP的核心任务是读取指定目录下的所有图片和文本文件，并将它们配对。

CreateWise AI

为播客创作者设计的AI创作工具，AI自动去口癖、提交亮点和生成Show notes、标题等

下载

3.1 读取目录内容

使用 scandir() 函数可以获取目录中的所有文件和子目录。为了排除 . 和 .. 这两个特殊目录，可以使用 array_diff()。

<?php
$imageDir = "images/images/"; // 图片文件夹路径
$textDir = "images/text/";   // 文本文件夹路径

// 获取图片文件列表，排除 '.' 和 '..'
$images = array_diff(scandir($imageDir), array('.', '..'));
// 获取文本文件列表，排除 '.' 和 '..'
$texts = array_diff(scandir($textDir), array('.', '..'));

$items = []; // 用于存储配对后的图片和文本信息
?>

3.2 匹配图片与文本

假设图片文件和文本文件具有相同的基础文件名（例如 photo1.jpg 和 photo1.txt），我们可以通过遍历图片文件，然后尝试找到对应的文本文件来完成配对。

<?php
// ... (之前的代码)

foreach ($images as $imageName) {
    // 获取图片文件的基础名称（不包含扩展名）
    $baseName = pathinfo($imageName, PATHINFO_FILENAME);
    // 构造对应的文本文件名
    $textFile = $baseName . '.txt';

    // 检查是否存在对应的文本文件
    if (in_array($textFile, $texts)) {
        // 如果找到，将图片和文本的完整路径存储到 $items 数组中
        $items[] = [
            'image' => $imageDir . $imageName,
            'text' => $textDir . $textFile
        ];
    }
}
?>

4. Bootstrap实现交替布局

Bootstrap的栅格系统提供了强大的布局能力。在这里，我们将主要利用 row、col-md-6 和 order- 类。

row: 定义一个行容器。
col-md-6: 在中等（md）及以上屏幕尺寸上，将内容区域分为两列，每列占据一半宽度（6/12）。
order-1 和 order-2: 这些是Bootstrap的排序类。默认情况下，HTML中的元素会按照它们在DOM中的顺序显示。order-1 会让元素在同一行中排在第一个，order-2 会排在第二个。通过动态切换这两个类，我们就能实现左右交替显示的效果。

4.1 动态切换 order 类

在PHP循环中，我们可以使用一个计数器来判断当前是偶数次迭代还是奇数次迭代，从而决定图片和文本的 order 类。

偶数次迭代 (0, 2, 4...)：图片 order-1 (左)，文本 order-2 (右)。
奇数次迭代 (1, 3, 5...)：图片 order-2 (右)，文本 order-1 (左)。

<?php
// ... (之前的代码，包括 $items 数组的填充)

$counter = 0; // 初始化计数器
foreach ($items as $item) {
    // 根据计数器的奇偶性决定 order 类
    if ($counter % 2 == 0) {
        // 偶数：图片在左，文本在右
        $orderImage = 'order-md-1'; // 使用 order-md-* 确保在中等屏幕以上生效
        $orderText = 'order-md-2';
    } else {
        // 奇数：图片在右，文本在左
        $orderImage = 'order-md-2';
        $orderText = 'order-md-1';
    }

    // 输出HTML结构
    echo "<div class='row my-4 align-items-center'>"; // align-items-center 垂直居中对齐
    echo "  <div class='col-md-6 {$orderImage}'>";
    echo "    <img src='{$item['image']}' class='img-fluid' alt='{$baseName}'>";
    echo "  </div>";
    echo "  <div class='col-md-6 {$orderText}'>";
    // 读取文本文件内容并显示
    $textContent = file_get_contents($item['text']);
    echo "    <p>{$textContent}</p>";
    echo "  </div>";
    echo "</div>";

    $counter++; // 计数器递增
}
?>

注意：

我们使用了 order-md-1 和 order-md-2，这意味着在小屏幕（<md）上，列将恢复到其在HTML中的默认顺序（图片在上，文本在下），这通常是更好的移动端体验。
img-fluid 类确保图片在其父容器内响应式地缩放。
align-items-center 类用于垂直居中文本和图片，使布局更美观。
file_get_contents() 用于直接读取文本文件的内容，并将其包裹在 <p> 标签中显示。如果文本文件包含HTML，则直接输出即可。

5. 完整代码示例

将上述PHP逻辑整合到HTML文件中，通常是在 <body> 标签内的某个容器中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片文本交替布局教程</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <style>
        .img-fluid {
            max-width: 100%;
            height: auto;
            display: block;
        }
        .row.my-4 {
            margin-top: 1.5rem !important;
            margin-bottom: 1.5rem !important;
        }
        /* 可选：为文本内容添加一些样式 */
        .col-md-6 p {
            padding: 1rem;
            background-color: #f8f9fa;
            border-radius: .25rem;
            text-align: justify;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="my-5 text-center">动态图文交替展示</h1>

        <?php
        $imageDir = "images/images/"; // 图片文件夹路径，相对于index.php
        $textDir = "images/text/";   // 文本文件夹路径，相对于index.php

        // 检查目录是否存在
        if (!is_dir($imageDir) || !is_dir($textDir)) {
            echo "<div class='alert alert-danger' role='alert'>图片或文本目录不存在，请检查路径设置。</div>";
        } else {
            // 获取图片文件列表，排除 '.' 和 '..'
            $images = array_diff(scandir($imageDir), array('.', '..'));
            // 获取文本文件列表，排除 '.' 和 '..'
            $texts = array_diff(scandir($textDir), array('.', '..'));

            $items = []; // 用于存储配对后的图片和文本信息

            foreach ($images as $imageName) {
                $baseName = pathinfo($imageName, PATHINFO_FILENAME);
                $textFile = $baseName . '.txt';

                if (in_array($textFile, $texts)) {
                    $items[] = [
                        'image' => $imageDir . $imageName,
                        'text' => $textDir . $textFile,
                        'alt' => $baseName // 用于alt属性
                    ];
                }
            }

            $counter = 0; // 初始化计数器
            if (empty($items)) {
                echo "<div class='alert alert-warning' role='alert'>未找到匹配的图片和文本文件。</div>";
            } else {
                foreach ($items as $item) {
                    if ($counter % 2 == 0) {
                        // 偶数：图片在左，文本在右
                        $orderImage = 'order-md-1';
                        $orderText = 'order-md-2';
                    } else {
                        // 奇数：图片在右，文本在左
                        $orderImage = 'order-md-2';
                        $orderText = 'order-md-1';
                    }

                    echo "<div class='row my-4 align-items-center'>";
                    echo "  <div class='col-md-6 {$orderImage}'>";
                    echo "    <img src='{$item['image']}' class='img-fluid' alt='{$item['alt']}'>";
                    echo "  </div>";
                    echo "  <div class='col-md-6 {$orderText}'>";
                    // 检查文本文件是否存在且可读
                    if (file_exists($item['text']) && is_readable($item['text'])) {
                        $textContent = file_get_contents($item['text']);
                        echo "    <p>{$textContent}</p>";
                    } else {
                        echo "    <p class='text-danger'>文本文件 '{$item['text']}' 不存在或无法读取。</p>";
                    }
                    echo "  </div>";
                    echo "</div>";

                    $counter++;
                }
            }
        }
        ?>

    </div>

    <!-- 引入Bootstrap JS (可选) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>

6. 注意事项与优化

文件命名约定：确保图片和文本文件的基础名称一致是关键。不一致的命名会导致文件无法正确配对。
路径设置：PHP中的文件路径是相对于执行脚本的路径。请根据您的实际文件结构调整 $imageDir 和 $textDir。
错误处理：在示例代码中，我们添加了对目录和文件存在性及可读性的基本检查。在生产环境中，应实现更健壮的错误处理机制。
文本内容格式：如果文本文件包含HTML标签，file_get_contents() 会直接输出这些标签。如果希望对纯文本进行格式化（例如换行符转 <br>），可以使用 nl2br() 函数。如果需要过滤潜在的恶意HTML，应使用 strip_tags() 或更高级的HTML净化库。
性能考虑：对于包含大量文件（数千个）的目录，scandir() 和 file_get_contents() 可能会带来性能开销。在这种情况下，可以考虑将文件信息存储到数据库中，或者使用缓存机制。
响应式设计：Bootstrap的 col-md-6 和 order-md-* 类确保了在不同设备尺寸上的良好显示。在小屏幕上，内容会堆叠显示，图片在上，文本在下，这通常是最佳的移动体验。
可访问性：为 <img> 标签提供有意义的 alt 属性，有助于屏幕阅读器用户理解图片内容。

7. 总结

本教程详细展示了如何利用PHP进行文件系统操作来动态加载图片和文本，并结合Bootstrap的栅格系统和 order 类来实现图片与文本的左右交替布局。这种方法不仅实现了动态内容展示，还通过响应式设计确保了在各种设备上的良好用户体验。通过理解并应用这些技术，您可以灵活地创建各种复杂的、数据驱动的网页布局。

如何修复 AJAX 登录成功后 location.href 重定向失效的问题

php如何批量将图片文件夹导入并生成PPT索引页

如何在 Divi 中恢复被隐藏的全局页眉与页头

如何用 SVG 实现基于小数平均值的精准星级评分显示

如何恢复 Divi 主题中被隐藏的全局页眉与页脚