首页 > 其他分享 >为ModelForm自动生成的input框添加BootStrap样式

为ModelForm自动生成的input框添加BootStrap样式

时间:2023-10-19 09:45:41浏览次数:34  
标签:widget BootStrapModelForm BootStrap field attrs input ModelForm class

为了方便管理,我们在/app01/utils下新建bootstrap.py

from django import forms

class BootStrapModelForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 循环找到所有的插件,添加class = "form-control"样式
        for name, field in self.fields.items():
            #字段中有属性,保留原来的属性,没有属性,才增加
            if field.widget.attrs:
                field.widget.attrs["class"] = "form-control"
                field.widget.attrs["placeholder"] = field.label
            else:
                field.widget.attrs = {
                    "class": "form-control",
                    "placeholder": field.label
                }

在视图函数views.py文件中导入我们编写的BootStrapModelForm类

from app01.utils.bootstrap import BootStrapModelForm
我们在视图函数中编写的ModelForm类,就可以直接继承BootStrapModelForm,实现为ModelForm自动生成的input框添加BootStrap样式
class UserModelForm(BootStrapModelForm):
    # 设置更多校验,用户名至少为三个字符
    name = forms.CharField(min_length=3, label="用户名")

    class Meta:
        model = models.UserInfo
        fields = ["name", "password", "age", "acount", "creata_time", "gender", "depart"]

  

 

标签:widget,BootStrapModelForm,BootStrap,field,attrs,input,ModelForm,class
From: https://www.cnblogs.com/kekeeleven/p/17773965.html

相关文章

  • vue中的for循环中,获取input输入框中的值的方法
    1<pv-for="iteminlist":key="item.id">2{{item.topic}}=3<!--<inputtype="text"v-model="item.id"placeholder="请输入答案">-->4......
  • Go - Generating Random Test Inputs for Tests
    Problem: Youwanttogeneraterandomtestdataforrunningyourtestfunctions. Solution: Usefuzzing,whichisanautomatedtestingtechniquetogeneraterandomtestdataforyourtestfunctions. Fuzzing,orfuzztesting,isanautomatedtestingte......
  • input 选择历史值后,输入框变为白背景色
    1input:-webkit-autofill{2-webkit-animation:autofill-fix1sinfinite!important;3-webkit-text-fill-color:#666;4-webkit-transition:background-color50000sease-in-out0s!important;5-webkit-box-shadow:0001000pxtransparen......
  • 修改input元素placeholder字体颜色
    1/*webkit*/2::-webkit-input-placeholder{3color:#ffffff;4}5/*MozillaFirefox4to18*/6:-moz-placeholder{7color:#ffffff;8}9/*MozillaFirefox19+*/10::-moz-placeholder{11color:#ffffff;12}13/*Interne......
  • InputStream类的read()方法返回的int值是如何计算的
    InputStream类有一个read()方法,它的返回类型是int。InputStream类本身是抽象类,它的一些子类的read()方法每次读取一个字节,也就是8个二进制位。比如读到如下二进制数据:111111111以上二进制数据如果按照byte类型来转换,是负数-1。而read()方法会把它先变成32位的二进制数据:000000000......
  • 在java中将InputStream对象转换为File对象(不生成本地文件)
    importorg.apache.commons.io.IOUtils;importjava.io.File;importjava.io.FileOutputStream;importjava.io.IOException;importjava.io.InputStream;publicclassStreamUtil{staticfinalStringPREFIX="stream2file";//前缀字符串定义文件名;必须至少三个字符......
  • uniapp部分浏览器input框设置disabled之后点击事件不生效
    给input设置css属性,外边包个盒子抛出点击事件 .disabled{pointer-events:none;}......
  • BootStrapt iCheck表单美化插件使用方法
    一、特色:1、在不同浏览器(包括ie6+)和设备上都有相同的表现—包括桌面和移动设备2、支持触摸设备—iOS、Android、BlackBerry、WindowsPhone等系统4、方便定制—用HTML和CSS即可为其设置样式(多套皮肤)5、体积小巧—gzip压缩后只有1kb6、25种参数用来......
  • vue框架,input相同标签如何定位-label定位
    一、问题提出:后台前端框架改版,之前是angularjs,现在用vue,导致input标签定位失败,只能定位到第一个input标签,查看后台源代码发现这两个标签是一模一样,如下图:二、问题思考过程1.为什么以前的版本可以定位成功,而现在的就定位不了啦查阅之前版本的这部分定位代码,发现原来的框架是......
  • antd Input 只能输入大于零的正整数
    onChange={(value:any)=>{letval=Number(value);if(val<1){value='';setDeviceNumber('');}else{setDeviceNumber(Number(value.replace(/[^\d]/g,'')));}}}......