ThinkPHP 视图
老师，我用的是phpstrom，bs3-template:html5生成不了模板
thinkphp的模板不需要自动生成，找到views文件夹，复制一个文件，修改名称就可以了。根据model的名字和action的名字来起，比如model为TestAction，方法为index，则模板名字为Test_index.html,通过display("模板名称")，可以指定模板名称
我也用的phpstorm，是可以自动生成的，下载bootstrap插件步骤（Mac事例）：左上角Phpstorm－Preferences...－Plugins－搜索［bootstrap］－（没安装的话，此时什么都没有）选择 Browse －Bootstrap 3－Install plugin（此步骤有可能需要翻墙，也可以使用镜像［网上一搜多的是］）－重启Phpstorm－新建一个index.html－输入 bs3-tem －command＋j （大功告成）
其它集成环境也是可以用这个插件的，可以参考：
已在PHPSTORM上下载了bootstrap3，bs3-template:html5出不了模版？
03月29日 回答
@你在《？php
?》标签里就可以出模版了，然后把《？php
?》标签去掉，要不然数据传不过来
03月29日 回答
你在《？php ？》标签里就可以输出模版了，然后再把《?PHP?》标签去掉，要不然数据传不过来
ThinkPHP 视图
服务热线:400-678-8266　 　 　 　 　 　 　
教你如何使用模板生成HTML+CSS文件
在上个教程中我们学习了如果使用Photoshop来设计网页模板,这一节我们就来学习如何把这个页面生成标准的html+css文件.
在上个教程中我们学习了如果使用Photoshop来设计网页模板,这一节我们就来学习如何把这个页面生成标准的html+css文件.
相关教程(Photoshop制作方苹果风格的网页模板：)
先看看效果图吧：
2.在写HTML之前我们来分析一下页面的结构,因为一个好的HTML结构,对写CSS样式来是很重要的.下图是页面的DIV图.
3.打开PSD文件,首先我们要把头部的背景用切片工具切出一个切片来,如图;
4.切片出LOGO,另存为WEB格式.
5.现在来切片标题.因为标题的文字字体不是标准的WEB字体,还有标题的阴影用CSS很难实现,所以要把标题切片出来.
6.把电脑也切片出来,在这之前要把电脑里的图像给关掉.
7.关闭侧栏的内层,只显示背景,然后使用选区工具选中大部分的区域,如图:
8.把上面的选中的区域复制并粘贴到一个新的文件里.使用变形工具扩大垂直.(为什么要做这一部,因为这样就可以有足够的空间来填写内容了.)
9.现在回到网页中,把下面的一部分也切片出来.
10.把按扭复制并粘贴到一个新的图层,在一步里我们要把按扭的渐变头尾调换一下,这样就可以一个动态的效果.
11.把图像导出来,并且保存gif格式.
12.把这些图像保存在一个文件夹内.
下面就是HTML+CSS部分
13.在DW中创建一个新的HTML文件.按照第2步写入div布局.然后在头部写入一个无序列表来做导航.
PS:如果觉得图片看不清楚,就点此下载大图并清晰图片.
14.填充无序列表的内容,并加一个&alt&来为描述列表项目.
15.现在开始填充内容.因为最后消息是两栏的形式.所以不要忘了添加一个class.
16.现在来写右侧边的代码.
17.好了,现在来为页脚添加代码,因为页脚分为三列,所以在页脚div容器里再加三个div.
18.现在来写CSS样式,首先清除下浏览器默认值.再添加字体大小,背影,和页面大小.
19.为头部添加CSS(木木:导航的设置请参考:如何使用CSS让菜单横向)
20.续继添加头部的CSS样式,在浏览器的效果如下:
加入和大家一起交流,相互学习,共同提高.
　下一篇：
相关文章和赞助商广告
赞助商信息lollytin是一个专门制作Bootstrap 3模板的在线工具，有了它，用户不需要懂HTML代码和CSS样式就能制作一个流行的网站出来。拥有lollytin你可以在几分钟内出一个BS模板，并且是HTML网页格式，最终用户只需要替换上自己的图像和文字即可。下面一起来看看这个方法吧。你可能感兴趣的Bootstrap资讯：《》《》lollytin教程通过lollytin来做BS模板很简单的，就像积木一样，我们来看看它的制作界面，如下图：面板（左）：组件，即模块元素面板（右）：页面布局图标（左）：组件类别图标（右）：导出HTML格式（第一个是导出HTML文件，第二个是Bootstrap的文件，解压后将刚导出的HTML文件移至目录即可）Tips: 使用时右侧面板有个关闭按钮“X”，用于移除组件。进入lollytin网站：
热门素材内容推荐
& CopyRight , , Inc.All Rights Reserved.一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
& 当我们使用String-base的模板引擎（如Handlebars.js等）时，要么就通过外部文件存放模板文本，需要时再通过XHR或script标签加载进来；要么通过&script type="text/x-template"&&/script&等标签直接写在当前页面上。现在HTML5为我们提供了一个全新的template标签，以更统一、有效的方式存放String-base模板引擎的模板文本了！
& 目录一坨：
二、那些年我们存放模板文本的方式　　　　　　　　　　　　　　　　　　
& 首先要明确模板文档具有以下2个要求：
& & 1. &&& "'&不被转成字符实体；
& & 2. 含src特性的img标签不触发资源请求。
& 下面是常用的存放方式：
& & 1. script标签
// 模板文本
&script id="tpl" type="text/x-template"&
&img src="dummy.png" title="{{title}}"/&
// 获取模板
&script type="text/javascript"&
// 不能通过innerText获取，因为innerText无法获取&img/&等标签字符
var tpl = document.getElementById('tpl').innerHTML
tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')
pile(tpl)({title: 'test'})
& & &1. 若模板中包含&/script&标签会造成标签结束符混乱的问题，因此通过该方式存放模板时，不能包含&/script&结束标签;
& & &2. script标签位置较随意，可以作为head或body的子元素。
　2. textarea标签
// 模板文本
&textarea id="tpl" style="display:"&
&img src="dummy.png" title="{{title}}"/&
&/textarea&
// 获取模板
&script type="text/javascript"&
var tplEl = document.getElementById('tpl')
var tpl = tplEl.value
// 通过tplEl.innerText获取也可以。但不能通过tplEl.innerHTML获取，因为它会对&&"'等转换为字符实体
tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')
pile(tpl)({title: 'test'})
& & 注意：
　　1.&若模板中包含&/textarea&标签会造成标签结束符混乱的问题，因此通过该方式存放模板时，不能包含&/textarea&结束标签；
　　2. textarea元素必须作为body的子孙元素。
& & 3. xmp标签（语义为标识内容用作示例，现已被标准废除了，但各大浏览器依然支持该标签）
// 模板文本
&xmp id="tpl" style="display:"&
&img src="dummy.png" title="{{title}}"/&
// 获取模板
&script type="text/javascript"&
var tplEl = document.getElementById('tpl')
var tpl = tplEl.innerHTML
// 通过tplEl.innerText获取也可以
tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')
pile(tpl)({title: 'test'})
& &&注意：
　　1.&若模板中包含&/xmp&标签会造成标签结束符混乱的问题，因此通过该方式存放模板时，不能包含&/xmp&结束标签；
　　2. xmp元素必须作为body的子孙元素。
& 由于模板文本中出现&script&标签的情况较少，而出现表单元素&textarea&标签的几率较大，而xmp标签已被废弃，因此还是通过script标签存放模板文本的方式较为常见。
三、template标签的新视觉　　　　　　　　　　　　　　　　　　　　　　
& 2013年定稿的template标签为我们提供一种更统一、功能更强大的模板文本存放方式。而它基本的使用方式与之前的3种方式无太大差别：
// 模板文本
&template id="tpl"&
&img src="dummy.png" title="{{title}}"/&
&/template&
// 获取模板
&script type="text/javascript"&
var tplEl = document.getElementById('tpl')
// 通过tplEl.innerText获取也可以
var tpl = tplEl.innerHTML
tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')
pile(tpl)({title: 'test'})
& & &1. 若模板中包含&/template&标签会造成标签结束符混乱的问题，因此通过该方式存放模板时，不能包含&/template&结束标签;
& & &2. script标签位置较随意，可以作为head或body的子元素。
& &到这里大家会觉得template标签除了作为W3C标准外，跟script标签没多大的差别。那是因为我们还没对其深入而已啦，下面我们将对其一一了解吧！
& &1. 不一样的childNodes
& & &script、textarea和xmp方式存放模板文本时，通过&tplEl.childNodes.length&均返回1，&tplEl.childNodes[0].nodeName&均返回#text。而template返回的是0。
& &2. 伪文档片段入口&&content属性
& & &通过innerHTML或innerText属性，template内部的模板文本将被视为普通文本来使用。但template元素为我们提供了另一种使用方式，那就是&文档片段&。
& & &&文档片段&的[[Class]]为[object DocumentFragment]，&文档片段&具有文档片段的所有功能API，不同的是设置img元素的src属性不会发出资源请求、不执行Script和CSS规则，而[object HTMLDocument]&文档&则会发送img请求并在当前browsing context(即window对象上下文)内执行Script和CSS规则。
而我们可以通过content属性获取&文档片段&。
var tplEl = document.getElementById('tpl')
var x = tplEl.content
var img = x.querySelector('img')
console.log(img.src) // 显示空字符串
console.log(img.getAttribute('src')) // 显示dummy.png
img.src = img.getAttribute('src')
console.log(img.src) // 显示about:blank
& & 当添加到当前文档中才会发起资源请求。
document.body.appendChild(img)
// 发起资源请求
console.log(tplEl.innerHTML.replace(/^[\s\u3000]*|[\s\u3000]*$/,'')) // 显示空白字符串
& & 由于appendChild方法实际上会对元素进行剪切操作，因此无法实现模板复用的效果。因此我们需要复制模板内的元素，然后再将元素副本添加到当前文档中。实现手段有很多种，大家可以自行了解一下。
&&& 那么怎样将整个template提供的DocumentFragment导出到当前document呢？答案就是采用IE9+才有的document.importNode方法了。
var tplEl = document.getElementById('tpl')
var x = tplEl.content
var clone = document.importNode(x, true)
document.body.appendChild(x)
四、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
& 本篇为拜读后的笔记+个人经验总结，就写到这里吧！
& 尊重原创，转载请注明来自：&^_^肥子John
五、参考　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
/wordpress/2014/07/hello-html5-template-tag/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
阅读(...) 评论()