[已解决]django前端显示问题

tengke · 发表于 2023-4-14 18:14:47

{% 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>


   
<div id="headerLinks"><a href="#" title="Login/Register">登陆/退出</a></div>

  </header>

  <div id="content">
<section class="sidebar">
   
   <div id="menubar">
      <nav class="menu">
<ul>
         
         <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"><a href="#"  title="Link"> </a></li>
      </ul>
      </nav>
      <nav class="menu">
      <h2>设置 </h2>
      
      <hr>
      <ul>
         
         <li><a href="#" title="Link">设置 </a></li>
         <li class="notimp"><a href="#" title="Link">退出</a></li>
      </ul>
      </nav>
   </div>
</section>
<section class="mainContent">
   <div class="productRow">
      <article class="productInfo">
         <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>

<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})

我要怎么修改才能让对应的数据变得美观一点呢

最佳答案

月排行榜 / 总排行榜

陶远航

2023-4-14 18:14:48

要让数据变得美观，您可以考虑在模板中使用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的样式来美化您的表单和提交按钮，使其更加美观。

跳转到最佳答案楼层

陶远航 · 发表于 2023-4-14 18:14:48

要让数据变得美观，您可以考虑在模板中使用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的样式来美化您的表单和提交按钮，使其更加美观。

isdkz · 发表于 2023-4-14 18:18:25

如果你想让表单变得更美观，可以使用 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 文件。

账号		自动登录	找回密码
密码			立即注册

[已解决]django前端显示问题

最佳答案

浏览过的版块