模板是我去年制作的，我看有很多人喜欢就发出来供大家学习吧。
去bootstrap官网下载css和js文件放到public/static文件夹
演示看：https://host.tg/
代码看下面：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.8.6">
<title>{$Think.const.WEB_NAME} - 专业提供香港高防</title>
<meta name="keywords" content="{$Think.const.WEB_KEY}">
<meta name="description" content="{$Think.const.WEB_DES}">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="__STATIC__/HorseSword/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<div class="my-0 mr-md-auto font-weight-normal"><img src="{$Think.const.WEB_LOGO}" alt="" width="300" height="100"></div>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="/">平台首页</a>
<a class="p-2 text-dark" href="/user/support.html">提交工单</a>
<a class="p-2 text-dark" href="http://wpa.qq.com/msgrd?v=3&uin={$Think.const.WEB_QQ}&site=qq&menu=yes">在线客服</a>
</nav>
{if condition="$UserInfo"}
<a class="btn btn-outline-primary" href="{:url('user/index/index')}">已登陆，前往用户中心</a>
{else /}
<label class="form-inline" />
<a class="btn btn-outline-primary" href="{:url('user/login/index')}">用户登陆</a> <a class="btn btn-outline-primary" href="{:url('user/register/index')}">立即注册</a>
</label>
{/if}
</div>
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<p class="lead">我们提供7天内无理由全额退款服务</p>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
{volist name="hostList" id="host"}
{if $host.hot==1}
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h5 class="my-0 font-weight-normal">{$host.name}</h5>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">{$host.money} <small class="text-muted">/{switch name="host.btime" }{case value="year"}年{/case}{case value="month"}月{/case}{case value="day"}天{/case}{/switch}</small></h1>
<ul class="list-unstyled mt-3 mb-4">
{:htmlspecialchars_decode($host.describe)}
</ul>
<a href="{:url('user/shop/buy',['wid'=>$host.wid])}" class="btn btn-lg btn-block btn-outline-primary">立即购买</a>
</div>
</div>
{/if}
{/volist}
</div>
<center>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="/favicon.ico" alt="" width="24" height="24">
<small class="d-block mb-3 text-muted">© 2019 - {:date('Y',time())}</small>
</div>
<div class="col-4 col-md">
<h5>友情链接</h5>
<ul class="list-unstyled text-small">
{volist name="links" id="l"}
<li><a class="text-muted" href="{$l.url}">{$l.name}</a></li>
{/volist}
</ul>
</div>
<div class="col-4 col-md">
<h5>客户案例</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="http://xn--8ftz06ah22a.xn--ses554g/">星辰互赞宝</a></li>
<li><a class="text-muted" href="http://qrpay.001jzb.cn/">收款啦</a></li>
<li><a class="text-muted" href="http://www.horsesword.com/">小马博客</a></li>
</ul>
</div>
<div class="col-4 col-md">
<h5>联系我们</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="mailto:{$Think.const.WEB_EMAIL}">站长邮箱</a></li>
</ul>
</div>
</div>
</footer>
</center>
</div>
</body>
</html>
