1.通过http://www.bootcss.com/p/layoutit/创建布局
2. 修改左右为span2 span9 修改顶端top 0
3.增加block区域
adminbase.html
定义了四个block
<block name="block-header"> </block>
<block name="block-left"> </block>
<block name="block-main"> </block>
<block name="block-footer"> </block>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Le styles --> <link href="assets/css/bootstrap.css" rel="stylesheet"> <style> body { /* padding-top: 60px; 60px to make the container go all the way to the bottom of the topbar */ } </style> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="assets/js/html5shiv.js"></script> <![endif]--> <!-- Fav and touch icons --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> <link rel="shortcut icon" href="assets/ico/favicon.png"> </head> <body> <!--自适应宽度--> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <!--menu--> <block name="block-header"> </block> <!--end menu--> </div> </div> </div> <div class="row-fluid"> <div class="span2"> <!--left--> <block name="block-left"> </block> <!--end left--> </div> <!--main--> <div class="span10"> <block name="block-main"> </block> <!--end main--> </div> <div class="row-fluid"> <div class="span12"> <!--footer--> <block name="block-footer"> </block> <!--end footer--> </div> </div> </div> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="assets/js/jquery.js"></script> <script src="assets/js/bootstrap-transition.js"></script> <script src="assets/js/bootstrap-alert.js"></script> <script src="assets/js/bootstrap-modal.js"></script> <script src="assets/js/bootstrap-dropdown.js"></script> <script src="assets/js/bootstrap-scrollspy.js"></script> <script src="assets/js/bootstrap-tab.js"></script> <script src="assets/js/bootstrap-tooltip.js"></script> <script src="assets/js/bootstrap-popover.js"></script> <script src="assets/js/bootstrap-button.js"></script> <script src="assets/js/bootstrap-collapse.js"></script> <script src="assets/js/bootstrap-carousel.js"></script> <script src="assets/js/bootstrap-typeahead.js"></script> </body> </html>
adminindex2.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Bootstrap, from Twitter</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta name="description" content=""> 8 <meta name="author" content=""> 9 10 <!-- Le styles --> 11 <link href="assets/css/bootstrap.css" rel="stylesheet"> 12 <style> 13 body { 14 /* padding-top: 60px; 60px to make the container go all the way to the bottom of the topbar */ 15 } 16 </style> 17 <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> 18 19 <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> 20 <!--[if lt IE 9]> 21 <script src="assets/js/html5shiv.js"></script> 22 <![endif]--> 23 24 <!-- Fav and touch icons --> 25 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png"> 26 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> 27 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> 28 <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> 29 <link rel="shortcut icon" href="assets/ico/favicon.png"> 30 </head> 31 32 <body> 33 34 35 36 <!--自适应宽度--> 37 <div class="container-fluid"> 38 <div class="row-fluid"> 39 <div class="span12"> 40 <!--menu--> 41 <block name="block-menu"> 42 43 <div class="navbar"> 44 <div class="navbar-inner"> 45 <div class="container-fluid"> 46 <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a> <a href="#" class="brand">网站名</a> 47 <div class="nav-collapse collapse navbar-responsive-collapse"> 48 <ul class="nav"> 49 <li class="active"> 50 <a href="#">主页</a> 51 </li> 52 <li> 53 <a href="#">链接</a> 54 </li> 55 <li> 56 <a href="#">链接</a> 57 </li> 58 <li class="dropdown"> 59 <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<strong class="caret"></strong></a> 60 <ul class="dropdown-menu"> 61 <li> 62 <a href="#">下拉导航1</a> 63 </li> 64 <li> 65 <a href="#">下拉导航2</a> 66 </li> 67 <li> 68 <a href="#">其他</a> 69 </li> 70 <li class="divider"> 71 </li> 72 <li class="nav-header"> 73 标签 74 </li> 75 <li> 76 <a href="#">链接1</a> 77 </li> 78 <li> 79 <a href="#">链接2</a> 80 </li> 81 </ul> 82 </li> 83 </ul> 84 <ul class="nav pull-right"> 85 <li> 86 <a href="#">右边链接</a> 87 </li> 88 <li class="divider-vertical"> 89 </li> 90 <li class="dropdown"> 91 <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<strong class="caret"></strong></a> 92 <ul class="dropdown-menu"> 93 <li> 94 <a href="#">下拉导航1</a> 95 </li> 96 <li> 97 <a href="#">下拉导航2</a> 98 </li> 99 <li> 100 <a href="#">其他</a> 101 </li> 102 <li class="divider"> 103 </li> 104 <li> 105 <a href="#">链接3</a> 106 </li> 107 </ul> 108 </li> 109 </ul> 110 </div> 111 112 </div> 113 </div> 114 115 </div> 116 </block> 117 <!--end menu--> 118 119 </div> 120 </div> 121 <div class="row-fluid"> 122 123 <div class="span2"> 124 125 <!--left--> 126 <block name="block-left"> 127 <ul class="nav nav-list"> 128 <li class="nav-header"> 129 列表标题 130 </li> 131 <li class="active"> 132 <a href="#">首页</a> 133 </li> 134 <li> 135 <a href="#">库</a> 136 </li> 137 <li> 138 <a href="#">应用</a> 139 </li> 140 <li class="nav-header"> 141 功能列表 142 </li> 143 <li> 144 <a href="#">资料</a> 145 </li> 146 <li> 147 <a href="#">设置</a> 148 </li> 149 <li class="divider"> 150 </li> 151 <li> 152 <a href="#">帮助</a> 153 </li> 154 </ul> 155 </block> 156 <!--end left--> 157 </div> 158 <!--main--> 159 160 <div class="span10"> 161 <block name="block-main"> 162 <div class="hero-unit"> 163 <h1> 164 Hello, world! 165 </h1> 166 <p> 167 这是一个可视化布局模板, 你可以点击模板里的文字进行修改, 也可以通过点击弹出的编辑框进行富文本修改. 拖动区块能实现排序. 168 </p> 169 <p> 170 <a class="btn btn-primary btn-large" href="#">参看更多 ?</a> 171 </p> 172 </div> 173 <table class="table"> 174 <thead> 175 <tr> 176 <th> 177 编号 178 </th> 179 <th> 180 产品 181 </th> 182 <th> 183 交付时间 184 </th> 185 <th> 186 状态 187 </th> 188 </tr> 189 </thead> 190 <tbody> 191 <tr> 192 <td> 193 1 194 </td> 195 <td> 196 TB - Monthly 197 </td> 198 <td> 199 01/04/2012 200 </td> 201 <td> 202 Default 203 </td> 204 </tr> 205 <tr class="success"> 206 <td> 207 1 208 </td> 209 <td> 210 TB - Monthly 211 </td> 212 <td> 213 01/04/2012 214 </td> 215 <td> 216 Approved 217 </td> 218 </tr> 219 <tr class="error"> 220 <td> 221 2 222 </td> 223 <td> 224 TB - Monthly 225 </td> 226 <td> 227 02/04/2012 228 </td> 229 <td> 230 Declined 231 </td> 232 </tr> 233 <tr class="warning"> 234 <td> 235 3 236 </td> 237 <td> 238 TB - Monthly 239 </td> 240 <td> 241 03/04/2012 242 </td> 243 <td> 244 Pending 245 </td> 246 </tr> 247 <tr class="info"> 248 <td> 249 4 250 </td> 251 <td> 252 TB - Monthly 253 </td> 254 <td> 255 04/04/2012 256 </td> 257 <td> 258 Call in to confirm 259 </td> 260 </tr> 261 </tbody> 262 </table> 263 264 </block> 265 <!--end main--> 266 </div> 267 268 </div> 269 270 <div class="row-fluid"> 271 <div class="span12"> 272 <!--footer--> 273 <block name="block-footer"> 274 block-footer 275 276 </block> 277 <!--end footer--> 278 279 280 </div> 281 </div> 282 </div> 283 284 <!-- Le javascript 285 ================================================== --> 286 <!-- Placed at the end of the document so the pages load faster --> 287 <script src="assets/js/jquery.js"></script> 288 <script src="assets/js/bootstrap-transition.js"></script> 289 <script src="assets/js/bootstrap-alert.js"></script> 290 <script src="assets/js/bootstrap-modal.js"></script> 291 <script src="assets/js/bootstrap-dropdown.js"></script> 292 <script src="assets/js/bootstrap-scrollspy.js"></script> 293 <script src="assets/js/bootstrap-tab.js"></script> 294 <script src="assets/js/bootstrap-tooltip.js"></script> 295 <script src="assets/js/bootstrap-popover.js"></script> 296 <script src="assets/js/bootstrap-button.js"></script> 297 <script src="assets/js/bootstrap-collapse.js"></script> 298 <script src="assets/js/bootstrap-carousel.js"></script> 299 <script src="assets/js/bootstrap-typeahead.js"></script> 300 301 </body> 302 </html>
4.模板文件上传到相应的目录
cqcms/Tpl/Admin/graytheme/Adminindex2
5.增加控制器的方法
cqcms/Lib/Action/Admin
class Adminindex2Action extends Action {
public function adminindex(){
$this->display();
}
}
===
因为此base仅作为基模板使用,所以没必在定义相应控制器
6.浏览发现 页面无格式
如图
原因为未能成功加载css(还有其它的js文件等) www.chuangqiwl.tk/cqcms/index.php/admin/adminindex2/adminindex
注意上面红色替换成路由路径.
实际css文件的真实的路径是www.chuangqiwl.tk/cqcms/Tpl/Admin/graytheme/public/assets/css/bootstrap.css
在浏览器中直接输入可以查找到此文件.
因此问题是路径错误
7.在分组配置文件中 增加 替换规则
*************
<?php
return array( ‘DEFAULT_ACTION‘ =>‘Adminindex‘,
// 增加新的路径替换规则
‘TMPL_PARSE_STRING‘ =>array( ‘__admingraytheme__‘ =>‘/cqcms/Tpl/Admin/graytheme‘ )
); ?>
**************
注意替换规则中 一边以双下划线开头,双下划线结束,另一边以/开头(以/开头则为物理路径)
‘__admingraytheme__‘ =>‘/cqcms/Tpl/Admin/graytheme‘
//不能写成‘cqcms/Tpl/Admin/graytheme‘(因为它会替换成路由后的url,而我需要的是网站的物理相对路径)
8.修改模板文件的路径
将原来的public/assets替换成__admingraytheme__/public/assets
<link href="__admingraytheme__/public/assets/css/bootstrap.css" rel="stylesheet">
<link href="__admingraytheme__/public/assets/css/bootstrap.css" rel="stylesheet">
....
....
还有其它的一系文件的路径
9最后显示正常
10.另外一个问题是, 系统自定义的文件夹在linux 依然会区分大小写(这是因为不是路由路径的原因么,或者说前一节用定义的不区分大小写只对路由路径有效)
http://www.chuangqiwl.tk/cqcms/tpl/Admin/graytheme/public/assets/css/bootstrap.css 访问css文件,注意这里的不是Tpl.
结果访问是404 错误找不到文件
The requested URL /cqcms/tpl/Admin/graytheme/public/assets/css/bootstrap.css was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
用http://www.chuangqiwl.tk/cqcms/Tpl/Admin/graytheme/public/assets/css/bootstrap.css 正常
11.adminindex.html 文件 删掉"非block"中内容.没有影响.
如果要子模板有不同的标题,或在子模板中引入css,则须要在父模板中增加block
1 <extend name="adminbase" /> 2 <!DOCTYPE html> 3 4 5 6 7 8 <!--block-header--> 9 <block name="block-header"> 10 11 <div class="navbar"> 12 <div class="navbar-inner"> 13 <div class="container-fluid"> 14 <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a> <a href="#" class="brand">网站名</a> 15 <div class="nav-collapse collapse navbar-responsive-collapse"> 16 <ul class="nav"> 17 <li class="active"> 18 <a href="#">主页</a> 19 </li> 20 <li> 21 <a href="#">链接</a> 22 </li> 23 <li> 24 <a href="#">链接</a> 25 </li> 26 <li class="dropdown"> 27 <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<strong class="caret"></strong></a> 28 <ul class="dropdown-menu"> 29 <li> 30 <a href="#">下拉导航1</a> 31 </li> 32 <li> 33 <a href="#">下拉导航2</a> 34 </li> 35 <li> 36 <a href="#">其他</a> 37 </li> 38 <li class="divider"> 39 </li> 40 <li class="nav-header"> 41 标签 42 </li> 43 <li> 44 <a href="#">链接1</a> 45 </li> 46 <li> 47 <a href="#">链接2</a> 48 </li> 49 </ul> 50 </li> 51 </ul> 52 <ul class="nav pull-right"> 53 <li> 54 <a href="#">右边链接</a> 55 </li> 56 <li class="divider-vertical"> 57 </li> 58 <li class="dropdown"> 59 <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<strong class="caret"></strong></a> 60 <ul class="dropdown-menu"> 61 <li> 62 <a href="#">下拉导航1</a> 63 </li> 64 <li> 65 <a href="#">下拉导航2</a> 66 </li> 67 <li> 68 <a href="#">其他</a> 69 </li> 70 <li class="divider"> 71 </li> 72 <li> 73 <a href="#">链接3</a> 74 </li> 75 </ul> 76 </li> 77 </ul> 78 </div> 79 80 </div> 81 </div> 82 83 </div> 84 </block> 85 <!--end block-header--> 86 87 88 89 90 <!--left--> 91 <block name="block-left"> 92 <ul class="nav nav-list"> 93 <li class="nav-header"> 94 列表标题 95 </li> 96 <li class="active"> 97 <a href="#">首页</a> 98 </li> 99 <li> 100 <a href="#">库</a> 101 </li> 102 <li> 103 <a href="#">应用</a> 104 </li> 105 <li class="nav-header"> 106 功能列表 107 </li> 108 <li> 109 <a href="#">资料</a> 110 </li> 111 <li> 112 <a href="#">设置</a> 113 </li> 114 <li class="divider"> 115 </li> 116 <li> 117 <a href="#">帮助</a> 118 </li> 119 </ul> 120 </block> 121 <!--end left--> 122 123 <!--main--> 124 125 126 <block name="block-main"> 127 <div class="hero-unit"> 128 <h1> 129 Hello, world! 130 </h1> 131 <p> 132 这是一个可视化布局模板, 你可以点击模板里的文字进行修改, 也可以通过点击弹出的编辑框进行富文本修改. 拖动区块能实现排序. 133 </p> 134 <p> 135 <a class="btn btn-primary btn-large" href="#">参看更多 ?</a> 136 </p> 137 </div> 138 <table class="table"> 139 <thead> 140 <tr> 141 <th> 142 编号 143 </th> 144 <th> 145 产品 146 </th> 147 <th> 148 交付时间 149 </th> 150 <th> 151 状态 152 </th> 153 </tr> 154 </thead> 155 <tbody> 156 <tr> 157 <td> 158 1 159 </td> 160 <td> 161 TB - Monthly 162 </td> 163 <td> 164 01/04/2012 165 </td> 166 <td> 167 Default 168 </td> 169 </tr> 170 <tr class="success"> 171 <td> 172 1 173 </td> 174 <td> 175 TB - Monthly 176 </td> 177 <td> 178 01/04/2012 179 </td> 180 <td> 181 Approved 182 </td> 183 </tr> 184 <tr class="error"> 185 <td> 186 2 187 </td> 188 <td> 189 TB - Monthly 190 </td> 191 <td> 192 02/04/2012 193 </td> 194 <td> 195 Declined 196 </td> 197 </tr> 198 <tr class="warning"> 199 <td> 200 3 201 </td> 202 <td> 203 TB - Monthly 204 </td> 205 <td> 206 03/04/2012 207 </td> 208 <td> 209 Pending 210 </td> 211 </tr> 212 <tr class="info"> 213 <td> 214 4 215 </td> 216 <td> 217 TB - Monthly 218 </td> 219 <td> 220 04/04/2012 221 </td> 222 <td> 223 Call in to confirm 224 </td> 225 </tr> 226 </tbody> 227 </table> 228 229 </block> 230 <!--end main--> 231 232 233 234 235 236 <!--footer--> 237 <block name="block-footer"> 238 用继承修改 239 240 </block> 241 <!--end footer--> 242 243 244 245 246 247 </body> 248 </html>
原文：http://www.cnblogs.com/WR-HAPPY/p/3570330.html
