python - 在 Python 文件 .py 中 Bootstrap

Question

我有一个简单的问题，我怎样才能让这个无聊/普通的领域有了 bootstrap 的生命力？我的网站已经有 Bootstrap ，它通过 base.html(模板文件)在我的 .html 文件中，但我不确定如何使这些字段具有 Bootstrap 。如果能得到社区的帮助，那就太好了。如果我应该包含任何内容，请告诉我。 演示站点:http://toolshare-daraghmeh.herokuapp.com/

Python 文件:

class LogInForm(forms.Form):

    username = forms.CharField(label='Username', max_length=10)
    password = forms.CharField(label='Password', max_length=20, widget=forms.PasswordInput())

HTML 文件:

{% extends 'base.html' %}


{% block content %}
<div class="jumbotron">
<h1><font size="275">Log In</font></h1>
</div>
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}

{% if not isUserLoggedIn %}
<div class="alert alert-success alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Wanting to Test?!</strong><br>
  Username: king<br>
  Password: test123
  </div>
{% if loggedIn %}

<div class="alert alert-info" role="alert">

Congratulations, you've logged in! Now redirecting you to the homepage...
</div>
<meta http-equiv="refresh" content="3;url=http://localhost:8000/">
{% else %}

<form class="form-horizontal" name="LoginForm" method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <div class="col-md-6 column">
    <button class="btn btn-primary btn-xlarge" type="submit">Sign In</button>
    </div>
</form>
<div class="col-md-6 column">
<form action="../../"><button class="btn btn-danger btn-xlarge" type="submit">Cancel</button>
</div>
{% endif %}
{% else %}
<div class="alert alert-warning" role="alert">
You're already logged in!
</div>

{% endif %}
{% endblock %}</form>

照片: 提前致谢

希望将基本字段变成 Bootstrap 输入组，以便为​​我的网站设计更多样式。

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

Answer 1

有两种方法可以实现:

1) 使用第三方库，例如django-bootstrap3 :

{% load bootstrap3 %}
...
<form class="form-horizontal" name="LoginForm" method="post">
    {% csrf_token %}
    {% bootstrap_form form %}
    {% buttons %}
        <button type="submit" class="btn btn-primary">
            {% bootstrap_icon "star" %} Sign In
        </button>
    {% endbuttons %}
</form>

PS:不要忘记将应用程序 bootstrap3 添加到 settings.py 中的 INSTALLED_APPS，否则它将无法运行。

2) 手动呈现您的表单域:

<form class="form-horizontal" name="LoginForm" method="post">
    {% csrf_token %}
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">@</span>
        <input name="{{ form.username.html_name}}" type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    </div>
    ...
</form>

请注意，在方法 (2) 中，您还需要手动处理表单和字段错误。参见 docs了解详情。