（2）前端制作 · 基于ThinkPHP5.0的各項后臺小功能代碼實現

- 在composer的時候就可以改好名字，我這里需要的是一個留言板的以message為文件名的thnjphp5框架在cmd里面輸入下面的命令行，等上一小會。就能看到www下面多了一個message文件夾。 ``` composer create-project topthink/think message ``` - 我這邊網速不是很給力，花了三分鐘composer下來了一份，訪問 ``` http://127.0.0.1/message/public/ ``` - 接著就是用Bootstrap來寫一個前端。代碼如下：（今晚，2016.10.28把前端寫完）以下前端代碼只是目前的展示效果， ``` <html lang="en"> <head> <meta charset="UTF-8"> <title>新碼萌自學留言板</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="{$Think.config.web_root}css/index.css">  </head> <body> <div class="container"> <div class="bord"> <div class="title"><span>留言板</span></div> <div class="main"> <ul class="list-group"> <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li> <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li> <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li> <li class="list-group-item list-group-item-danger">Vestibulum at eros</li> <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li> <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li> </ul> </div> <div class="buttom"> <input class="input"></input> <input class="inputs btn-lg btn-success" type="button" value="提交"> </div> </div> </div> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </body> </html> ``` 效果圖如下所示： ![](https://box.kancloud.cn/d8e4a302506a1d3b4662f48870c2df6c_1136x858.png) css部分，index.css: ``` .container .bord{ width:100%; min-height:800px; margin: 0 auto; background-color: pink; } .container .bord .title{ width: 80%; height: 85px; margin: 0 auto; border-radius:0px 0px 20px 20px; background:#C67171; text-align: center; line-height: 85px; } .container .bord .title span{ font-size: 28px; color:#ffffff; font-family:微軟雅黑; } .container .bord .title:hover{ background:#C0FF3E; } .container .bord .title:hover span{ color:red; } .container .bord .main{ width:70%; height:450px; border:2px solid pink; margin:0 auto; margin-top:20px; overflow-y:auto; } .container .bord .buttom{ width: 70%; height: 200px; margin:0 auto; margin-top: 50px; /*border:1px solid red;*/ } .container .bord .buttom .input{ width:100%; height: 100px; margin: 0 auto; background: #F0E68C; border-radius: 10px; } ```