应用Bootstrap样式示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<title>login</title>
</head>
<body>
<div class="container">
<div class="row">
<form action="/login2/" method="post" novalidate class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label for="{{ form_obj.username.id_for_label }}"
class="col-md-2 control-label">{{ form_obj.username.label }}</label>
<div class="col-md-10">
{{ form_obj.username }}
<span class="help-block">{{ form_obj.username.errors.0 }}</span>
</div>
</div>
<div class="form-group">
<label for="{{ form_obj.pwd.id_for_label }}" class="col-md-2 control-label">{{ form_obj.pwd.label }}</label>
<div class="col-md-10">
{{ form_obj.pwd }}
<span class="help-block">{{ form_obj.pwd.errors.0 }}</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">{{ form_obj.gender.label }}</label>
<div class="col-md-10">
<div class="radio">
{% for radio in form_obj.gender %}
<label for="{{ radio.id_for_label }}">
{{ radio.tag }}{{ radio.choice_label }}
</label>
{% endfor %}
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-default">注册</button>
</div>
</div>
</form>
</div>
</div>
<script src="/static/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
批量添加样式可通过重写form类的init方法来实现
class LoginForm(forms.Form):
username = forms.CharField(
min_length=8,
label="用户名",
initial="张三",
error_messages={
"required": "不能为空",
"invalid": "格式错误",
"min_length": "用户名最短8位"
}
...
def __init__(self, *args, **kwargs):
super(LoginForm, self).__init__(*args, **kwargs)
for field in iter(self.fields):
self.fields[field].widget.attrs.update({
'class': 'form-control'
})
views.py如book表的添加和数据展示
from django.shortcuts import render,HttpResponse,redirect
from app01 import models
from django import forms
# Create your views here.
class BookForm(forms.Form):
title = forms.CharField(
max_length=16,
label='书名:',
initial='zhang',
# widget = forms.widgets.PasswordInput(attrs={'class': 'form-control'},render_value=True),
widget = forms.widgets.TextInput(attrs={'class': 'form-control'},),
)
# title2 = forms.CharField(
# max_length=16,
# label='书名:',
# initial='zhang',
# # widget = forms.widgets.PasswordInput(attrs={'class': 'form-control'},render_value=True),
# widget=forms.widgets.TextInput(attrs={'class': 'form-control'}, ),
#
# )
sex = forms.ChoiceField(
choices=(
('1','男'),
('2','女'),
)
,
label='性别:',
# widget=forms.widgets.RadioSelect(),
# widget=forms.widgets.RadioSelect(),
# widget=forms.widgets.SelectMultiple(attrs={'class':'form-control'}),
widget=forms.widgets.Select(attrs={'class':'form-control'}),
# widget=forms.widgets.CheckboxInput(),
# widget=forms.widgets.CheckboxSelectMultiple(),
)
publishDate = forms.DateField(
label='出版日期:',
widget=forms.widgets.TextInput(attrs={'type':'date','class':'form-control'}),
)
price=forms.DecimalField(
max_digits=5,
decimal_places=2,
label='书籍的价格:',
widget=forms.widgets.NumberInput(attrs={'class': 'form-control'}
))
# publish = forms.ModelChoiceField(
# label='出版社:',
# queryset=models.Publish.objects.all(),
# widget=forms.widgets.Select(attrs={'class': 'form-control'}
# ))
publish_id = forms.ChoiceField(
label='出版社:',
widget=forms.widgets.Select(attrs={'class': 'form-control'}
))
authors = forms.ModelMultipleChoiceField(
queryset=models.Author.objects.all(),
widget = forms.widgets.SelectMultiple(attrs={'class': 'form-control'}
))
def __init__(self,*args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['publish_id'].choices = models.Publish.objects.values_list('pk','name')
def index(request):
if request.method == 'GET':
form_obj = BookForm()
return render(request,'index.html',{'form_obj':form_obj})
else:
print(request.POST)
form_obj = BookForm(request.POST)
print(form_obj.is_valid())
print(form_obj.errors)
if form_obj.is_valid():
print(form_obj.cleaned_data)
authors_obj = form_obj.cleaned_data.pop('authors')
new_book_obj = models.Book.objects.create(**form_obj.cleaned_data)
new_book_obj.authors.add(*authors_obj)
return redirect('show')
else:
print(form_obj.errors)
return render(request,'index.html',{'form_obj':form_obj})
def show(request):
book_objs = models.Book.objects.all()
return render(request,'show.html',{'book_objs':book_objs})
def edit_book(request,n):
return HttpResponse('欢迎来到编辑页面')
def delete_book(request,n):
return HttpResponse('欢迎来到删除页面')
内容如下
urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.index,name='index'),
url(r'^show/', views.show,name='show'),
url(r'^edit_book/(\d+)/', views.edit_book,name='edit_book'),
url(r'^delete_book/(\d+)/', views.delete_book,name='delete_book'),
]
index.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'bootstrap-3.3.0-dist/dist/css/bootstrap.min.css' %}">
</head>
<body>
<h1>展示页面</h1>
{#<div>#}
{# {{ form_obj.as_p }}#}
{##}
{#</div>#}
{#{% for field in form_obj %}#}
{# <div>#}
{# {{ field }}#}
{# </div>#}
{##}
{#{% endfor %}#}
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form action="" novalidate method="post">
{% for field in form_obj %}
<div class="form-group {% if field.errors.0 %}has-error{% endif %}">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field }}
<span class="text-danger">{{ field.errors.0 }}</span>
</div>
{% endfor %}
{# <div class="form-group">#}
{# <label for="{{ form_obj.sex.id_for_label }}">{{ form_obj.sex.label }}</label>#}
{# {{ form_obj.sex }}#}
{# {{ form_obj.sex.errors.0 }}#}
{# </div>#}
{# <div class="form-group">#}
{# <label for="{{ form_obj.publishDate.id_for_label }}">{{ form_obj.publishDate.label }}</label>#}
{# {{ form_obj.publishDate }}#}
{# {{ form_obj.publishDate.errors.0 }}#}
{# </div>#}
{# <div class="form-group">#}
{# <label for="{{ form_obj.price.id_for_label }}">{{ form_obj.price.label }}</label>#}
{# {{ form_obj.price }}#}
{# <span class="text-danger">{{ form_obj.price.errors.0 }}</span>#}
{# </div>#}
{# <div class="form-group">#}
{# <label for="{{ form_obj.publish.id_for_label }}">{{ form_obj.publish.label }}</label>#}
{# {{ form_obj.publish }}#}
{# <span class="text-danger">{{ form_obj.publish.errors.0 }}</span>#}
{# </div>#}
{# <div class="form-group">#}
{# <label for="{{ form_obj.authors.id_for_label }}">{{ form_obj.authors.label }}</label>#}
{# {{ form_obj.authors }}#}
{# <span class="text-danger">{{ form_obj.authors.errors.0 }}</span>#}
{# </div>#}
<input type="submit">
</form>
</div>
</div>
</div>
<div>
</div>
</body>
<script src="{% static 'bootstrap-3.3.0-dist/dist/jQuery/jquery-3.1.1.js' %}"></script>
<script src="{% static 'bootstrap-3.3.0-dist/dist/js/bootstrap.min.js' %}"></script>
</html>
show.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'bootstrap-3.3.0-dist/dist/css/bootstrap.min.css' %}">
</head>
<body>
<h1>数据展示</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<table class="table">
<thead>
<tr>
<th>id</th>
<th>title</th>
<th>性别</th>
<th>出版日期</th>
<th>出版社</th>
<th>作者</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for book_obj in book_objs %}
<tr>
<td>{{ book_obj.pk }}</td>
<td>{{ book_obj.title }}</td>
<td>{{ book_obj.get_sex_display }}</td>
<td>{{ book_obj.publishDate|date:'Y-d-m' }}</td>
<td>{{ book_obj.publish.name }}</td>
<td>
{% for author in book_obj.authors.all %}
{{ author.name }}
{% endfor %}
</td>
<td>
<a class="btn btn-warning" href="{% url 'edit_book' book_obj.pk %}">编辑</a>
<a class="btn btn-danger" href="{% url 'delete_book' book_obj.pk %}">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</body>
<script src="{% static 'bootstrap-3.3.0-dist/dist/jQuery/jquery-3.1.1.js' %}"></script>
<script src="{% static 'bootstrap-3.3.0-dist/dist/js/bootstrap.min.js' %}"></script>
</html>
settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'statics'),
]
models.py
from django.db import models
# Create your models here.
from django.db import models
# Create your models here.
class Author(models.Model):
nid = models.AutoField(primary_key=True)
name=models.CharField( max_length=32)
age=models.IntegerField()
authorDetail=models.OneToOneField(to="AuthorDetail",to_field="nid")
def __str__(self):
return self.name
class AuthorDetail(models.Model):
nid = models.AutoField(primary_key=True)
birthday=models.DateField()
telephone=models.BigIntegerField()
addr=models.CharField( max_length=64)
class Publish(models.Model):
nid = models.AutoField(primary_key=True)
name=models.CharField( max_length=32)
city=models.CharField( max_length=32)
email=models.EmailField()
def __str__(self):
return self.name
class Book(models.Model):
nid = models.AutoField(primary_key=True)
title = models.CharField( max_length=32)
sex_choice = (
(1,'男'),
(2,'女'),
)
sex = models.IntegerField(choices=sex_choice,default=1)
publishDate=models.DateField()
price=models.DecimalField(max_digits=5,decimal_places=2)
publish=models.ForeignKey(to="Publish",to_field="nid")
authors=models.ManyToManyField(to='Author',)
def __str__(self):
return self.title
在项目下创建一个名为statics的文件夹，将Bookstrap文件和jQuery.js文件放在该文件夹里面
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Django之Form应用Bootstrap样式 - Python技术站
微信扫一扫 
支付宝扫一扫 