我如何解决Bootstrap 3的窗体控制类的需要？ [英] How can I work around the need for Bootstrap 3's form-control class?

问题描述

我决定第一次尝试Bootstrap 3今晚。我注意到，为了得到默认，漂亮的表单字段样式，你需要为每个输入，textarea，select等添加一个 form-control 类。这是对于那些动态生成其形式（例如，使用Django）的人来说是一种痛苦。 Django允许你设置表单字段的属性，但是要这样做，全局将需要一个讨厌的猴子补丁或其他非干性代码。

I decided to try out Bootstrap 3 tonight for the first time. I noticed that, in order to get the default, pretty form field styling, you need to add a form-control class to each input, textarea, select, etc. This is a pain for those who dynamically generate their forms (e.g., using Django). Django allows you to set attributes of form fields, but to do so globally would require a nasty monkey patch or else very non-DRY code.

1. 有没有办法避免这个类的要求，仍然保留基本的形式字段样式？


2. 是否有一个快速的方法（最好是非JS）解决这个问题？ li>
   

1. Is there a way to avoid the requirement of this class, still retaining the basic form field styles?
2. Is there a quick way (preferably non-JS) to address this otherwise?

推荐答案

你真的应该检查一个Django应用程序，将所有的Django表单作为好的Boostrap表单，

You realy should check a Django app that render all your Django forms as nice Boostrap forms, simply by using a tag in your template.

它的名称是 django-bootstrap3 。以下是使用方法：

Its name is django-bootstrap3. Here's how you use it:

1. 安装django-bootstrap3



2. 添加 bootstrap3 到您的 INSTALLED_APPS ：

INSTALLED_APPS = (
    ...
    'bootstrap3',
    ...
)

更新您的范本：

Update your template:

1. load bootstrap3

2. 将 {{form.as_p}} 替换为 {％bootstrap3_form form％ }



1. load bootstrap3
2. replace your {{form.as_p}} to {% bootstrap3_form form %}

b
$ b

before:

<form method="post" class="form-horizontal" action="" >
    <div class="hidden-desktop">
      <button type="submit" class="btn btn-primary"> Save</button>
    </div>
    {% csrf_token %}
    {{ form.as_p }}
    <div class="actions form-actions">
      <button type="submit" class="btn btn-primary"> Save</button>
    </div>
 </form>

之后：

{% extends "base.html" %} 
{% load bootstrap3 %}

<form method="post" class="form-horizontal" action="" >
  <div class="hidden-desktop">
    <button type="submit" class="btn btn-primary">{% bootstrap_icon "ok" %} Save</button>
  </div>
  {% csrf_token %}
  {% bootstrap_form form  %}
  <div class="actions form-actions">
    <button type="submit" class="btn btn-primary">{% bootstrap_icon "ok" %} Save</button>
  </div>

没有任何更新在你形成。没有JavaScript黑客。

Nothing else to do. Nothing to update in you form. No JavaScript hacks.

这篇关于我如何解决Bootstrap 3的窗体控制类的需要？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！