本教程详细讲解如何结合PHP后端逻辑和Bootstrap前端框架，实现图片与文本内容的动态交替布局。通过PHP扫描目录获取文件，并利用计数器配合Bootstrap的order-类，实现每行内容中图片和文本列的左右顺序自动切换，从而创建更具视觉吸引力的网格展示效果。
引言
在网页设计中，为了提升视觉效果和用户体验，我们经常需要以非对称或交替的方式展示内容。一个常见的需求是，在一个图片和文本并列的布局中，让文本内容在左侧或右侧交替出现。本教程将指导您如何利用PHP动态读取图片和文本文件，并结合Bootstrap的强大网格系统，实现这种灵活的交替布局。
核心原理：Bootstrap列排序
Bootstrap是一个流行的前端框架，其网格系统提供了强大的布局能力。其中，order- 类是实现列顺序动态调整的关键。
- order-1, order-2, ..., order-12: 这些类用于控制在一个Flex容器（如Bootstrap的.row）中子项（如.col-*）的视觉顺序。数字越小，其在容器中的显示位置越靠前。
- 默认行为: 如果不指定 order- 类，列将按照它们在HTML中出现的顺序显示。
- 交替实现: 我们可以为两列（例如，一列图片，一列文本）分别设置 order-1 和 order-2。通过在不同行中互换这两个类，即可实现内容的左右交替显示。
例如，对于两列布局：
立即学习“PHP免费学习笔记（深入）”；
- 左图右文: 图片列使用 order-1，文本列使用 order-2。
- 左文右图: 文本列使用 order-1，图片列使用 order-2。
PHP动态生成逻辑
要实现动态交替布局，PHP需要完成以下任务：
- 扫描目录: 读取指定文件夹中的所有图片文件和文本文件。
- 文件配对: 将图片文件与对应的文本文件进行匹配。通常，这需要依赖于一致的文件命名约定（例如，image1.jpg 对应 text1.txt）。
- 动态生成HTML: 在循环中，根据当前内容的索引或计数器，动态地为图片和文本列分配 order-1 或 order-2 类。
- 读取文本内容: 直接从文本文件中读取内容，而不是使用
实现步骤与代码示例
1. 准备工作：文件结构与Bootstrap引入
首先，确保您的项目具有以下文件结构：
your-project/
├── index.php
└── images/
├── images/
│ ├── photo1.jpg
│ ├── photo2.jpg
│ └── ...
└── text/
├── text1.txt
├── text2.txt
└── ...在 index.php 或您的主HTML文件中，确保已引入Bootstrap CSS：
动态交替布局示例
图片与文本动态交替展示
2. PHP代码实现
以下PHP代码将负责扫描目录、配对文件并生成带有交替排序的HTML结构。
@@##@@
{$current_text_file}
{$text_content}
