当前位置：首页 > news >正文

IntraWeb 16.0.2 + Bootstrap 4 居中布局实战（附源码+效果图）

news 来源：原创 2025/5/18 8:07:05

前言

最近在优化一个 IntraWeb 16.0.2 项目时，发现默认布局方式不够灵活，尤其是在不同屏幕尺寸下对齐效果不佳。于是，我决定引入 Bootstrap 4 来实现 完美居中布局，并成功落地！今天就把完整的 源代码 + 实际效果图 分享给大家，希望能帮助到同样遇到这个问题的开发者。

问题背景

IntraWeb 作为 Delphi 的 Web 开发框架，虽然开发效率高，但默认的页面布局方式有时难以满足现代化 UI 需求。特别是在需要 居中布局 时，单纯使用 IntraWeb 控件可能会遇到对齐偏差、响应式适配不佳等问题。而 Bootstrap 4 的网格系统（Grid System）恰好能完美解决这个问题！

解决方案（附完整代码）

1. 引入 Bootstrap 4

在 ServerController 的 OnConfig 事件中添加 Bootstrap 4 的 CDN 引用：

procedure TIWServerController.IWServerControllerBaseConfig(Sender: TObject);
begin
// 引入 Bootstrap 4
AddToInitProc('document.head.innerHTML += ''<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">'';');
AddToInitProc('document.head.innerHTML += ''<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>'';');
end;

2. 使用 Bootstrap 实现居中布局

在 TIWForm 上放置一个 TIWRegion，设置 HTMLTag 为 div，并利用 Bootstrap 的 container + row justify-content-center 实现完美居中：

procedure TIWForm1.IWAppFormCreate(Sender: TObject);
begin
IWRegion1.HTMLTag := 'div';
IWRegion1.RawText := True;
IWRegion1.Text :=
'<div class="container">' +
' <div class="row justify-content-center">' +
' <div class="col-md-8">' +
' <h1>IntraWeb + Bootstrap 4 居中布局</h1>' +
' <p>这是一段示例文本，使用 Bootstrap 4 的网格系统实现完美居中！</p>' +
' </div>' +
' </div>' +
'</div>';
end;