css – 我如何解决Bootstrap 3的窗体控件类的需要?

我决定第一次尝试Bootstrap 3今晚。我注意到,为了得到认,漂亮的表单字段样式,你需要添加一个窗体控制类到每个输入,textarea,select等。这是一个痛苦的动态生成他们的形式(例如,使用Django)。 Django允许你设置表单字段的属性,但是这样做全局需要一个讨厌的猴子补丁或非干非代码

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

解决方法

你真的应该检查一个Django应用程序,将所有的Django表单作为好的Boostrap表单,只需在模板中使用一个标签

它的名称django-bootstrap3.以下是如何使用它:

>安装django-bootstrap3
>将bootstrap3添加到INSTALLED_APPS:

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

>更新您的模板:

> load bootstrap3
>将您的{{form.as_p}}替换为{%bootstrap3_form form%}

之前:

<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黑客。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效