Typecho 与 Bootstrap 集成需手动注入资源并适配模板：在 header.php 引入本地 Bootstrap CSS/JS，index.php 用 Bootstrap 栅格重构文章列表，post.php 为表单和评论添加对应 class 并处理嵌套结构。
Bootstrap 和 Typecho 不是直接兼容的框架与 CMS 组合——Typecho 是 PHP 博客系统，Bootstrap 是前端 CSS/JS 框架，集成的关键不是“装插件”，而是**手动把 Bootstrap 的资源注入到 Typecho 主题中，并调整模板结构适配其 PHP 渲染逻辑**。
怎么加载 Bootstrap 的 CSS 和 JS
Typecho 主题靠 header.php 输出页面头部，所有外部资源都得在这里加。别用 CDN 加载后就不管：Typecho 默认会输出 jQuery，而 Bootstrap 5 已移除对 jQuery 的依赖，但 Bootstrap 4 仍需要；如果你用的是 Bootstrap 5，必须确认 Typecho 主题没强制引入旧版 jQuery 冲突。
- 推荐把
bootstrap.min.css和bootstrap.bundle.min.js下载后放进主题目录的static/子目录（如usr/themes/your-theme/static/css/bootstrap.min.css） - 在
header.php的前插入：<link rel="stylesheet" href="<?php $this->themeUrl('static/css/bootstrap.min.css'); ?>"> <script src="<?php $this->themeUrl('static/js/bootstrap.bundle.min.js'); ?>"></script> - 避免在
footer.php重复加载 jQuery——查一下主题里有没有$this->widget('Widget_Archive')->header()调用，它可能已输出 jQuery；如有，且你用 Bootstrap 4，需确保 jQuery 版本 ≥ 3.5.1
怎么改 index.php 让文章列表用 Bootstrap 栅格
Typecho 的 index.php 控制首页结构，原生写法是纯语义 HTML + PHP 循环，要套 Bootstrap 栅格就得重写容器和循环块。别直接套 container 就完事——Typecho 分页、分类、归档等上下文变量（如 $this->is('archive')）会影响 DOM 结构层级，硬套 class 容易导致响应式断点失效。
- 把原始的
<div class="content"> 替换为：<pre class="brush:php;toolbar:false;"><div class="container"> <div class="row"> <main class="col-lg-8"> <?php while($this->next()): ?> <article class="card mb-4"> <div class="card-body"> <h2 class="h4"><a href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h2> <p class="text-muted"><?php $this->date('Y-m-d') ?></p> <div class="excerpt"><?php $this->excerpt(200) ?></div> </div> </article> <?php endwhile; ?> <?php $this->pageNav('&laquo;', '&raquo;'); ?> </main> <aside class="col-lg-4"> <?php $this->widget('Widget_Contents_Post_Recent', 'pageSize=5')->to($recent); ?> <div class="card"> <div class="card-header">最新文章</div> <div class="list-group list-group-flush"> <?php while($recent->next()): ?> <a href="<?php $recent->permalink() ?>" class="list-group-item list-group-item-action"><?php $recent->title() ?></a> <?php endwhile; ?> </div> </div> </aside> </div> </div></pre> <li>注意 <code>col-lg-8/col-lg-4仅在大屏生效，小屏自动堆叠；如果侧边栏在移动端不需要，可加d-none d-lg-block类隐藏 -
$this->pageNav()输出的分页 HTML 默认无 class，需用 CSS 补全或配合 Bootstrap 分页组件重写PageNav.php模板 - 找到
post.php中评论表单部分，在<form method="post" action="<?php%20%24this->commentUrl()%20?>"></form>后加class="needs-validation"，并给每个<input>加class="form-control"，<textarea></textarea>加class="form-control"和rows="5" - 评论列表循环前，手动包裹
<div class="comment-list">，每条评论用 <code><div class="media mb-3"> 开头，头像用 <code><img class="mr-3 rounded-circle" style="max-width:90%" style="max-width:90%" alt="怎么在Bootstrap中集成Typecho博客模版" >，正文用<div class="media-body"> <li>特别注意：Typecho 的 <code>$comments->levels控制嵌套层数，Bootstrap 的media不支持无限嵌套，建议限制maxDepth为 3，否则缩进错位
为什么 post.php 的评论区总样式错乱
Typecho 自带评论表单使用原生 <form></form> 和 <input>，Bootstrap 要生效必须给每个表单控件加对应 class，且 textarea 需要 form-control + rows 属性，否则高度塌陷。更麻烦的是，Typecho 的评论回调函数（如 $comments->listComments()）输出的嵌套 HTML 结构不带任何 class，全靠你自己补。
真正卡住人的往往不是“怎么加 Bootstrap”，而是 Typecho 模板里那些隐式依赖——比如某个主题函数悄悄输出了 <div id="main">，你再套一层 <code>container 就导致 margin 叠加；或者 functions.php 里用 addHeaderCode 注入了冲突的 CSS。动手前先用浏览器开发者工具看实际渲染出的 DOM 结构，比对着文档猜要快得多。
