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

Видео урок: Создание и форматирование выпадающего меню с выборкой

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

ОК. Теперь, когда мы отформатировали все наши переключатели и вопросы, мы можем перейти к выпадающему списку континентов. Выпадающие списки - отличный способ организации более длинного набора вариантов. Они особенно удобны в тех случаях, когда люди сразу будут знать, как они ответят на вопрос, прежде чем раскроют этот длинный список. Обычно пользователи знают, на каком континенте они находятся, так что им будет просто выбрать ответ из выпадающего списка. Итак, мы вернемся в Sublime Text и перейдем к строке 89. Здесь начинается блок div с классом form-group, который содержит тег select с данным списком. И нам нужно внести в него некоторые изменения. Итак, на 90-й строке у нас есть тег label. Мы добавим к нему атрибут for со значением continent, соответствующим имени, которое присвоено тегу select. Затем мы добавим к нему класс control-label. Таким образом, метка "Your continent" будет расположена на одной строке, а сам список - на следующей.

И чтобы аккуратно все завершить, мы добавим к тегу select c названием "continent" класс form-control. Далее у нас следует ряд опций, с которыми нам не нужно ничего делать. Итак, давайте сохраним эту страницу, вернемся в браузер и нажмем "Обновить". Теперь выпадающий список под меткой "Your continent" должен быть растянут на всю страницу. Не забывайте, что по мере уменьшения страницы классы form-control будут изменять размеры элементов.

Но это мы рассмотрим в следующем видео.