PHP与Bootstrap实现图片文本左右交替显示教程
在网站开发中，图文交替布局是一种常见的展示形式，能够有效提升内容的可读性与视觉美感。本文将结合PHP和Bootstrap框架，演示如何实现图片与文字在左右两侧交替显示的效果，适用于博客列表、产品展示、案例介绍等场景。
准备工作
- 确保服务器环境支持PHP（推荐PHP 7.0及以上版本）。
- 引入Bootstrap框架（可以通过CDN方式引用，也可以下载到本地）。
- 准备一组图片和对应的文本数据（本文使用PHP数组模拟数据库查询结果）。
HTML结构设计
利用Bootstrap的网格系统，每一行分为两列（col-md-6），分别放置图片和文本。通过控制图片列在左或右来实现交替。我们可以在外层包裹一个容器（container），每一对图文作为一个行（row）。
基础HTML结构如下：
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<img src="img1.jpg" class="img-fluid" alt="描述">
</div>
<div class="col-md-6">
<h3>标题</h3>
<p>文字内容...</p>
</div>
</div>
</div>为了实现交替，第二行需要将图片列放到右边，文本列放到左边。有多种实现方式：
- 使用Bootstrap的
order类（如 order-md-last） - 在PHP输出时根据奇偶行改变列的顺序
- 使用Flexbox的
flex-row-reverse类
本文采用PHP控制CSS类的方法，在循环中根据索引是否为偶数来决定是否添加 flex-row-reverse 类。
PHP数据准备
假设我们有一个包含多个项目的数组，每个项目包含图片路径、标题、描述等信息。代码如下：
<?php
$items = [
[
'img' => 'images/pic1.jpg',
'title' => '项目一',
'desc' => '这是第一个项目的详细描述，包含丰富的功能与界面设计。'
],
[
'img' => 'images/pic2.jpg',
'title' => '项目二',
'desc' => '项目二采用了全新的技术栈，性能提升明显。'
],
[
'img' => 'images/pic3.jpg',
'title' => '项目三',
'desc' => '项目三专注于用户体验，界面简洁直观。'
],
[
'img' => 'images/pic4.jpg',
'title' => '项目四',
'desc' => '项目四集成多种第三方服务，扩展性强。'
]
];
?>核心实现：左右交替逻辑
在PHP循环中，我们定义一个变量 $index 记录当前是第几行（从0开始）。当 $index % 2 == 0 时，图片在左，文本在右；否则图片在右，文本在左。Bootstrap的 flex-row-reverse 类可以让Flex容器内的项目反转顺序。因此，我们为奇数行（index为1,3,5...）的 row 添加该类，实现交替。
具体实现如下：
<?php
$index = 0;
foreach ($items as $item):
$reverseClass = ($index % 2 == 0) ? '' : 'flex-row-reverse';
?>
<div class="row align-items-center <?php echo $reverseClass; ?>" style="margin-bottom: 40px;">
<div class="col-md-6">
<img src="<?php echo $item['img']; ?>" class="img-fluid" alt="<?php echo $item['title']; ?>">
</div>
<div class="col-md-6">
<h3><?php echo $item['title']; ?></h3>
<p><?php echo $item['desc']; ?></p>
</div>
</div>
<?php
$index++;
endforeach;
?>完整代码示例
下面提供一个完整的PHP文件，包含数据定义、HTML结构和样式，可直接运行。注意图片路径需根据实际情况调整。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图文交替展示 - Bootstrap + PHP</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<style>
.row {
margin-bottom: 40px;
}
.row img {
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.row h3 {
color: #2c3e50;
margin-bottom: 15px;
}
.row p {
color: #555;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container py-5">
<h1 class="text-center mb-5">项目展示</h1>
<?php
$items = [
[
'img' => 'images/pic1.jpg',
'title' => '项目一',
'desc' => '这是第一个项目的详细描述，包含丰富的功能与界面设计。'
],
[
'img' => 'images/pic2.jpg',
'title' => '项目二',
'desc' => '项目二采用了全新的技术栈，性能提升明显。'
],
[
'img' => 'images/pic3.jpg',
'title' => '项目三',
'desc' => '项目三专注于用户体验，界面简洁直观。'
],
[
'img' => 'images/pic4.jpg',
'title' => '项目四',
'desc' => '项目四集成多种第三方服务，扩展性强。'
]
];
$index = 0;
foreach ($items as $item):
$reverseClass = ($index % 2 == 0) ? '' : 'flex-row-reverse';
?>
<div class="row align-items-center <?php echo $reverseClass; ?>">
<div class="col-md-6">
<img src="<?php echo $item['img']; ?>" class="img-fluid" alt="<?php echo $item['title']; ?>">
</div>
<div class="col-md-6">
<h3><?php echo $item['title']; ?></h3>
<p><?php echo $item['desc']; ?></p>
</div>
</div>
<?php
$index++;
endforeach;
?>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>样式定制与注意事项
上述代码中的Bootstrap CDN地址使用了BootCDN，您也可以替换为官方CDN或其他镜像。在移动设备上，Bootstrap的网格会自动堆叠，无需额外处理。您可以为图片添加阴影、圆角等CSS修饰，如示例中的style块所示。
如果需要从数据库获取数据，只需将 $items 数组替换为数据库查询结果即可。另外，如果图片路径使用相对路径，请确保文件位置正确。
通过本教程，您已经掌握了利用PHP和Bootstrap实现图片文本左右交替显示的核心方法。这种布局在博客、案例展示、产品介绍等场景中非常实用，且易于扩展和维护。