将 css 样式应用于 Django 中的表单项

Posted 2023-02-24

【中文标题】将 css 样式应用于 Django 中的表单项

【英文标题】：Applying css styles to form items in Django

【发布时间】：2016-02-19 05:00:13

【问题描述】：

forms.py 中有如下表格

from django import forms
class LoginForm(forms.Form):
    username = forms.CharField()
    password = forms.CharField(label='Password', widget=forms.PasswordInput)

在我的模板/login.html 文件中，我有以下内容：

% load staticfiles %

<div>
     <form action="" method="post" style="">
            % csrf_token %
             form.as_p 
            <input type="submit" value="SignIn">
     </form>
</div>

我想使用 ui 的引导工具，[http://getbootstrap.com/examples/signin/] 我应该在 login.html 中加载一些 js 和 css 静态文件

当我获得带有模板标签 form.as_p 的表单时，如何将 css 效果应用到我的登录表单？

【参考方案1】：

有一个很棒的包用于自定义表单小部件的显示，称为django-widget-tweaks。该包允许您自定义 css 类和属性。

您可以单独访问每个项目，并使用 render_field 标签添加 css 类，而不是使用 form.as_p。

% load widget_tweaks %

% for field in form %
    % render_field field class+="css_class_1 css_class_2" %
% endfor %

或使用包中包含的自定义过滤器以实现紧凑性：

% load widget_tweaks %

% for field in form %
     field|add_class:"my-css-class" 
% endfor %

或者没有循环：

% load widget_tweaks %

% render_field form.name class+="css_class_1 css_class_2" %
% render_field form.email class+="css_class_1 other_class" %
% render_field form.title class+="css_class_1 css_class_3" %

【参考方案2】：

这在基于类的表单中很容易做到。我的项目中 form-control 是一个 css 类的示例。

from django.forms import ModelForm, TextInput

class ServerForm(ModelForm):

    class Meta:
        model = Server
        fields = ['name', 'ip', 'port']
        widgets = 
            'name': TextInput(attrs='class': 'form-control'),
            'ip': TextInput(attrs='class': "form-control"),
            'port': TextInput(attrs='class': 'form-control'),
            

然后我的模板看起来像：

% for field in form %
    <div class="form-group">
         field.label_tag   field 
    </div>
% endfor %

生成

<form method="POST">
    <input type="hidden" name="csrfmiddlewaretoken" value="xxxxxx">
    <div class="form-group">
        <label for="id_name">Name:</label>
        <input class="form-control" id="id_name" maxlength="64" name="name" type="text">
    </div>
    <div class="form-group">
        <label for="id_ip">Ip:</label>
        <input class="form-control" id="id_ip" maxlength="20" name="ip" type="text">
    </div>
    <div class="form-group">
        <label for="id_port">Port:</label> <input class="form-control" id="id_port" name="port" type="text">
    </div>
    <div class="form-group">
        <button type="submit" class="save btn btn-default">Add/Edit Server</button>
    </div>
</form>

关键是 Meta 类的 widgets 字段。在那里你可以定义你想要使用的 django.forms 中的哪个小部件，然后可以定义你想要的任何属性。这里我们使用“class”并将其参数设置为“form-control”。您可以轻松替换任意数量的 CSS 类，即

'name': TextInput(attrs='class': 'form-control xs my-other-css-class'),

我经常将它与 bootstrap 一起使用，它工作正常，只要您沿线的某个地方导入 bootstrap（从 django-bootstrap 插件，或仅通过基本模板中的静态文件）