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>
神奇的一幕出现!!!