Django Bootstrap toolkit

Stella981
• 阅读 689

#背景#

bootstrap为前端的快速开发提供了一个很好的框架;Django则为后端的快速提供了全方位的支持,但是需要自己负责实现前端的视觉部分。一前一后两个框架正好可以结合构建一套完整的开发方案出来。

常规的界面,可以在Django的模板中,直接使用bootstrap的组件、类等工具编写即可。涉及到需要进行表单处理的部分,尤其是涉及到诸如后台等不需要特别美化,而又需要快速开发的部分,这种手工编码的方式显得就有点儿无法接受。

我们知道借助Django的form和widget功能,开发者几乎无需手工编写表单代码,Django会自动按照我们在form(及model)定义的表单结构,自动生成最终的html代码。对于开发者来说,这是一个极大的福音!我们希望在结合bootstrap和Django时不要失去这种优势。

Django Bootstrap Toolkit正是结合两者优势的有力工具。

#简介#

Django Bootstrap ToolKit(DBT) 已经发布到pypi,其安装及简单使用方法可见官网。本文对此工具提供的功能做一简单介绍。

##标签(tag)##

使用bootstrap需要引入其样式表和/或其js库。DBT提供了一组标签方便开发者完成此项工作。 当然此工具是从bootstrap的源码库中直接引入,如果想从其他地方引入,可以不使用此组标签。

  • bootstrap_stylesheet_url 输出样式表的url。bootstrap版本库中的样式表地址。

  • bootstrap_stylesheet_tag 输出引入样式表的代码。<link rel="stylesheet" href="...">

  • bootstrap_javascript_url 输出js的url。bootstrap版本库中的js地址。

  • bootstrap_javascript_tag 输出引入js的代码。 <script src="..."></script>

  • active_url 如果当前url与给定url相同则输出output参数的值(默认active)。常用于设置当前菜单高亮等场景。 调用示例:{% active_url request,'/home'

##filter##

借助DBT提供的非常有限的几个过滤器(filter)即可实现前面提到的快速开发的需求。

  • as_bootstrap 按照bootstrap的规范生成表单或者字段。调用示例:

渲染整个表单: {{ form|as_bootstrap}} 或渲染单个字段:``{{ form.field|as_bootstrap}}`

  • is_disabled 如果字段不可编辑或者其widget包含readonly、diabled属性,则返回True

  • is_enabled 与is_disabled相反

  • bootstrap_input_type 输出input的类型

  • pagination 生成bootstrap样式的分页。调用示例:

    {% if is_paginated %}
        {{ page_obj|pagination }}
    {% endif %}
    
  • split 以给定分隔符分割字符串

widget

DBT提供了4个widget,不但提供了对bootstrap特有输入样式(如prepend)的支持,还引入了一个新的datepicker插件方便日期的输入。

  • BootstrapUneditableInput 不可编辑字段

  • BootstrapTextInput 可以增加前缀,后缀的输入控件。调用示例:

    prepended = forms.CharField(
        max_length=100,
        help_text=u'I am prepended by a P',
        widget=BootstrapTextInput(prepend='P'),
    )
    
  • BootstrapPasswordInput 可以增加前缀、后缀的密码输入控件

  • BootstrapDateInput 日期输入控件

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
002SilverFox的介绍(01)
SilverFox的介绍01SilverFox基于KBEngine原有的webconsole开发,保留功能性,重写后端Django代码,前端页面更换为更优雅的Bootstrap创建KBEngine管理账户Django启动完毕,在浏览器里面输入http://127.0.0.1:8
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这