thinkphp6配置bootstrap ui 及模板替换输出

最新推荐文章于 2024-06-18 15:38:22 发布

班长胡一可

最新推荐文章于 2024-06-18 15:38:22 发布

阅读量1.3k

点赞数 1

分类专栏： thinkphp 文章标签： bootstrap ui 前端

本文链接：https://blog.csdn.net/qqMr75/article/details/120896727

版权

thinkphp 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

1.本次使用bootstrap ui做为测试对象，地址：起步 · Bootstrap v3 中文文档 | Bootstrap 中文网

下载后精简得以下内容，并将css/js/font放到public/static下

2.模板替换输出，在config/view.php 中添加模板替换代码：

//模板替换输出
    'tpl_replace_string'  =>  [
        '__STATIC__'=>'/static',
        '__JS__' => '/static/js',
        '__CSS__' => '/static/css',
    ],

3.在index控制器index中添加test方法测试bootsrtap样式引入

use think\Facade\View;//引入View门面

public function test()//添加测试方法
    {
        return View::fetch('test');
    }

在地址栏输入：localhost/index.php/index/test，结果报错：是因为没有模板驱动

4.命令提示符安装模板驱动，也叫安装模板引擎

composer require topthink/think-view

安装成功后刷新网页或重新访问：localhost/index.php/index/test

出现新报错，是因为我们test方法返回test模板，但是我们模板文件没有建

5.在根目录view中建新index文件夹，然后新建test.html文件

成功访问

6.编辑test.html页面内容，并引用bootstrap样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是test测试页</title>
    <!-- 引入bootstrap样式表 -->
    {css href="__CSS__/bootstrap.min.css"}
    <!-- 引用自定义模式表 -->
    {css href="__CSS__/style.css"}
</head>
<body>
 
    
    <!-- 引入bootstrap ,因为bootstrap基于jquery，所以jquery必须在bootstrap前面引入-->
    {js href="__JS__/jquery-3.6.0.min.js"}
    {js href="__JS__/bootstrap.min.js"}
    
</body>
</html>

在前端页面可以访问到引用文件，所以说明我们模板替换已经成功！7.利用bootsrtap样式编辑页面试试效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是test测试页</title>
    <!-- 引入bootstrap样式表 -->
    {css href="__CSS__/bootstrap.min.css"}
    <!-- 引用自定义模式表 -->
    {css href="__CSS__/style.css"}
</head>
<body>
    <div class="container">
        <!-- 标准的按钮 -->
        <button type="button" class="btn btn-default">默认按钮</button>
        <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
        <button type="button" class="btn btn-primary">原始按钮</button>
        <!-- 表示一个成功的或积极的动作 -->
        <button type="button" class="btn btn-success">成功按钮</button>
        <!-- 信息警告消息的上下文按钮 -->
        <button type="button" class="btn btn-info">信息按钮</button>
        <!-- 表示应谨慎采取的动作 -->
        <button type="button" class="btn btn-warning">警告按钮</button>
        <!-- 表示一个危险的或潜在的负面动作 -->
        <button type="button" class="btn btn-danger">危险按钮</button>
        <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
        <button type="button" class="btn btn-link">链接按钮</button>

    </div>
 
    
    <!-- 引入bootstrap ,因为bootstrap基于jquery，所以jquery必须在bootstrap前面引入-->
    {js href="__JS__/jquery-3.6.0.min.js"}
    {js href="__JS__/bootstrap.min.js"}
    
</body>
</html>

神奇的一幕出现！！！

班长胡一可

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
thinkphp6配置bootstrap ui 及模板替换输出

1.本次使用bootstrap ui做为测试对象，地址：起步 · Bootstrap v3 中文文档 | Bootstrap 中文网下载后精简得以下内容，并将css/js/font放到public/static下2.模板替换输出，在config/view.php中添加模板替换代码：//模板替换输出 'tpl_replace_string' => [ '__STATIC__'=>'/static', '__JS__' => '..
复制链接

扫一扫

专栏目录