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

Видео урок: Решение задачи по стилизации формы

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

Итак, как вы справились с последней задачей? Перед вами решение, которое я выбрала для этой конкретной формы. Конечно, любую задачу можно решить разными способами, поэтому вы могли реализовать что-то другое. Отформатировать страницу тоже можно разными способами, но те две проблемы, которые я перед вами поставила, можно решить следующим образом. Итак, как видите, сейчас у метки "Your name" нет никаких лишних отступов. У нас есть четкая левая граница формы по всей странице. И если вы отметите флажок для подписки на рассылку, ниже появится поле "Your email" тоже без лишних отступов.

Все выглядит очень красиво и чисто. У нас также появилось немного больше пространства вокруг полей "Your name" и "Your email". Здесь оно расположено не так близко к кнопке. И если вы начнете уменьшать эту страницу, то по мере того, как она будет становиться все меньше, мы будем видеть различные точки перехода. Это средняя ширина экрана. Вот малое разрешение. И наконец, когда мы добираемся до очень малого разрешения, все растягивается по вертикали. Итак, давайте посмотрим, как я этого добилась, в Sublime Text.

Таким образом, вот наш файл custom.css, в который я добавила несколько новых стилей после стиля panel. Здесь у меня появились две новые записи. Из стилей по умолчанию, которые относятся ко всем аспектам сайтов Bootstrap, я выбрала тег button внутри элемента с классом form-group. Я добавила ему верхнее поле высотой в десять пикселей. Это даст нам немного свободного места вокруг кнопки. Затем, что касается классов col-sm-2 и col-sm-10, я хочу увеличить для них внутренние границы сверху и снизу, чтобы они не перекрывали другие элементы формы.

Но я не хочу, чтобы эти изменения повлияли на другие теги с классами col-sm-2 и col-sm-10, которые могут быть на моем сайте. И знаете, даже если сейчас у меня на сайте нет других col-sm-2 и col-sm-10, я могу добавить их в будущем. А потом я забуду, что изменила стиль для них. Поэтому я считаю, что наиболее эффективным будет создавать как можно более конкретные стили. Поэтому я связала их с тегом form. Другими словами, когда эти классы будут применены к тегу form, они будут увеличивать внутреннюю границу сверху и снизу.

А ширина внешних отступов у меня будет равна нулю. Я не знала, откуда взялись эти значения свойств padding и margin для левой границы меток "Your name" и "Your email". И поэтому я просто обнулила все, а потом добавила внутреннюю границу сверху и снизу. ОК, затем, в медиа-запросе для больших устройств, то есть для разрешения больше 768 пикселей, нам нужно также реализовать следующие стили. Здесь я для самого тэга form установила ширину в 750 пикселей и выровняла его по центру, добавив свойство margin со значением 0 auto.

Этот стиль выровняет по центру все, что угодно, при условии, что это блочный элемент, примером которого и является форма. Вот таким образом я выровняла элементы на этой странице, убрала эти небольшие отступы, которые были перед словами "Your name" и "Your email" и добавила немного больше пространства между полями. Надеюсь, что вы нашли свое решение этой задачи!