本教程将详细介绍如何结合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文件的
部分引入Bootstrap的CSS文件。您可以从CDN引入，这是最快捷的方式：
图片文本交替布局
3. PHP动态加载与内容匹配
PHP的核心任务是读取指定目录下的所有图片和文本文件，并将它们配对。
3.1 读取目录内容
使用 scandir() 函数可以获取目录中的所有文件和子目录。为了排除 . 和 .. 这两个特殊目录，可以使用 array_diff()。
3.2 匹配图片与文本
假设图片文件和文本文件具有相同的基础文件名（例如 photo1.jpg 和 photo1.txt），我们可以通过遍历图片文件，然后尝试找到对应的文本文件来完成配对。
$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 (左)。
"; // align-items-center 垂直居中对齐
echo " ";
echo " @@##@@";
echo " ";
echo " ";
// 读取文本文件内容并显示
$textContent = file_get_contents($item['text']);
echo " {$textContent}
";
echo " ";
echo "
