将Bootstrap应用于Django的输入表单时的最佳解决方案是什么?

故事梗概

我找到了一种使用Bootstrap的最终形式,来实现“美化标签的方法”。

在阅读 Django 官方教程的同时,我实施了一个输入表单,并尝试了应用 Bootstrap。然而,无论如何,代码总是变得冗长而杂乱。经过一番尝试和错误,我找到了一种更简洁的编写方式,现在向您介绍。

我以前想的和现在不一样的方法

参考「Django模板中无法设置Bootstrap的form-group或form-control」,我尝试对登录表单进行相同操作。
然而,无论如何,标签始终无法应用Bootstrap。

有效的方法

我希望在只使用{{ form }}的地方为Bootstrap指定class,所以我将其分解为{% for item in form %}~{% endfor %}。直到这里,我做的与之前设想的方式并无差异。

重要的是,在”form”中的每个项目中,都包含了“信息丰富得足够”的意思。
DjangoAdmin的页面中包含了可以进行设置的所有项目。
包括数据的ID、显示名称和数据类型,全部都有。
可以使用智能感知来链式指定属性。

讓我們在各個地方散布這個。這樣一來,在Django的管理頁面上進行編輯後,無需更改程式碼,畫面上就會美觀地反映出來。
即使在管理頁面上增減項目,啟用或禁用必填項目,也不需要每次都更改程式碼。
這是多麼巧妙的描述啊。

作为一个Django用户,我还是个菜鸟。
如果有更好的方法,希望能在评论区等地方得到指导。

{% comment %} 以上略 {% endcomment %}
<form method="post" action="{% url 'login' %}" class="form-group">
    {% csrf_token %}
    {% for item in form %}
        <div class="form-group">
            <label for="{{item.id_for_label}}">{{item.label}}</label>
            <input
                type="{{item.field.widget.input_type}}"
                class="form-control"
                {% if item.field.required %}required{% endif %}
                name="{{item.name}}"
                id="{{item.id_for_label}}">
        </div>
    {% endfor %}
    <button type="submit" class="submit btn btn-primary">Login</button>
    <input type="hidden" name="next" value="{{ next }}"/>
</form>
{% comment %} 以下略 {% endcomment %}

表示结果

Inked127.0.0.1_8000_accounts_login_(iPhone 6_7_8) (1)_LI.png

努力尽力了

requiredを付ける付けないのところ
labelタグの関連づけにnameではなく、id_for_labelを使ったところ
input type にも動的指定ができた
結果としてすべて動的な記述ができたこと
マジックナンバー的なハードコーディングがなくなった

由于两个参考文献的字体很糟糕,难以阅读,因此很难找到所需信息。我使用Vscode的调试器来检查了对象的内容。通过这个结果,我提取出了字符串并进行了相应的利用。

我现在意识到只需要更改浏览器的字体设置就可以解决问题,这是我写这篇文章的时候才发现的。

尽管如此,从用户体验的角度来看,让用户自己更改字体设置可能会增加负担,所以我认为应该立即进行更改。

通常情况下,应该仔细阅读库的官方文档并进行实现,但这次正好相反,我先通过调试器发现功能,然后再去阅读每个功能的参考资料。

如何应用Bootstrap

添加Bootstrap的CDN

我参照了这个,只用一行写完了,而且速度快,推荐使用。

模板启动器 | 引导程序

其他方法 (Tā de

使用django-extention貌似还有其他方法。
若想保持尽可能简单的构建,应避免使用,
而若能完全掌控复杂构建,可以尝试挑战。

    • Django フォームにて CSS クラスを設定する方法

 

    • Python Django入門 (4)

 

    • Djangoのフォームデザインを簡単かつ自由にカスタマイズする方法

 

    • django-bootstrap4 | ライブラリ

 

    DjangoでBootstrap4を使う方法

登录页面主体

对我个人而言,在实现功能时以下是最容易理解的。对我很有参考价值。
Django2实现用户认证(登录认证)的教程 -2- 注册和登录/注销

环境

Django 2.2
python 3.8
如果是最新环境的话应该可以使用。

胜任卓越! !)

广告
将在 10 秒后关闭
bannerAds