设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Python交流 › django前端显示问题
返回列表 发新帖
查看: 1118|回复: 2

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

[复制链接]
tengke
发表于 2023-4-14 18:14:47 | 显示全部楼层 |阅读模式
5鱼币
{% 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">&nbsp;</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">设置&nbsp;</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>




1681467219014.jpg
前端是这样显示的

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的样式来美化您的表单和提交按钮，使其更加美观。

最佳答案

陶远航

查看完整内容

要让数据变得美观，您可以考虑在模板中使用Bootstrap样式，例如在表单元素上添加form-control类来使用Bootstrap的表单样式。 例如，您可以在模板中使用以下方式来渲染表单元素： 此外，您也可以使用Bootstrap的按钮样式来美化提交按钮： 最后，您还可以使用Bootstrap的网格系统来布局表单元素，例如将表单分成两列： 通过这些方法，您可以使用Bootstrap的样式来美化您的表单和提交按钮，使其更加美观。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

陶远航
发表于 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的样式来美化您的表单和提交按钮，使其更加美观。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

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 文件。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-9-23 17:15

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表