页面如果出来了，大家就知道我们要呈现一个什么功能和具体需要如何准备程序了。这一章主要使用流行的bootstrap3来搭建一个简易的页面。我会以代码和截图方式呈现并上传代码以供学习和下载使用。下一章我们将把代码装载到symfony2的Twig模板里。
一、基本的代码
我们需要引入一些基本的bootstrap文件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>信息资料管理</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </head> <body> //内容区域...... </body> </html> |
我们使用 Bootstrap 中文网提供的免费 CDN 加速服务，更多请看 http://v3.bootcss.com/getting-started/
二、登录页面
下面我们来看看登录页面的截图
如何实现这样的一个html页面呢，下面是登录页面全部html代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>信息资料管理</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </head> <body> <style> form{max-width: 330px; margin:0 auto;} form .form-control{ padding-bottom:10px;} </style> <div class="container"> <form role="form"> <h2>请在这里登录吧！</h2> <input type="username" class="form-control" placeholder="用户名" required autofocus> <input type="password" class="form-control" placeholder="密码" required> <button class="btn btn-lg btn-primary btn-block" type="submit">登陆</button> </form> </div> <!-- /container --> </body> </html> |
不过多解释了，看看登录后的页面吧。
三、信息管理页面
这个页面用极简的人员信息为测试数据，来教会大家如何使用symfony2录入人员信息、上传文件、编辑、删除、搜索、展示并分页等功能。
我们把本页模板分成三块分别为顶部导航、左导航和列表区域。
1.顶部导航代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"> <div class="container-fluid"> <!--手机浏览时显示--> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".nav-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!--手机浏览时显示 结束--> <a class="navbar-brand" href="#">信息管理</a> <ul class="nav pull-right" > <!-- 登录的用户信息 --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img alt="" src="images/avatar1_small.jpg"> <span>XMAN</span> <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="login.html"><i class="icon-key"></i>退出</a></li> </ul> </li> <!-- 登录的用户信息 结束 --> </ul> </div><!-- /.container-fluid --> </nav> |
2.左导航代码
|
1 2 3 4 5 6 7 8 |
<div class="col-sm-2"> <ul class="nav nav-sidebar nav-collapse collapse in"> <li class="active"><a href="#">全公司人员</a></li> <li><a href="#"> 销售人员</a></li> <li><a href="#"> 技术人员</a></li> <li><a href="#"> 后勤人员</a></li> </ul> </div> |
3.列表区域代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<div class="col-sm-10" > <div class="row"> <div class="col-xs-6" ><input type="text" class="form-control" placeholder="检索姓名"></div> <div class="col-xs-3" ><input class="btn btn-default" type="submit" value="搜索"></div> <div class="col-xs-3 "><input class="btn btn-default pull-right" type="submit" data-toggle="modal" data-target="#myModal" value="资料录入"></div> </div> <div class="row"> <table class="table"> <thead> <tr> <th>#</th> <th>照片</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>学历</th> <th>简历下载</th> <th></th> </tr> </thead> <tbody> <tr> <td>1</td> <td><img src="images/avatar1_small.jpg" /></td> <td>张三</td> <td>男</td> <td>25</td> <td>研究生</td> <td>张三简历<a>下载</a></td> <td><a href="javascript:;" data-toggle="modal" data-target="#myModalUpdate">编辑</a></td> </tr> <tr> <td>2</td> <td><img src="images/avatar1_small.jpg" /></td> <td>李四</td> <td>女</td> <td>26</td> <td>研究生</td> <td>李四简历<a>下载</a></td> <td><a href="javascript:;" data-toggle="modal" data-target="#myModalUpdate">编辑</a></td> </tr> <tr> <td>3</td> <td><img src="images/avatar1_small.jpg" /></td> <td>王五</td> <td>男</td> <td>46</td> <td>研究生</td> <td>王五简历<a>下载</a></td> <td><a href="javascript:;" data-toggle="modal" data-target="#myModal">编辑</a></td> </tr> </tbody> </table> </div> <div class="row"> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> </div> </div> |
很好但是还没完哦。我们还有录入页面和编辑页面
四、录入和编辑页面
1.录入页面
录入页面html代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!-- Modal 录入表单--> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button> <h4 class="modal-title" id="myModalLabel">人员信息录入</h4> </div> <div class="modal-body"> <!--内容区域--> <form role="form"> <div> <div class="form-group col-xs-4"> <label for="exampleInputName">姓名</label> <input type="text" class="form-control" id="exampleInputName" placeholder="请输入姓名"> </div> <div class="form-group col-xs-4"> <label for="exampleInputSex">性别</label> <input type="password" class="form-control" id="exampleInputSex" placeholder="请输入性别"> </div> <div class="form-group col-xs-4"> <label for="exampleInputAge">年龄</label> <input type="password" class="form-control" id="exampleInputAge" placeholder="请输入年龄"> </div> </div> <div class="form-group col-xs-12"> <label for="exampleInputEducation">学历</label> <input type="password" class="form-control" id="exampleInputEducation" placeholder="请输入学历"> </div> <div class="form-group"> <label for="exampleInputImage">上传照片</label> <input type="file" id="exampleInputImage"> <p class="help-block">不要上传超过1M的照片并且上传完成后不可编辑.</p> </div> <div class="form-group"> <label for="exampleInputFile">上传简历</label> <input type="file" id="exampleInputFile"> <p class="help-block">不要上传超过1M的照片并且上传完成后不可编辑.</p> </div> <!--内容区域结束--> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </form> </div> </div> </div> <!--end Modal 录入表单--> |
2.编辑页面
编辑页面html代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!-- Modal 编辑表单--> <div class="modal fade" id="myModalUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button> <h4 class="modal-title" id="myModalLabel">人员信息录入</h4> </div> <div class="modal-body"> <!--内容区域--> <form role="form"> <div class="row"> <div class="form-group col-xs-4"> <label for="exampleInputName">姓名</label> <input type="text" class="form-control" id="exampleInputName" placeholder="请输入姓名"> </div> <div class="form-group col-xs-4"> <label for="exampleInputSex">性别</label> <input type="password" class="form-control" id="exampleInputSex" placeholder="请输入性别"> </div> <div class="form-group col-xs-4"> <label for="exampleInputAge">年龄</label> <input type="password" class="form-control" id="exampleInputAge" placeholder="请输入年龄"> </div> </div> <div class="row"> <div class="form-group col-xs-12"> <label for="exampleInputEducation">学历</label> <input type="password" class="form-control" id="exampleInputEducation" placeholder="请输入学历"> </div> </div> <!--内容区域结束--> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </form> </div> </div> </div> <!--end Modal 编辑表单--> |