В этом скринкасте мы собираемся создать форму комментария в HTML / CSS. Разметка для формы комментариев находится в файле comments.php нашей темы. Ищем элемент, чтобы найти его.
Мы размещаем каждый из трех входов (имя, адрес электронной почты, URL-адрес), используя имеющуюся сетку. Мальчик, мы получили от этого пользу, а?
У нас уже есть файл CSS, предназначенный исключительно для материалов, связанных с комментариями, поэтому мы будем работать над ним. Первое, что мы пишем, - это сделать входные данные в нашей маленькой сетке на 100% шириной, чтобы они помещались в столбце. Divs сделали бы это естественным образом, но входные данные больше похожи на встроенный блок и не заполняют автоматически ширину своих родительских контейнеров. Мы также немного поиграем с основным текстовым полем, сделав его на 100% шириной, а не таким высоким, как было. Мы решили не связываться с возможностью изменения размера текстового поля. На самом деле ничего не ломается.
Затем мы получаем работающую ссылку "Ответить". JavaScript уже работает нормально, потому что мы не испортили ID формы, на которую опирается JavaScript. Тем не менее, нам нужно сделать несколько настроек, например, придать форме серый фон, чтобы дизайн работал.
Остальное время мы тратим на настройку некоторых вещей с медиа-запросами, чтобы форма выглядела нормально на маленьких экранах.