django-crispy-forms入门指南
django-crispy-forms 是对django form在html页面呈现方式进行管理的一个第三方插件。
配置: 在INSTALLED_APPS中加入'crispy_forms'
django-crispy-forms可以选择四种css库,分别是bootstrap,bootstrap3,uni-from以及foundation,当你选定一种后,你需要在settings.py中设置,例如
CRISPY_TEMPLATE_PACK = 'bootstrap'
django-crispy-forms不再将静态的css以及js文件包括进来,需要自己去下载,并将其放入你的静态文件夹里。
一个model实例:
class MessageForm(forms.Form):
text_input = forms.CharField()
textarea = forms.CharField(
widget = forms.Textarea(),
)
radio_buttons = forms.ChoiceField(
choices = (
('option_one', "Option one is this and that be sure to include why it's great"),
('option_two', "Option two can is something else and selecting it will deselect option one")
),
widget = forms.RadioSelect,
initial = 'option_two',
)
checkboxes = forms.MultipleChoiceField(
choices = (
('option_one', "Option one is this and that be sure to include why it's great"),
('option_two', 'Option two can also be checked and included in form results'),
('option_three', 'Option three can yes, you guessed it also be checked and included in form results')
),
initial = 'option_one',
widget = forms.CheckboxSelectMultiple,
help_text = "<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.",
)
appended_text = forms.CharField(
help_text = "Here's more help text"
)
prepended_text = forms.CharField()
prepended_text_two = forms.CharField()
multicolon_select = forms.MultipleChoiceField(
choices = (('1', '1'), ('2', '2'), ('3', '3'), ('4', '4'), ('5', '5')),
)
helper = FormHelper()
helper.form_class = 'form-horizontal'
helper.layout = Layout(
Field('text_input', css_class='input-xlarge'),
Field('textarea', rows="3", css_class='input-xlarge'),
'radio_buttons',
Field('checkboxes', style="background: #FAFAFA; padding: 10px;"),
AppendedText('appended_text', '.00'),
PrependedText('prepended_text', '<input type="checkbox" checked="checked" value="" id="" name="">', active=True),
PrependedText('prepended_text_two', '@'),
'multicolon_select',
FormActions(
Submit('save_changes', 'Save changes', css_class="btn-primary"),
Submit('cancel', 'Cancel'),
)
)
在Html中使用:
{% load crispy_forms_tags %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/static/media/css/bootstrap.min.css" type="text/css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
{% crispy form %}
</body>
</html>
效果图:
django-crispy-forms入门指南的更多相关文章
- 完整的Django入门指南学习笔记4
前言 这一章节将会全面介绍 Django 的身份认证系统,我们将实现注册.登录.注销.密码重置和密码修改的整套流程. 同时你还会了解到如何保护某些试图以防未授权的用户访问,以及如何访问已登录用户的个人 ...
- 完整的Django入门指南学习笔记3
前言 在本节课中,我们将深入理解两个基本概念: URLs 和 Forms.在这个过程中,我们还将学习其它很多概念,如创建可重用模板和安装第三方库.同时我们还将编写大量单元测试. 如果你是从这个系列教程 ...
- Flume NG Getting Started(Flume NG 新手入门指南)
Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...
- Webpack 入门指南 - 3. Hello, Angular2!
Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次,我们使用 Webpack 来打包 Angular 2 的应用. 与官方的 Hello, Angular 2 项目 ...
- [转载]TFS入门指南
[原文发表地址] Tutorial: Getting Started with TFS in VS2010 [原文发表时间] Wednesday, October 21, 2009 1:00 PM 本 ...
- Microsoft Orleans 之 入门指南
Microsoft Orleans 在.net用简单方法构建高并发.分布式的大型应用程序框架. 原文:http://dotnet.github.io/orleans/ 在线文档:http://dotn ...
- django rest framework 入门
django rest framework 入门1-序列化 Serialization 分类: Python 2013-01-22 22:24 11528人阅读 评论(0) 收藏 举报 djangop ...
- 教程:VS2010 之TFS入门指南(转载)
[原文发表地址] Tutorial: Getting Started with TFS in VS2010 [原文发表时间] Wednesday, October 21, 2009 1:00 PM 本 ...
- Web API 入门指南 - 闲话安全
Web API入门指南有些朋友回复问了些安全方面的问题,安全方面可以写的东西实在太多了,这里尽量围绕着Web API的安全性来展开,介绍一些安全的基本概念,常见安全隐患.相关的防御技巧以及Web AP ...
- Vue.js 入门指南之“前传”(含sublime text 3 配置)
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...
随机推荐
- python自学笔记(三)python基本数据类型之列表list
列表list特性概括 1.有序集合 2.通过偏移来索引,从而读取数据 3.支持嵌套 4.可变的类型(dict 字典也是可变的) (1)切片 a = [1,2,3,4,5,6,7] 正向索引 a[0:4 ...
- KVO 的使用和举例
KVO(key-value Observer),通过命名可以联想到,一个监视着监视着键值配对,让一个对象A来监视另一个对象B中的键值,一旦B中的受监视键所对应的值发生了变化,对象A会进入一个回调函数, ...
- VS2010/MFC对话框:非模态对话框的创建及显示
非模态对话框的创建及显示 上一节讲了模态对话框及其弹出过程,本节接着讲另一种对话框--非模态对话框的创建及显示. 已经说过,非模态对话框显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切 ...
- Tree(未解决。。。)
Tree Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submi ...
- 外网訪问内网应用实现之无公网IP、多port、固定port、UDP等应用的实现方法
有公网IP时,能够通过路由映射来实现外网訪问内网.然,当没有公网IP时,怎样实现外网訪问内网应用? 硬件路由方法因为无公网不可行,能够使用软件port映射的方法.如开放的NAT123全port映射. ...
- Android JNI入门第五篇——基本数据类型使用
前面讲到了java和native数据类型,这里就开始做一下使用: 第一步:新建工程 第二部:书写 java方法: public class NativeMethod { static { System ...
- poj2486 Apple Tree【区间dp】
转载请注明出处,谢谢:http://www.cnblogs.com/KirisameMarisa/p/4374766.html ---by 墨染之樱花 [题目链接]http://poj.org/p ...
- ASP.NET 母版页和内容页的加载顺序
Master 模板页Content 内容页如果希望Master页面的数据传给Content页面,请Init如果希望Content页面的数据传给Master页面,请重载Load具体细节不多说了,看下面页 ...
- BlogUI的使用
- javascript对象属性——数据属性和访问器属性
ECMA-262第五版在定义时,描述了属性property的各种特征,定义这些特性是为了实现javascript引擎用的,为了表示该特性是内部值,规范把它们放在了两对儿方括号中,例如[[Enumera ...