ThinkPHP如何整合Bootstrap框架

梦杰姑娘_8841

梦杰姑娘_8841

2026-05-19

496人浏览

原创

thinkphp整合bootstrap核心是静态资源正确加载和分页套用bootstrap结构:推荐用composer require twbs/bootstrap安装,通过/vendor/twbs/bootstrap/dist/css/bootstrap.min.css等路径在layout模板中引入;tp6直接配置'type' => 'bootstrap'启用内置分页驱动,无需修改源码。

thinkphp如何整合bootstrap框架

ThinkPHP 整合 Bootstrap 不需要魔改框架或写一堆胶水代码,核心就两件事:静态资源能正确加载,分页等内置组件能套上 Bootstrap 的 HTML 结构。其他都是路径、配置和细节问题。

Bootstrap 怎么引入到 ThinkPHP 项目里

推荐用 composer require twbs/bootstrap 安装,文件会落到 vendor/twbs/bootstrap 目录下。相比手动下载或 CDN,这种方式版本可控、升级方便,也避免了线上环境因网络波动导致 JS/CSS 加载失败。

在公共模板(比如 app/view/layout.html)里引用:

<link rel="stylesheet" href="/vendor/twbs/bootstrap/dist/css/bootstrap.min.css"><script src="/vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

注意两点:

  • 路径必须以 /vendor/... 开头,确保是 Web 根目录可访问的静态路径,不是 PHP 的 include 路径
  • bootstrap.bundle.min.js 已含 Popper,不用额外引入;如果只用 CSS 或纯工具类,可以只引 CSS
  • 别在控制器里用 vendor/autoload.php 去加载 Bootstrap —— 那是给 PHP 类用的,不是给浏览器用的

ThinkPHP 分页怎么套 Bootstrap 的 ul/li 结构

ThinkPHP 自带的 Page 类默认输出的是 div 包裹一堆 a,而 Bootstrap 分页要求是 <ul class="pagination"><li><a>...</a></li></ul>。直接改 Page 类最省事,不用重写整个分页逻辑。

修改 thinkphp/library/think/pagination/bootstrap.php(TP6)或 Library/Think/Page.class.php(TP3/5)里的生成逻辑:

btpanel phpsite 宝塔面板PHP网站
btpanel phpsite 宝塔面板PHP网站

宝塔面板 PHP 网站管理:站点创建、删除、启停、PHP 版本切换、域名管理、SSL证书管理、伪静态管理、数据库管理

下载
  • 把每个 <a ...></a> 前后加上 <li> 和
  • ,包括首页、上一页、数字页、下一页、尾页,还有当前页的 <span class="active"></span>
  • 把最终的 return 改成:return '<ul class="pagination">' . $page_str . '</ul>';
  • TP6 用户注意:think\paginator\driver\Bootstrap 驱动已内置支持,只需在配置中设 'type' => 'bootstrap',无需手改源码

模板里直接 {$page|raw} 渲染即可,不用再包一层 <div>。 <h3>U 函数生成的 URL 前面多了一个点号(<code>./Admin/xxx)怎么办

这不是 ThinkPHP 的 bug,而是 Nginx 的 fastcgi_script_name 配置导致的。当请求路径被重写时,ThinkPHP 的 U() 函数会误判当前脚本位置,从而拼出带 . 的相对路径。

解决方法是调整 Nginx 配置,关键两行:

fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;

同时确保没有类似 set $real_script_name $fastcgi_script_name; 这种覆盖行为。改完 reload Nginx,U('Admin/index') 就会输出 /Admin/index 而不是 ./Admin/index。

临时绕过也可在模板里用 url()(TP6)或硬编码路径,但治标不治本 —— 根子在服务器配置。

真正容易被忽略的是:Bootstrap 的 JS 组件(如 Modal、Dropdown)依赖于 DOM 就绪后初始化,而 ThinkPHP 模板是服务端渲染的。如果你在模板里直接写 <button data-bs-toggle="modal"></button> 却没加载 JS 或 JS 加载顺序错乱,功能就静默失效。检查浏览器控制台有没有 Bootstrap's JavaScript requires Popper 这类报错,比调样式更优先。

php免费学习视频:立即使用
踏上前端学习之旅,开启通往精通之路!从前端基础到项目实战,循序渐进,一步一个脚印,迈向巅峰!

相关文章

PHP速学教程(入门到精通)
PHP速学教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

thinkphp php bootstrap

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
php文件怎么打开
php文件怎么打开

打开php文件步骤:1、选择文本编辑器;2、在选择的文本编辑器中,创建一个新的文件,并将其保存为.php文件;3、在创建的PHP文件中,编写PHP代码;4、要在本地计算机上运行PHP文件,需要设置一个服务器环境;5、安装服务器环境后,需要将PHP文件放入服务器目录中;6、一旦将PHP文件放入服务器目录中,就可以通过浏览器来运行它。

2023.09.01

9684

6

php怎么取出数组的前几个元素
php怎么取出数组的前几个元素

取出php数组的前几个元素的方法有使用array_slice()函数、使用array_splice()函数、使用循环遍历、使用array_slice()函数和array_values()函数等。本专题为大家提供php数组相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.11

5801

5

php反序列化失败怎么办
php反序列化失败怎么办

php反序列化失败的解决办法检查序列化数据。检查类定义、检查错误日志、更新PHP版本和应用安全措施等。本专题为大家提供php反序列化相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.11

2055

5

php怎么连接mssql数据库
php怎么连接mssql数据库

连接方法:1、通过mssql_系列函数;2、通过sqlsrv_系列函数;3、通过odbc方式连接;4、通过PDO方式;5、通过COM方式连接。想了解php怎么连接mssql数据库的详细内容,可以访问下面的文章。

2023.10.23

3628

4

php连接mssql数据库的方法
php连接mssql数据库的方法

php连接mssql数据库的方法有使用PHP的MSSQL扩展、使用PDO等。想了解更多php连接mssql数据库相关内容,可以阅读本专题下面的文章。

2023.10.23

4314

6

html怎么上传
html怎么上传

html通过使用HTML表单、JavaScript和PHP上传。更多关于html的问题详细请看本专题下面的文章。php中文网欢迎大家前来学习。

2023.11.03

3371

9

PHP出现乱码怎么解决
PHP出现乱码怎么解决

PHP出现乱码可以通过修改PHP文件头部的字符编码设置、检查PHP文件的编码格式、检查数据库连接设置和检查HTML页面的字符编码设置来解决。更多关于php乱码的问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2023.11.09

4817

8

php文件怎么在手机上打开
php文件怎么在手机上打开

php文件在手机上打开需要在手机上搭建一个能够运行php的服务器环境,并将php文件上传到服务器上。再在手机上的浏览器中输入服务器的IP地址或域名,加上php文件的路径,即可打开php文件并查看其内容。更多关于php相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2023.11.13

3762

8

sprintf函数用法详解
sprintf函数用法详解

sprintf函数的用法:1、格式化字符串;2、指定输出宽度和精度;3、返回值。更多关于sprintf函数用法详解的内容,大家可以阅读下面的文章。

2023.11.27

11762

4

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程