django前端显示问题
{% load static %}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>eCommerce template By Adobe Dreamweaver</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/eCommerceStyle.css' %}">
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="mainWrapper">
<header>
<!-- This is the header content. It contains Logo and links -->
<!-- <img src="logoImage.png" alt="sample logo"> -->
<!-- Company Logo text -->
<div id="headerLinks"><a href="#" title="Login/Register">登陆/退出</a></div>
</header>
<div id="content">
<section class="sidebar">
<!-- This adds a sidebar with 1 searchbox,2 menusets, each with 4 links -->
<div id="menubar">
<nav class="menu">
<ul>
<!-- List of links under menuset 1 -->
<li>
<a href="#" title="Link">首页</a></li>
<li><a href="#" title="Link">监控网站</a></li>
<li><a href="#" title="Link">博客网站</a></li>
<li><a href="#" title="Link">容器网站</a></li>
<li><a href="http://127.0.0.1:8000/rootuseradd/" title="Link">测试python界面</a></li>
<li class="notimp"><!-- notimp class is applied to remove this link from the tablet and phone views --><a href="#"title="Link"> </a></li>
</ul>
</nav>
<nav class="menu">
<h2>设置 </h2>
<!-- Title for menuset 2 -->
<hr>
<ul>
<!--List of links under menuset 2 -->
<li><a href="#" title="Link">设置 </a></li>
<li class="notimp"><!-- notimp class is applied to remove this link from the tablet and phone views --><a href="#" title="Link">退出</a></li>
</ul>
</nav>
</div>
</section>
<section class="mainContent">
<div class="productRow"><!-- Each product row contains info of 3 elements -->
<article class="productInfo"><!-- Each individual product description -->
<li><a href="http://127.0.0.1:8000/useradd/" title="Link">用户添加</a></li>
<li><a href="http://127.0.0.1:8000/user_add/" title="Link">用户修改</a></li>
<li><a href="http://127.0.0.1:8000/user_add/" title="Link">部门添加</a></li>
<li><a href="http://127.0.0.1:8000/user_add/" title="Link">部门修改</a></li>
</article>
</div>
{%block content %}{% endblock %}
</section>
</div>
<footer>
<!-- This is the footer with default 3 divs -->
<div>
<p>没有数据</p>
</div>
<div>
<p>没有数据</p>
</div>
<div class="footerlinks">
<p><a href="#" title="Link">Link 1 </a></p>
<p><a href="#" title="Link">Link 2</a></p>
<p><a href="#" title="Link">Link 3</a></p>
</div>
</footer>
</div>
</body>
</html>
前端是这样显示的
class Userinfo(forms.ModelForm):
class Meta:
model = models.Userinfo
fields = ["daa", "name","id","age","gen"]
wff = {"name": forms.TextInput(attrs={"class": "form-control"})}
def user_add(request):
form = Userinfo()
return render(request, "user_add.html", {"form":form})
我要怎么修改才能让对应的数据变得美观一点呢 要让数据变得美观，您可以考虑在模板中使用Bootstrap样式，例如在表单元素上添加form-control类来使用Bootstrap的表单样式。
例如，您可以在模板中使用以下方式来渲染表单元素：
<div class="form-group">
{{ form.daa.label_tag }}
{{ form.daa }}
</div>
<div class="form-group">
{{ form.name.label_tag }}
{{ form.name }}
</div>
<div class="form-group">
{{ form.id.label_tag }}
{{ form.id }}
</div>
<div class="form-group">
{{ form.age.label_tag }}
{{ form.age }}
</div>
<div class="form-group">
{{ form.gen.label_tag }}
{{ form.gen }}
</div>
此外，您也可以使用Bootstrap的按钮样式来美化提交按钮：
<button type="submit" class="btn btn-primary">提交</button>
最后，您还可以使用Bootstrap的网格系统来布局表单元素，例如将表单分成两列：
<div class="row">
<div class="col-md-6">
<div class="form-group">
{{ form.daa.label_tag }}
{{ form.daa }}
</div>
<div class="form-group">
{{ form.name.label_tag }}
{{ form.name }}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
{{ form.id.label_tag }}
{{ form.id }}
</div>
<div class="form-group">
{{ form.age.label_tag }}
{{ form.age }}
</div>
<div class="form-group">
{{ form.gen.label_tag }}
{{ form.gen }}
</div>
</div>
</div>
通过这些方法，您可以使用Bootstrap的样式来美化您的表单和提交按钮，使其更加美观。 如果你想让表单变得更美观，可以使用 Bootstrap 的表单样式。在你的 user_add.html 模板中，你可以将表单元素包裹在 Bootstrap 的表单类（如 form-group）中，并为表单元素添加 Bootstrap 的类，如 form-control。这里是一个修改后的例子：
1、首先，确保在你的项目的 settings.py 文件中已经将 'APP_DIRS': True 添加到 'TEMPLATES' 设置中。
2、然后，在你的 user_add.html 文件中，你可以添加以下代码：
{% extends "你的基础模板文件名.html" %} <!-- 用你的实际基础模板文件名替换 -->
{% block content %}
<div class="container">
<h2>用户添加表单</h2>
<form method="post" class="form-horizontal">
{% csrf_token %}
{% for field in form %}
<div class="form-group">
<label for="{{ field.id_for_label }}" class="col-sm-2 control-label">{{ field.label }}</label>
<div class="col-sm-10">
{{ field|add_class:"form-control" }}
{% if field.help_text %}
<span class="help-block">{{ field.help_text }}</span>
{% endif %}
</div>
</div>
{% endfor %}
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</div>
</form>
</div>
{% endblock %}
上面的代码首先扩展了你的基础模板（你需要将 "你的基础模板文件名.html" 替换为实际的文件名）。然后，在 {% block content %} 内容块中，创建了一个使用 Bootstrap 类的表单。
在这个表单中，我们使用了循环遍历所有表单字段，并为每个字段添加了适当的 Bootstrap 类。{{ field|add_class:"form-control" }} 用于将 "form-control" 类添加到每个表单元素。最后，我们添加了一个提交按钮。
现在，你的表单应该看起来更美观了。你可以根据需要进一步自定义样式。不要忘记在你的基础模板中包含 Bootstrap 的 CSS 和 JavaScript 文件。
页:
[1]