如何解决 Bootstrap 3 的表单控件类的需求? [英] How can I work around the need for Bootstrap 3's form-control class?

问题描述

我决定今晚第一次尝试 Bootstrap 3.我注意到，为了获得默认的、漂亮的表单字段样式，您需要为每个输入、文本区域、选择等添加一个 form-control 类.这对于那些动态的人来说是一种痛苦生成它们的表单(例如，使用 Django).Django 允许您设置表单字段的属性，但要在全局范围内设置，则需要一个讨厌的猴子补丁或非常非 DRY 的代码.

1. 有没有办法避免这个类的要求，仍然保留基本的表单字段样式?
2. 有没有一种快速的方法(最好是非 JS)来解决这个问题?

解决方案

您确实应该检查一个 Django 应用程序，该应用程序将您的所有 Django 表单呈现为漂亮的 Boostrap 表单，只需在您的模板中使用一个标签即可.

它的名字是 django-bootstrap3.使用方法如下:

1. 安装 django-bootstrap3

2. 将 bootstrap3 添加到您的 INSTALLED_APPS:

   INSTALLED_APPS = (...'引导3'，...)

3. 更新您的模板:

   1. 加载bootstrap3
   2. 将您的 {{form.as_p}} 替换为 {% bootstrap3_form form %}

之前:

{% csrf_token %}{{ form.as_p }}<div class="actions form-actions"><button type="submit" class="btn btn-primary">保存

</表单>

之后:

{% 扩展 "base.html" %}{% 加载 bootstrap3 %}<form method="post" class="form-horizo​​ntal" action="" ><div class="隐藏桌面"><button type="submit" class="btn btn-primary">{% bootstrap_icon "ok" %} 保存</button>

{% csrf_token %}{% bootstrap_form 表单 %}<div class="actions form-actions"><button type="submit" class="btn btn-primary">{% bootstrap_icon "ok" %} 保存</button>

没有别的事可做.在你的表格中没有什么要更新的.没有 JavaScript 黑客.

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. 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?

解决方案

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.

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

1. Install django-bootstrap3

2. Add bootstrap3 to your INSTALLED_APPS:

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

3. Update your template:

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

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>

after:

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

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

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