当前位置: 首页 > 面试题库 >

引导样式应用于Django表单

端木元青
2023-03-14
问题内容

我想使用引导程序来获得不错的网站设计,但是不幸的是,我不知道表单字段的样式。我在说这个:

<form class="form-horizontal" method="POST" action="."> {% csrf_token %}
  {{ form.title.label }}
  {{ form.title }}
</form>

应该如何设计呢?我尝试了这个:

<form class="form-horizontal" method="POST" action="."> {% csrf_token %}
  <div class="form-control">
    {{ form.title.label }}
    {{ form.title }}
  </div>
</form>

这显然没有给我想要的结果。

如何将引导样式应用于Django表单?


问题答案:

如果你不想使用第三方工具,那么从本质上讲,你需要向类中添加属性,我更喜欢通过使模型表单继承自一个基类来实现。

class BootstrapModelForm(ModelForm):
    def __init__(self, *args, **kwargs):
        super(BootstrapModelForm, self).__init__(*args, **kwargs)
        for field in iter(self.fields):
            self.fields[field].widget.attrs.update({
                'class': 'form-control'
            })

可以轻松调整…但是如你所见,我所有的字段小部件都已应用了表单控件css类

你可以根据需要将其扩展到特定的字段,这是一个继承的表格示例,该表格应用了属性

class MyForm(BootstrapModelForm):
    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['name'].widget.attrs.update({'placeholder': 'Enter a name'})


 类似资料:
  • 我对Angular很陌生,我正在尝试使用Angular和Bootstrap 4创建一个注册表单。 我想要的结果是使用Bootstrap的样式和Angular的验证。更准确地说,在验证表单时,Angular在两个不同的地方应用样式(ng-valid、ng-invalid等):input元素和form元素。 我使用的是反应形式,我想避免这样的事情(未测试): 有没有一个简单的方法(不是太冗长)来实现这

  • 有没有一种方法可以将样式化组件与React-Bootstrap一起使用?react-bootstrap为组件公开属性,而不是,这似乎与样式化组件不兼容。 有什么经历吗?

  • 问题内容: 我想样式如下: forms.py: contact_form.html: 例如,如何设置一个类或ID为subject,email,message以提供外部样式表到? 问题答案: 摘自我的答案: 如何在Django中使用 标记表单字段 要么 要么 以上是对完成所要询问内容的原始问题的代码进行的最简单的更改。如果你在其他地方重复使用表格,也可以避免重复。如果你使用Django的as_tab

  • 我想将css样式(链接如下)应用到我的模板中的Django boolean表单。https://proto.io/freebies/onoff/ 我做了这样的事。该样式应用于复选框,但复选框不会将状态“OFF”更改为“ON”。(当我点击它时,它不会做任何事情) 有人能告诉我如何更有效地将css样式应用于Django表单吗? 非常感谢。

  • 有人知道如何用Rails引导(SCSS)以简单的形式将CSS样式放在标签上吗? 谢谢。