Предыдущий ролик Следующий ролик  

Видео урок: Добавление флажка и улучшение юзабилити при помощи collapse

Bootstrap 3: добавь интерактивность на свой сайт

Итак, теперь нам осталось настроить только одну форму, которая находится внизу страницы, где мы видим текст "Subscribe me to the newsletter". Итак, в идеале я бы хотела, чтобы здесь отображался только флажок для подписки на новостную рассылку, и только когда он будет отмечен, я хочу видеть поле для адреса электронной почты. Мне не нужно, чтобы на этой странице все время отображалось поле для почты. На самом деле я хочу, чтобы его не было видно до тех пор, пока не будет отмечен флажок для подписки на рассылку.

Вот такую функциональность я хочу сюда добавить. Еще кое-что, что не помешает здесь сделать, - это отформатировать кнопку "Submit", что будет относительно легко. Я надеюсь, вы уже знаете, как это сделать, и мне даже не придется вам ничего показывать. ОК. Давайте вернемся в Sublime Text, На строке 106 вы увидите блок с классом form-group, который заканчивается на строке 112. Внутри него у нас есть флажок с меткой "Subscribe me to the newsletter", а также метка с текстом "Your email" и поле для ввода адреса электронной почты.

Этот блок с классом form-group я добавила сюда только для того, чтобы показать вам, где находятся виджеты, с которыми мы собираемся работать. Но на самом деле он не должен был здесь находиться. Поэтому теперь я хочу, чтобы вы вырезали этот блок с классом form group и переместили его на строку 110. Таким образом, он будет содержать элементы для ввода электронной почты.

Метку "Your email" и текстовое поле ввода с именем "email". Теперь вернемся к строкам 107 и 108, где у нас находится сам флажок. Давайте его отформатируем. Итак, в первую очередь это метка для поля "Subscribe". Так мы свяжем эти два тега, потому что, конечно, имя элемента ввода - "Subscribe". Затем мы присвоим метке класс checkbox-inline.

В этом случае флажок будет появляться в одной строке с меткой. Таким образом, теперь внешний вид и функциональность нашего флажка должны быть настроены правильно. Если вы сохраните страницу, вернетесь в браузер и нажмете "Обновить", то увидите, что он выглядит уже лучше. Вот наш флажок с меткой "Subscribe me to the newsletter". ОК, это наша базовая разметка для данного элемента. Теперь давайте добавим код, чтобы отображать и скрывать поле для электронной почты. Итак, чтобы эта функция заработала, нам нужно изменить вот эту строку с тегом input.

Таким образом, на строке 108, внутри тега input, мы добавим две вещи. Атрибут data-toggle со значением collapse. С его помощью мы скрываем это поле. А затем атрибут data-target со значением #email. Итак, это первая часть нужного нам кода. Здесь мы указали, что, когда этот флажок будет отмечен, поле для электронной почты должно появляться на странице. ОК. Теперь давайте отформатируем это поле.

Как и раньше, мы добавим сюда следующий код. На строке 111 в теге label мы добавим атрибут for со значением email, потому что, конечно, эта метка относится к полю ввода с именем "email". И мы также добавим табличный стиль вроде тех, которые мы применяли раньше. Чтобы этот элемент соответствовал другим элементам на странице, мы добавим class col-sm-2. Он отформатирует надпись "Your email". Затем мы заключим наше текстовое поле в блок div с классом col-sm-10, и закроем его здесь.

Также на строке 113, где у нас есть текстовое поле с именем "email", мы добавим класс form-control, просто чтобы оно выглядело немного лучше. Итак, если мы сейчас сохраним то, что у нас есть, и обновим страницу, то вот наше поле для электронной почты. Оно отформатировано так же, как и поле для имени. Сейчас, конечно, еще ничего не происходит. Я могу сколько угодно кликать по этому флажку, но поле для почты никуда не исчезает и не появляется. Таким образом, нам осталось добавить еще несколько строк кода. Сейчас мы собираемся добавить несколько дополнительных классов здесь, на строке 110. Этот блок содержит метку "Your email", которая находится на строке 111, а также само поле для ввода электронной почты. Мы добавим сюда еще два класса - collapse и in. Мы также присвоим этому блоку идентификатор email. Этот идентификатор email будет работать с атрибутом data-target, который содержит значение #email, и таким образом реализует нужную нам функциональность. И последнее, что мы должны сделать, - это добавить функцию collapse, которая будет отслеживать изменения и активироваться, когда флажок будет установлен или снят.

Затем мы перейдем вниз страницы. Здесь у нас уже есть строка кода для функции tooltip. Мы добавим еще один блок кода на новой строке. Опять же, формат этого кода будет всегда одним и тем же. Как я уже говорила, вы выбираете какой-нибудь элемент и что-нибудь с ним делаете. Таким образом, мы добавляем селектор и применяем к нему функцию collapse, чтобы свернуть его. Она не будет принимать никаких аргументов. Итак, что же нам выбрать? Если вы вернетесь к коду выше, то увидите, что к этому конкретному блоку на строке 110 применен класс form-group, который используется во многих других блоках, а также класс collapse.

Давайте использовать их вместе. Они дадут нам уникальный идентификатор. Таким образом, .form-group и .collapse. Не разделяйте их пробелами, потому что без пробелов эта запись будет означать, что к элементу должны быть применены оба класса - как form-group, так и collapse. Если вы поставите пробел между ними и запишите ".form-group пробел .collapse", это будет значить, что нам нужен класс collapse, который находится внутри какого-нибудь селектора или тега HTML с классом form-group.

ОК, и это весь код, который нам понадобится. Сохраните страницу. Теперь, когда мы вернемся в браузер и нажмем "Обновить", вы должны увидеть только флажок "Subscribe me to the newsletter". И когда вы его отметите, у вас должно появиться поле для электронной почты. Когда вы снимите флажок, это поле должно исчезнуть. ОК, все выглядит довольно хорошо, за исключением кнопки "Submit", которая скачет вверх-вниз, когда мы отмечаем и снимаем флажок. Давайте исправим эту маленькую проблему.

Она находится в самом конце документа. Итак, вот наша кнопка с типом Submit. Мы опять заключим ее в блок div с классом form-group. И конечно, после тега кнопки мы закроем блок. И даже выровняем отступы, чтобы код немного легче читался. Вот так. К тегу button с типом Submit мы также добавим несколько классов. Класс btn, который всегда требуется для форматирования кнопок в Bootstrap, и btn-primary.

Он применит фиолетовый цвет вместо голубого, что мы настроили в предыдущих видео, так что у нас получится красивая кнопка "Submit". Итак, сохраните страницу и обновите ее в браузере еще раз. Теперь кнопка "Submit" будет расположена на отдельной строке. Вы сможете отмечать и снимать этот флажок, отображать и скрывать поле для электронной почты, и кнопка "Submit" будет находиться здесь, внизу. Если хотите, вы можете уменьшить размер экрана, и убедиться, что все гладко работает и при меньших размерах.

Отлично. Итак, наша форма обратной связи выглядит совсем неплохо. Все элементы у нас на месте, и к ним применены базовые стили. Теперь пришло время решить несколько маленьких, но надоедливых проблем.