Как я могу обойти потребность в классе контроля формы Bootstrap 3?

Ответ 1

Вы действительно должны проверить приложение 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-хаков.

Ответ 2

Я задавался вопросом, почему первый ответ получил ниже. Я нашел свой ответ о form-group вместо класса form-control. Класс form-control добавляет много правил CSS.

Вы должны сначала попытаться контролировать вывод своей формы: fooobar.com/questions/100683/...

Если вы не можете, вы можете попробовать то же самое, что и ниже. Применяйте те же правила к своим входам вместо form-control, например:

input {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

Меньше

С LESS > 1.4 вы можете использовать :extend(), см. fooobar.com/questions/26388/.... Вы можете использовать это для вышесказанного, добавив правило к вашим меньшим файлам:

input {
  &:extend(.form-control all);
}

Также смотрите: Почему Grunt/Recess выдает ошибку и Lessc не при компиляции Bootstrap 3 RC1?

form-group является контейнером-div вокруг ваших конструкций ввода/метки, он добавляет только margin-bottom: 15px;. Вы можете строить свои формы без него. По этой причине это не требуется.

С помощью css вы можете сделать некоторые обходные пути. Я не думаю, что вы всегда можете избежать Javascript. Я не знаю HTML-структуры ваших форм Django. Я использовал форму примера из http://getbootstrap.com/css/#forms и разделил контейнеры form-control. Тогда я "исправить" различия. ПРИМЕЧАНИЕ. Я также добавляю тег <br> перед кнопкой отправки.

Смотрите: http://bootply.com/73370

1) form-group добавляет margin-bottom: 15px;, чтобы исправить это. Я добавляю это поле во входные теги:

input {
    margin-bottom: 15px; }

Это действие принимает флажок (и радио). Bootstrap CSS определяет input[type="radio"], input[type="checkbox"] { line-height: normal; margin: 4px 0 0; }, который перегружает (вызванный спецификацией CSS, см.: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/) css для ввода выше.

Таким образом, последнее правило будет:

input, input[type="checkbox"]  {
    margin-bottom: 15px;
}

2) ярлык флажка также отличается. ПРИМЕЧАНИЕ. Флажок не имеет окружения form-control, но a checkbox вместо этого. Правилами CSS для текста меток являются: .radio label, .checkbox label { cursor: pointer; display: inline; font-weight: normal; margin-bottom: 0; } В этом случае вы не можете использовать только CSS (метка является родительским элементом ввода, и в CSS нет родительского селектора, см. Есть ли родительский селектор CSS?). С помощью jQuery вы можете выбрать метку и добавить класс:

$('input[type="checkbox"]').parent("label").addClass('checkboxlabel');

Теперь добавьте этот класс в свой CSS с теми же правилами, что и .checkbox label:

.checkboxlabel
{
    cursor: pointer;
    display: inline;
    font-weight: normal;
    margin-bottom: 0;
} 

Теперь обе формы выглядят в основном одинаково, я думаю:

Забастовкa > Также читайте: Django Forms и Bootstrap - классы CSS и <divs>

Ответ 3

Одна вещь, которую я сделал, это создать mixin, который добавляет класс form-control к каждому виджету.

class BootStrap3FormControlMixin(object):
    def __init__(self, *args, **kwargs):
        super(BootStrap3FormControlMixin, self).__init__(*args, **kwargs)

        for field in self.fields.values():
            _class = field.widget.attrs.get('class', '')
            field.widget.attrs.update({'class': u'%s %s' % (_class, 'form-control',)})