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

Видео урок: Создание и форматирование переключателей

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

Теперь я хочу обратить ваше внимание на вопрос "What kind of room are you interested in?" Его очень тяжело читать, потому что все эти переключатели находятся на одной строке. И нам трудно понять, какой опции соответствует тот или иной переключатель. Таким образом, я хочу изменить разметку, чтобы после вопроса про номер каждый из вариантов находился на новой строке. Их всего четыре, так что давайте расположим их вертикально. Итак, давайте перейдем в Sublime Text и начнем со строки 53.

Весь этот вопрос заключен в блок div с классом form-group. Таким образом, мы начинаем на строке 54, где у нас есть тег label. К нему мы добавим класс control-label. Этот класс поможет нам оформить сам вопрос. Затем каждый переключатель мы собираемся заключить в блок div с классом radio. Опять же, этот класс нужен тоже для оформления.

В этом блоке с классом radio будет находиться один тег label, который содержит как сам переключатель - тег input с типом radio, а также подпись для переключателя, в данном случае "Queen bed". И здесь мы закроем наш div. Таким образом, я сделаю то же самое для всех остальных переключателей. А также увеличу для них отступы. Итак, я добавила блок с классом radio вокруг каждого варианта.

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