我正在使用 django 和 bootstrap 開發一個簡單的網站。我使用了 UserCreationForm 類來制作標準注冊頁面。但我想讓文本更暗一點,這樣更清晰,并且與背景影像和蒙版形成良好的對比。最好的解決方案是什么?

查看模塊
def register(request):
#if the request method is a 'get'
#Yes initial data
if request.method != 'POST':
form = UserCreationForm()
#no initial data
#f the request method is a 'post'
else:
form = UserCreationForm(data=request.POST)
if form.is_valid():
new_user=form.save()
authenticated_user = authenticate(username=new_user.username,
password=request.POST['password1'])
login(request, aunthenticated_user)
return HttpResponseRedirect(reverse('my_websites:home'))
context = {'form': form}
return render(request, 'users/register.html', context)
引導程式
{% extends "pages/base.html" %}
{% load bootstrap5 %}
{% block header %}
<div="container my-5">
<div class="bg-image position-relative rounded" style="background:url('https://wallpaperaccess.com/full/1708426.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100vh;">
<div class="mask position-absolute rounded p-4 top-0 end-0 bottom-0 start-0" style="background-color: rgba(251, 251, 251, 0.8);">
<h2 class="text-center display-6"> Register </h2>
<form method="post" action="{% url 'users:register' %}" class="form text-dark" style="max-width: 400px; margin:0 auto;">
{% csrf_token %}
{% bootstrap_form form %}
{% buttons %}
<button name="submit" class="btn btn-dark">Register
</button>
{% endbuttons %}
<input type="hidden" name="next" value="{% url 'my_websites:home' %}" />
</form>
</div>
</div>
</div>
感謝您的時間。
uj5u.com熱心網友回復:
看起來您正在使用 Bootstrap,它預定義了一組可用于顏色的 CSS 類。
嘗試將您的<h2 > Register </h2>標簽更改為<h2 > Register </h2>- 它可能會變成紅色。
該bootstrap_form標簽允許您傳遞引數來控制所應用的 CSS 類屬性。
例如,嘗試:
{% bootstrap_form form field_ %}
有關您可以傳遞的可用引數,請參閱檔案:https ://django-bootstrap-v5.readthedocs.io/en/latest/templatetags.html#bootstrap-field
有關如何在 Bootstrap 中使用顏色的更多資訊,包括定義您自己要使用的顏色主題,請參見此處:https ://getbootstrap.com/docs/5.0/utilities/colors/祝你好運!
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/469351.html
上一篇:自定義警報僅有效一次
