openstack/deb-python-django-bootstrap-form
Code Issues Proposed changes

Update example with bootstrap 3

Browse Source
This commit is contained in:
tzangms 2013-12-05 22:39:01 +08:00
parent b9f04ce715
commit 435b5c691a
3 changed files with 56 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,3 +1,6 @@
*.pyc
*.egg-info
.DS_Store
docs/_build
/build
/dist

15
example/app/forms.py
View File

@ -1,7 +1,16 @@
from django import forms
CHOICES = (
(0, 'Zero'),
(1, 'One'),
(2, 'Two'),
)
class ExampleForm(forms.Form):
title = forms.CharField()
choices = forms.ChoiceField(choices=((0, 'Zero'), (1, 'One'), (2, 'Two')), widget=forms.RadioSelect)
password = forms.CharField(widget=forms.PasswordInput)
char_field = forms.CharField()
choice_field = forms.ChoiceField(choices=CHOICES)
radio_choice = forms.ChoiceField(choices=CHOICES, widget=forms.RadioSelect)
file_fied = forms.FileField()
password_field = forms.CharField(widget=forms.PasswordInput)
textarea = forms.CharField(widget=forms.Textarea)
boolean_field = forms.BooleanField()

50
example/app/templates/index.html
View File

@ -2,31 +2,63 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"0>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{{ STATIC_URL }}css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<title>Bootstrap form example</title>
</head>
<body>
<div class="container">
<h1>Bootstrap form example</h1>
<hr />
<div class="row">
<div class="span12">
<form class="form-horizontal">
<h1>Bootstrap form example</h1>
<p>below demostate how the form looks with bootstrap</p>
</div>
</div>
<!-- basic example -->
<div class="row">
<div class="span12">
<h2>Basic example</h2>
<hr />
<form class="form" role="form">
{{ form|bootstrap }}
<div class="form-actions">
<input type="submit" class="btn btn-primary" value="Submit" />
<div class="form-group">
<div class="col-sm-12">
<input type="button" class="btn btn-primary" value="Submit" />
</div>
</div>
</form>
</div>
</div>
<!-- horizontal form -->
<div class="row">
<div class="span12">
<h2>Horizontal form</h2>
<hr />
<form class="form-horizontal" role="form">
{{ form|bootstrap_horizontal }}
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" class="btn btn-primary" value="Submit" />
</div>
</div>
</form>
</div>
</div>
</div>
<!-- scripts -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>