先秀一下我的登录页：
废话没有，直接上操作步骤。
1）建立工程
#django-admin.py startproject MyWeb
2)建立应用
#cd MyWeb/
#django-admin.py startapp app51cto
3)修改settings.py添加app
vim MyWeb/settings.py
INSTALLED_APPS = (
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'django.contrib.messages',
'django.contrib.staticfiles',
'app51cto',
)
4)创建访问的url
vim MyWeb/urls.py
urlpatterns = patterns('',
url(r'^login/$', 'app51cto.views.login'),
)
5)创建视图
vim app51cto/views.py
from django.shortcuts import render_to_response
def login(request):
return render_to_response("login.html",{})
6)此时前期准备工作基本完成了，接下来就是创建login.html页面，但苦于运维人员没有前端工程师那么牛叉，写不出漂亮的样式，所以借助bootstrap来为我们创建绚丽的页面。
到官网下载bootstrap包，http://www.bootcss.com/
到工程目录下创建static目录：# mkdir MyWeb/static
将bootstrap包解压移动到static目录下，这样以后同一个工程下其他的应用也能公用static目录下的样式。
如下： MyWeb/static/bootstrap
bootstrap下有丰富的css与js样式，这样省去了我们很多的工作。
使用模板创建我们的html页面，http://getbootstrap.com/2.3.2/examples/hero.html
7)#创建目录templates
mkdir MyWeb/app51cto/templates
接下来我们的html页面都将存放在这个目录下
打开http://getbootstrap.com/2.3.2/examples/hero.html，保存为login.html放到templates目录下。
编辑login.html页面，将其中static目录改为我们自己配置的路径 ：1,$ s/\.\.\/assets/\/static\/bootstrap/
然后编辑MyWeb/settings.py
STATICFILES_DIRS = (
'/MyWeb/static/',
)
8)启动django开发服务器
/MyWeb/manager.py runserver 0.0.0.0:8000
然后在浏览器输入web服务器地址：http://10.0.0.149:8000/login
9)对login.html进行简单的修改，修改后的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8">
<title>OPS登录页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/static/bootstrap/css/bootstrap-cerulean.css" rel="stylesheet">
<link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/" style="margin-top:20px;font-size:25px"><img src="/static/bootstrap/img/logo.png"> <b>运维管理平台</b></a>
<div class="nav-collapse" style="margin-top:20px">
<ul class="nav">
<!-- <li class="active"><a href="/main/">首页</a></li> -->
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div id="page-content" style="margin-top:130px" class="hero-unit2">
<img src="/static/bootstrap/img/loginleftimg.jpg" style="margin:0 150px;" ></img>
<!-- ### login -->
<div class="pull-right" style="margin:0 120px;">
<form class="well" action="/login/" method="POST">
<label>用户名</label>
<input type="text" class="span3" name="username" placeholder="请输入用户名">
<label>密码</label>
<input type="password" class="span3" name="password" placeholder="请输入密码">
<label>` login_err `</lable>
<label class="checkbox">
<input type="checkbox">记住我
</label>
<button type="submit" class="btn btn-primary"><b>登 录</b></button>
</form>
</div>
<!-- /end-login -->
</div>
<hr>
<footer>
<p style="text-align:center">版权所有 2010 畅捷通软件有限公司</p>
</footer>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.js"></script>
</body>
</html>保存后浏览：
如有疑问请@畅捷通赵海华
