OJ2.0userInfo页面布局修改1.0-栅格系统简单学习
2014-08-17 19:29
357 查看
上次开会的时候决定在userInfo页面，显示两列信息加一列搜索信息，后来修改了需求，在userInfo页面只展
示一个人的信息，要求是：
1：当url传过来的Id是当前登录用户的Id的时候，那么就展示当前用户的信息并且处于可修改状态，并且展式
Modify按钮（在这里我觉得原始密码应该是去掉的，需要修改的时候的必须填写原密码，一般的修改个人信息都是这
样设计的）。
2：如果url传过来的Id是其它用户的Id的时候，那么当前只显示其他人的信息，并且所有信息都处于只能查看不
能修改的状态。
3：修改页面的话，现在使用了一种特别简单的判断模式，就是当我们需要进入到usreInfo页面的时候，我们会
传递一个userID，然后在view.py中处理的时候，我们再把这个参数传递回来。当显示的时候，可以对id进行判断，
然后选择显示的信息：
<!DOCTYPE html>
<html lang="zh-cn">
<!--{% load pagination_tags %}-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="cugbacm" >
<script type = "text/javascript" src = "/site_media/dist/js/jquery-2.1.0.min.js"> </script>
<script type="text/javascript" src="/site_media/dist/js/bootstrap.js"></script>
<title>User Info</title>
<!-- Bootstrap core CSS -->
<link href="/site_media/dist/css/bootstrap.css" rel="stylesheet">
<link href="/site_media/Flat-UI-master/css/flat-ui.css" rel="stylesheet">
<!-- Custom styles for this template -->
<!--<link href="signin.css" rel="stylesheet">-->
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body style="padding-top:70px">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<ul class="nav nav-tabs">
<li><a href="/index/problemList">Problem List</a></li>
<li><a href="/index/submitList">Submit List</a></li>
<li><a href="/index/contestList">Contest List</a></li>
<li><a href="/index/userList">User List</a></li>
<li class="active" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
{{userID}} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="/index/userInfo/{{user.userID}}">User Info</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="/index/login">Login out</a></li>
</ul>
</li>
</ul>
<marquee id="affiche" align="left" behavior="alternate" bgcolor="#FFFFFF" direction="right" width=100% loop="-1" scrollamount="1" scrolldelay="10" onMouseOut="this.start()" onMouseOver="this.stop()">
<font color=red>新OJ还在建设当中，欢迎大家提出一些实用的需求，Orz.......763687347@qq.com
</marquee>
</nav>
<div class="container" style="padding-top:20px;" >
<div class="container-fluid">
<div class="row-fluid">
{% if id == userID %}
<div class="col-md-4 col-md-offset-3">
<form class="form-horizontal" role="form" action="/index/userInfo/{{other.userID}}" method="post">{% csrf_token %}
<div class="form-group">
<label for="UserID" class="col-sm-5 control-label"> </label>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-7">
<button type="submit" class="btn btn-info" name = "Modify" id = "Modefy" value = "Modify"> Modify your information</button>
</div>
</div>
<div class="form-group">
<label for="userID" class="col-sm-5 control-label">UserID</label>
<div class="col-sm-7">
<input class="form-control" id="userID" type="text" readonly= "true" value="{{user.userID}}" name="userID" required>
</div>
</div>
<div class="form-group">
<label for="nickname" class="col-sm-5 control-label">Nickname</label>
<div class="col-sm-7">
<input class="form-control" id="nickname" type="text" value="{{user.nickname}}" name="nickname" required/>
</div>
</div>
<div class="form-group">
<label for="session" class="col-sm-5 control-label">Session</label>
<div class="col-sm-7">
<input class="form-control" id="session" type="text" value="{{user.session}}" name="session" required/>
</div>
</div>
<div class="form-group">
<label for="specialty" class="col-sm-5 control-label">Specialty</label>
<div class="col-sm-7">
<input class="form-control" id="specialty" type="text" value="{{user.specialty}}" name="specialty" required/>
</div>
</div>
<div class="form-group">
<label for="tel" class="col-sm-5 control-label">Tel</label>
<div class="col-sm-7">
<input class="form-control" id="tel" type="text" value="{{user.tel}}" name="tel" required/>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-5 control-label">Email</label>
<div class="col-sm-7">
<input class="form-control" id="email" type="text" value="{{user.email}}" name="email" required/>
</div>
</div>
<div class="form-group">
<label for="oldPassword" class="col-sm-5 control-label">Old Password</label>
<div class="col-sm-7">
<input class="form-control" id="oldPassword" type="password" value="{{user.password}}" name="oldPassword" required/>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-5 control-label">Password</label>
<div class="col-sm-7">
<input class="form-control" id="password" type="password" name="password" />
</div>
</div>
<div class="form-group">
<label for="confirmPassword" class="col-sm-5 control-label">Confirm Password</label>
<div class="col-sm-7">
<input class="form-control" id="confirmPassword" type="password" name="confirmPassword"/>
</div>
</div>
</form>
</div>
{% endif %}
{% if id != userID %}
<div class="col-md-4 col-md-offset-3">
<form class="form-horizontal" role="form" action="/index/userInfo/{{other.userID}}" method="post">
<div class="form-group">
<label for="" class="col-sm-5 control-label"> </label>
</div>
<div class="form-group">
<label for="" class = "col-sm-5 control-label"> </label>
</div>
<div class="form-group">
<label for="" class="col-sm-5 control-label">UserID</label>
<div class="col-sm-7">
<input class="form-control" id="otherUserID" type="text" readonly= "true" value="{{other.userID}}" name="otherUserID" required>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-5 control-label">NickName</label>
<div class="col-sm-7">
<input class="form-control" id="otherNickname" type="text" readonly= "true" value="{{other.nickname}}" name="otherNickname" required/>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-5 control-label">Session</label>
<div class="col-sm-7">
<input class="form-control" id="otherSession" type="text" readonly= "true" value="{{other.session}}" name="otherSession" required/>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-5 control-label">Specialty</label>
<div class="col-sm-7">
<input class="form-control" id="otherSpecialty" type="text" readonly= "true" value="{{other.specialty}}" name="otherSpecialty" required/>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-5 control-label">Tel</label>
<div class="col-sm-7">
<input class="form-control" id="otherTel" type="text" readonly= "true" value="{{other.tel}}" name="otherTel" required/>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-5 control-label">Email</label>
<div class="col-sm-7">
<input class="form-control" id="otherEmail" type="text" readonly= "true" value="{{other.email}}" name="otherEmail" required/>
</div>
</div>
</form>
</div>
{% endif %}
</div>
</div>
</div> <!-- /container -->
</body>
</html>
总体的代码没有大的变化，主要就是增加接受了一个参数id，以此来判断显示逻辑就OK。
在设计页面的时候，了解学习了一下栅格系统：
1：简介
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统
会自动分为最多12列。
2：栅格系统
bootstrap3.x使用了四种栅格选项来形成栅格系统，他们分别是col-xs、col-sm、col-md、col-lg，lg是large的缩
写，md是mid的缩写，sm是small的缩写，xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。
有一张图有四种选项的简单介绍：
3：列偏移：
使用.col-md-offset。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。
4：关于OJ
在OJ的userInfo页面，就是用到了栅格系统。上面显示信息的时候，比如显示ID的时候，前面的ID和后面的ID内容
就是通过col-sm-5和col-sm-7这样来分分给他们的区域的。而在整个信息div的划定的时候，使用了<div class = "col-
sm-4 col-md-offset-3"来选择区域，即占屏幕宽度的4/12,并且右移3个列（需要注意的是col-sm-4 和 col-md-offset-3
中间是没有逗号的，我刚开始的一直调不对布局，就是这里多了个逗号，(/ □ \)）。更多了解百度“栅格系统”
示一个人的信息，要求是：
1：当url传过来的Id是当前登录用户的Id的时候，那么就展示当前用户的信息并且处于可修改状态，并且展式
Modify按钮（在这里我觉得原始密码应该是去掉的，需要修改的时候的必须填写原密码，一般的修改个人信息都是这
样设计的）。
2：如果url传过来的Id是其它用户的Id的时候，那么当前只显示其他人的信息，并且所有信息都处于只能查看不
能修改的状态。
3：修改页面的话，现在使用了一种特别简单的判断模式，就是当我们需要进入到usreInfo页面的时候，我们会
传递一个userID，然后在view.py中处理的时候，我们再把这个参数传递回来。当显示的时候，可以对id进行判断，
然后选择显示的信息：
<!DOCTYPE html>
<html lang="zh-cn">
<!--{% load pagination_tags %}-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="cugbacm" >
<script type = "text/javascript" src = "/site_media/dist/js/jquery-2.1.0.min.js"> </script>
<script type="text/javascript" src="/site_media/dist/js/bootstrap.js"></script>
<title>User Info</title>
<!-- Bootstrap core CSS -->
<link href="/site_media/dist/css/bootstrap.css" rel="stylesheet">
<link href="/site_media/Flat-UI-master/css/flat-ui.css" rel="stylesheet">
<!-- Custom styles for this template -->
<!--<link href="signin.css" rel="stylesheet">-->
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body style="padding-top:70px">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<ul class="nav nav-tabs">
<li><a href="/index/problemList">Problem List</a></li>
<li><a href="/index/submitList">Submit List</a></li>
<li><a href="/index/contestList">Contest List</a></li>
<li><a href="/index/userList">User List</a></li>
<li class="active" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
{{userID}} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="/index/userInfo/{{user.userID}}">User Info</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="/index/login">Login out</a></li>
</ul>
</li>
</ul>
<marquee id="affiche" align="left" behavior="alternate" bgcolor="#FFFFFF" direction="right" width=100% loop="-1" scrollamount="1" scrolldelay="10" onMouseOut="this.start()" onMouseOver="this.stop()">
<font color=red>新OJ还在建设当中，欢迎大家提出一些实用的需求，Orz.......763687347@qq.com
</marquee>
</nav>
<div class="container" style="padding-top:20px;" >
<div class="container-fluid">
<div class="row-fluid">
{% if id == userID %}
<div class="col-md-4 col-md-offset-3">
<form class="form-horizontal" role="form" action="/index/userInfo/{{other.userID}}" method="post">{% csrf_token %}
<div class="form-group">
<label for="UserID" class="col-sm-5 control-label"> </label>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-7">
<button type="submit" class="btn btn-info" name = "Modify" id = "Modefy" value = "Modify"> Modify your information</button>
</div>
</div>
<div class="form-group">
<label for="userID" class="col-sm-5 control-label">UserID</label>
<div class="col-sm-7">
<input class="form-control" id="userID" type="text" readonly= "true" value="{{user.userID}}" name="userID" required>
</div>
</div>
<div class="form-group">
<label for="nickname" class="col-sm-5 control-label">Nickname</label>
<div class="col-sm-7">
<input class="form-control" id="nickname" type="text" value="{{user.nickname}}" name="nickname" required/>
</div>
</div>
<div class="form-group">
<label for="session" class="col-sm-5 control-label">Session</label>
<div class="col-sm-7">
<input class="form-control" id="session" type="text" value="{{user.session}}" name="session" required/>
</div>
</div>
<div class="form-group">
<label for="specialty" class="col-sm-5 control-label">Specialty</label>
<div class="col-sm-7">
<input class="form-control" id="specialty" type="text" value="{{user.specialty}}" name="specialty" required/>
</div>
</div>
<div class="form-group">
<label for="tel" class="col-sm-5 control-label">Tel</label>
<div class="col-sm-7">
<input class="form-control" id="tel" type="text" value="{{user.tel}}" name="tel" required/>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-5 control-label">Email</label>
<div class="col-sm-7">
<input class="form-control" id="email" type="text" value="{{user.email}}" name="email" required/>
</div>
</div>
<div class="form-group">
<label for="oldPassword" class="col-sm-5 control-label">Old Password</label>
<div class="col-sm-7">
<input class="form-control" id="oldPassword" type="password" value="{{user.password}}" name="oldPassword" required/>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-5 control-label">Password</label>
<div class="col-sm-7">
<input class="form-control" id="password" type="password" name="password" />
</div>
</div>
<div class="form-group">
<label for="confirmPassword" class="col-sm-5 control-label">Confirm Password</label>
<div class="col-sm-7">
<input class="form-control" id="confirmPassword" type="password" name="confirmPassword"/>
</div>
</div>
</form>
</div>
{% endif %}
{% if id != userID %}
<div class="col-md-4 col-md-offset-3">
<form class="form-horizontal" role="form" action="/index/userInfo/{{other.userID}}" method="post">
<div class="form-group">
<label for="" class="col-sm-5 control-label"> </label>
</div>
<div class="form-group">
<label for="" class = "col-sm-5 control-label"> </label>
</div>
<div class="form-group">
<label for="" class="col-sm-5 control-label">UserID</label>
<div class="col-sm-7">
<input class="form-control" id="otherUserID" type="text" readonly= "true" value="{{other.userID}}" name="otherUserID" required>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-5 control-label">NickName</label>
<div class="col-sm-7">
<input class="form-control" id="otherNickname" type="text" readonly= "true" value="{{other.nickname}}" name="otherNickname" required/>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-5 control-label">Session</label>
<div class="col-sm-7">
<input class="form-control" id="otherSession" type="text" readonly= "true" value="{{other.session}}" name="otherSession" required/>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-5 control-label">Specialty</label>
<div class="col-sm-7">
<input class="form-control" id="otherSpecialty" type="text" readonly= "true" value="{{other.specialty}}" name="otherSpecialty" required/>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-5 control-label">Tel</label>
<div class="col-sm-7">
<input class="form-control" id="otherTel" type="text" readonly= "true" value="{{other.tel}}" name="otherTel" required/>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-5 control-label">Email</label>
<div class="col-sm-7">
<input class="form-control" id="otherEmail" type="text" readonly= "true" value="{{other.email}}" name="otherEmail" required/>
</div>
</div>
</form>
</div>
{% endif %}
</div>
</div>
</div> <!-- /container -->
</body>
</html>
总体的代码没有大的变化，主要就是增加接受了一个参数id，以此来判断显示逻辑就OK。
在设计页面的时候，了解学习了一下栅格系统：
1：简介
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统
会自动分为最多12列。
2：栅格系统
bootstrap3.x使用了四种栅格选项来形成栅格系统，他们分别是col-xs、col-sm、col-md、col-lg，lg是large的缩
写，md是mid的缩写，sm是small的缩写，xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。
有一张图有四种选项的简单介绍：
3：列偏移：
使用.col-md-offset。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。
4：关于OJ
在OJ的userInfo页面，就是用到了栅格系统。上面显示信息的时候，比如显示ID的时候，前面的ID和后面的ID内容
就是通过col-sm-5和col-sm-7这样来分分给他们的区域的。而在整个信息div的划定的时候，使用了<div class = "col-
sm-4 col-md-offset-3"来选择区域，即占屏幕宽度的4/12,并且右移3个列（需要注意的是col-sm-4 和 col-md-offset-3
中间是没有逗号的，我刚开始的一直调不对布局，就是这里多了个逗号，(/ □ \)）。更多了解百度“栅格系统”
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- OJ2.0修改完善userInfo的跳转
- java实现简单的页面布局和按钮单击事件（学习中）
- Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一，Bootstrap功能强大，简单易学，很符合实际应用场景。 只是Bootstrap的内容较多，新手
- 如何使用CSS栅格布局创建一个简单页面布局
- html5学习笔记2-最简单的页面布局
- 一步步学习SPD2010--第十三章节--管理SP Server环境的Web内容（5）--修改页面布局
- Bootstrap布局之栅格系统学习笔记
- Bootstrap3基础 栅格系统 页面布局随浏览器大小的变化而变化
- html5学习笔记2-最简单的页面布局 (
- 一步步学习SPD2010--第十三章节--管理SP Server环境的Web内容（5）--修改页面布局
- .Net 2.0实例学习：WebBrowser页面与WinForm交互技巧
- 页面自定义拖拽布局,学习,研究
- [导入]c#2.0中动态修改页面标题
- Net 2.0实例学习：WebBrowser页面与WinForm交互技巧 ！！！
- 系统地学习ASP.NET AJAX(1) - 简单地过一下每个控件
- asp.net 2.0中动态修改页面标题
- vc学习历程（3）--修改系统默认菜单
- c#2.0中动态修改页面标题
- 创建符合标准的、有语意的HTML页面——ASP.NET 2.0 CSS Friendly Control Adapters 1.0发布
- 简单的搭建Web系统常用的框架页面