[MUSIC]
В этом упражнении мы рассмотрим поддержку Bootstrap для кнопок и форм.
Таким образом, мы собираемся включить несколько кнопок и группы кнопок на нашей веб-странице.
И мы также смотрим на проектирование форм и стиль форм с использованием классов Bootstrap.
Чтобы начать работу, перейдите на страницу с инструкциями и
загрузите файл contactus.html.zip, который мы там предоставили.
Поэтому щелкните правой кнопкой мыши на этом, а
затем сохраните эту ссылку в свою папку Mistration.
Как, файл
contactus.html.zip.
И затем, как только zip-файл будет загружен, распакуйте файл, чтобы получить страницу contactus.html.
Затем вы можете удалить zip-файл.
После того, как вы распаковали файл и получите страницу contactus.html,
вы заметите, что при загрузке этой страницы в своем
браузере с помощью localhost: 3000/contactus.html,
вы увидите, что эта страница уже предварительно сформирована с некоторым содержимым.
Таким образом, вы можете заметить, что у вас уже есть панель навигации.
У нас есть джамботрон уже отформатирован для нас.
И вы заметите, что у меня есть панировочные сухари и
контакты, направляющиеся сюда, отформатированы.
Затем вы увидите дополнительную информацию, адрес здесь.
А также вы заметите, что нижний колонтитул уже сформирован.
Но вы заметите две вещи здесь,
вы заметите, что здесь есть строка, которая говорит, что группы кнопок идут сюда, а
затем еще одна строка здесь, которая говорит, что форма идет здесь.
Итак, мы собираемся заменить эти два на группу кнопок и форму.
И по пути изучите поддержку Bootstrap для кнопок и форм.
Прежде чем мы продолжим, теперь, когда у нас есть три страницы на нашем сайте,
это хорошая идея для нас, чтобы связать их вместе,
как в панели навигации, так и в ссылках в нижнем колонтитуле.
Давайте изменим эти два так, чтобы мы могли легко перемещаться между этими тремя страницами.
Поэтому, перейдя на страницу contactus.html, вы заметите, что в панели навигации у
меня уже есть ссылки на index.html, настроенные правильно.
И вы заметите, что внизу
здесь у вас есть контактная ссылка здесь.
Но ссылка, соответствующая о, не была настроена должным образом.
Поэтому перейдите к этой ссылке здесь, а затем обновите ее до
aboutus.html.
Связаться с нами можно оставить в покое.
А затем сохраните изменения.
Теперь аналогичным образом перейдите в нижний колонтитул этой страницы.
И вы заметите, что в нижнем колонтитуле у нас есть эти три ссылки.
И это может быть хорошим моментом для замены
ссылок на соответствующие страницы.
Так что я скажу, index.html, aboutus.html,
и, contactus.html.
И сохраните изменения.
Точно так же перейдите в index.html, а затем в index.html также
ссылка контакта с нами не была настроена.
Итак, давайте обновим это до contactus.html.
И затем, аналогичным образом, обновите ссылки в нижнем колонтитуле.
Также перейдите в aboutus.html, а затем исправьте ссылки даже там.
Поэтому в aboutus.html также в заголовке я собираюсь исправить ссылку.
А также в нижнем колонтитуле aboutus.html.
Так что теперь, когда вы заходите на свой веб-сайт,
вы сможете вернуться к своей домашней странице, к вашей странице о странице.
А со страницы «О» можно даже вернуться на страницу контактов.
Поэтому все ссылки между тремя страницами в соответствующих заголовках, а
также нижних колонтитулов, здесь должны быть настроены.
Так что, если вы нажмете на любой из них, вы перейдете на соответствующую страницу.
Теперь самое время начать работать над кнопками, которые мы собираемся
включить в нашу страницу contactus.html.
Так что я сделаю, я заменю эту строку кодом для
кнопки и группы кнопок, а
затем мы вернемся, чтобы объяснить, как все это работает.
Открывая contactus.html в нашем редакторе,
мы найдем место, где этот оператор, группа кнопок идет здесь, существует.
И тогда я собираюсь заменить это кодом, соответствующим
этой группе кнопок.
А потом я вернусь, чтобы объяснить, как работает этот код.
Так что давайте сохраним изменения, а затем взглянем на то,
как выглядит эта группа кнопок в нашем браузере.
Перейдя в ваш браузер, теперь вы можете увидеть, что
на нашей странице создана группа кнопок.
Таким образом, вы можете видеть, что здесь есть три кнопки: Звонок,
Skype и Email кнопки.
Теперь все эти три объединены в один бар или панель
кнопок или то, что в терминах Bootstrap называется группой кнопок.
Итак, давайте посмотрим, как мы идем о создании чего-то подобного в
коде Bootstrap.
Итак, здесь у меня есть окно браузера и мой код, открытые бок о бок.
Итак, давайте посмотрим, как мы создаем этот код кнопки.
Взглянув на код, вы заметите, что
кнопки включены внутри div здесь.
К div мы применяем класс, btn-group.
Итак, если у вас есть группа кнопок, которые вы хотите объединить и
представить как группу кнопок, как панель кнопок,
то вы будете использовать div с классом группы кнопок и
роль как группа здесь для этого div.
Теперь внутри этого вы заметите, что я использую
тег, a, чтобы определить три кнопки.
Итак, давайте посмотрим, как мы определяем три кнопки.
Давайте посмотрим, как мы определяем кнопку Вызов.
Таким образом, эта конкретная строка определяет кнопку Call.
Так что я говорю, роль равна кнопке.
Итак, это, тег здесь,
я использую его как кнопку здесь.
Поэтому я указываю роль как кнопку.
Так что это важно.
А затем посмотрите на классы, которые я применяю к этому.
Таким образом, первый из них является классом btn. Класс
btn является классом кнопки Bootstrap.
Таким образом, он будет отображать это как классическая кнопка Bootstrap.
Во второй части говорится, что btn-первичный.
Итак, это то, что определяет цвет кнопки здесь.
Таким образом, в этом случае цвет кнопки синий.
Итак, это основной цвет в Bootstrap.
Итак, btn-первичный.
А затем после этого посмотрите на использование href здесь.
Итак, поскольку это тег A, я могу использовать атрибут href в этом теге A.
Таким образом, атрибут href указывает на номер телефона.
И затем после этого вы заметили, что я использую значок шрифта здесь для телефона.
Вот почему у меня есть я класс fa fa-телефон, а затем после слова звонок.
Итак, это то, что позволяет построить эту
синюю кнопку, которая входит в эту панель кнопок здесь.
Аналогично, следующий, вы заметите, что это также говорит кнопку роли.
И тогда, когда вы проходите, вы видите, что btn-info.
BTN-info дает ему цвет светло-голубого цвета.
Таким образом, по умолчанию btn-info ссылается на светло-голубую цветную кнопку здесь.
И тогда вы можете увидеть, что у меня есть Skype, определенный здесь.
И затем третий, который, это зеленая кнопка там с электронной почтой.
Обратите внимание, что я указываю буквы роль = класс кнопки = btn btn-success.
Итак, когда вы говорите btn-success, это будет зеленая кнопка здесь.
Итак, у вас есть некоторые цвета, которые уже определены в Bootstrap.
Первичный относится к синему в первый, светло-голубой успех относится к
зеленому цвету, то у вас есть предупреждение, которое будет бледно-желтый цвет, а
затем опасность, которая является красным цветом.
Таким образом, это цвета по умолчанию, которые были настроены в Bootstrap.
И затем настройка href, с mailto здесь, а
затем, после этого, у вас есть.
Шрифт как значок здесь, а затем адрес электронной почты там.
Таким образом, эти три э-тэга, которые в настоящее время действуют как кнопки,
заключены в сторону тех div, которые действуют как btn-group.
Итак, вот как мы отображаем группу кнопок в Bootstrap.
Если вы просто хотите одну кнопку,
все, что вам нужно сделать, это включить только одну из этих строк.
Таким образом, вы также можете использовать тег кнопки.
Если вы используете тег кнопки, вам не нужно указывать роль,
вместо этого вы просто говорите кнопку типа.
Потому что кнопка также может выступать в качестве кнопки отправки там.
Поэтому позже, в формах мы рассмотрим использование тега кнопки,
чтобы создать кнопку, которая будет включена в нашу форму.
Продолжая упражнение, наш следующий шаг будет начать,
разрабатывая форму, которую мы собираемся включить на странице contactus.html.
Мы будем делать это шаг за шагом, чтобы на каждом шаге мы узнаем немного о
том, как вы включаете некоторые элементы в их форму.
Итак, в начале, когда вы переходите на страницу contactus.html,
прямо там, вы увидите это заявление называется, форма идет здесь.
Теперь, что я собираюсь сделать, это изменить это с col-sm
на col-md, чтобы для
дополнительных маленьких и малых размеров экрана моя форма была выложена,
занимая всю ширину экрана, потому что она использует col-xs-12.
Но с экрана среднего размера в палатах
он будет занимать только 9 из 12 столбцов.
Итак, давайте начнем строить форму.
Итак, то, что я собираюсь сделать, это, я собираюсь заменить это, моим первым фрагментом кода.
Мы собираемся включить два поля в нашу форму, для
имени и фамилии пользователя.
Позвольте мне добавить в код, затем мы посмотрим на результат.
А потом мы вернемся и изучим код.
Итак, добавляя код в этот момент,
как всегда этот фрагмент кода находится в инструкциях.
Итак, позвольте мне сохранить изменения.
А потом мы вернемся и посмотрим, как выглядит эта форма в браузере.
Взглянув на форму, вы увидите, что теперь у них есть две темы в форме здесь.
Первый, имеет метку на левой стороне с надписью First Name
, а затем у вас есть поле ввода здесь.
И затем Фамилия, а затем поле ввода здесь.
Теперь вы заметили также, что эта форма выложена, так
что эта часть занимает получасть экрана, а
оставшуюся часть занимает оставшуюся часть экрана.
Ты начинаешь задаваться вопросом, как нам это делать?
Помогает ли сетка Bootstrap нам решать эти размеры.
Это был бы очень хороший вопрос для вас, чтобы задать себе.
Давайте посмотрим код и поймем, как он выглядит.
Прежде чем мы это сделаем, давайте посмотрим на тот же макет форм,
в очень маленьком размере экрана.
Таким образом, переключение на дополнительный маленький размер экрана.
Так что мы поедем в Galaxy S5.
Вы заметили, как форма выкладывается в дополнительный маленький размер экрана.
Итак, вы увидите, что метка находится сверху, а
затем сама коробка, сама коробка ввода является нижней, аналогично для фамилии.
Итак, вы заметили этот бутстрап.
Кстати, он предоставляет эти классы форм.
Автоматически, делает вашу форму отзывчивой, так что, когда она
выложена на разных размерах экрана, форма будет надлежащим образом выложена,
так что она не получит все раздавленные на небольших размерах экрана.
Но для больших размеров экрана, потому что у вас больше недвижимости,
вы можете растянуть форму, чтобы использовать дополнительное пространство, которое у вас есть.
Взглянув на этот исходный код и форму бок о бок, очевидно,
первое, что вы заметили, это то, что ваша форма начинается с тега формы здесь.
Итак, форма, а затем закрывающая форма, тег здесь.
Итак, внутри вы описываете различные части вашей формы.
Итак, давайте посмотрим, как построено первое имя,
фамилия, очевидно, как это выглядит, должна использовать аналогичный подход.
Итак, по умолчанию вы замечаете, что здесь есть div.
Div элемент здесь, с закрывающим div здесь.
Таким образом, этот элемент div имеет класс, называемый form-group.
А затем следует класс строки.
Таким образом, класс form-group по существу
говорит, что все, что находится внутри этого div, будет рассматриваться как группа элементов.
И тогда они будут выложены соответствующим образом.
И вторая часть, вы видите использование строки здесь.
Итак, вы увидите, что строка группы Bootstrap вступает в игру здесь.
И поэтому эта конкретная группа форм может быть выложена
с помощью классов строк и столбцов, которые у вас есть из сетки Bootstrap.
Итак, теперь, если вы примените строку к этому div,
что бы там ни было, вы можете использовать классы столбцов,
чтобы точно решить, сколько места каждый из них будет занимать на экране.
Теперь, так что это делает его более понятным, поэтому эта группа форм заключает.
Это подразделение.
Мы будем видеть это повторение снова и
снова, когда мы разрабатываем различные элементы формы.
Затем, ниже, вы видите этот тег ярлыка здесь.
Для тега метки есть определенные атрибуты, которые ему были назначены.
Таким образом, вы видите, что тег метки использует для firstname.
Таким образом, эта метка для чего-то с идентификатором firstname.
Итак, каково поле ввода, которое следует прямо под этим.
Мы посмотрим на это через короткое время.
А затем посмотрите на классы, которые применяются к классу меток, col-md-2.
Таким образом, это означает, что для средних и сверхбольших экранов
этот конкретный элемент будет занимать 2 столбца пространства.
А потом обратите внимание на другой.
Тут написано «Col-form-label».
Таким образом, col-form-label по существу указывает,
что эта метка должна быть расположена для выравнивания с
другим элементом, который является частью этой группы форм.
Итак, в этом случае, поле ввода.
И поэтому это также означает, что
метка должна быть выстроена в середине,
горизонтально с полем ввода.
Поэтому мы используем класс col-form-label.
Если вы не примените это, ваша метка будет
выровнена в верхней части вашего поля ввода.
Какая ваша форма не будет выглядеть так здорово на средних и очень больших размерах экрана.
Теперь, с левой стороны, конечно, потому что это окно браузера раздавлено,
поэтому он показывает вид в маленьком или очень маленьком размере экрана здесь.
Вот почему вы видите метку, складывающуюся поверх поля ввода здесь.
Таким образом, это метка, которая указывает.
Поэтому, если у вас есть метка, которую вы хотите назначить элементу,
так что вы собираетесь назначить метку.
Ниже здесь вы видите класс div col-md-10.
Таким образом, это занимает оставшиеся 10 из 12 столбцов.
Таким образом, два столбца, которые заняты меткой.
И оставшиеся десять столбцов заняты этим, но заключены внутри div.
И внутри этого div
вы видите, что есть элемент входного тега с текстом типа.
Таким образом, это означает, что это поле ввода принимает текстовый ввод.
И класс, посмотрите на класс здесь.
Здесь написано «контроль формы».
Это важно, чтобы применить к поле ввода здесь.
Таким образом, контроль формы и идентификатор firstname.
И имя, которое является первым.
Затем местозаполнитель Имя.
Таким образом, заполнитель - это то, что появляется внутри коробки в качестве
заполнителя для поля ввода.
Таким образом, все эти атрибуты назначаются.
Что более важно,
обратите внимание на использование класса form-control, применяемого к типу ввода.
Так вот как вы структурируете эти два элемента в своей форме.
Для небольших размеров экрана и ниже, он складывает две вещи.
Но для средних и очень больших,
вы видели, что он позиционирует их горизонтально бок о бок.
То же самое относится и к коду lastname.
Это будет очень похоже на то, как структурировано первое имя.
Поэтому я хотел бы, чтобы вы потратили немного времени, взглянув на этот код.
Так что вы видите, исходя из вашего понимания этого,
как это также отформатировано.
Следующий вид формального события, которое мы добавим, является элементом группы ввода.
Позвольте мне добавить код.
Посмотрим, какая форма получилась.
А потом мы вернемся и изучим код.
Поэтому прямо здесь, после второго div, после поля lastname,
я собираюсь включить код для следующего элемента здесь.
И тогда давайте сохраним изменения.
А затем, сразу,
вы увидите еще пару вещей, добавленных в вашу форму.
Вы видите поле номера телефона, добавленное здесь.
Это, судя по всему, вы видите, что это очень похоже на это.
Поэтому я не собираюсь объяснять код для этого.
Это должно быть очень просто, чтобы вы поняли.
И тогда это поле электронной почты также должно быть очень простым для
вас, чтобы понять.
Потому что это очень похоже на последнее имя.
За исключением того, что для этого поле ввода, тип будет установлен на email.
Таким образом, встроенные возможности проверки формы
вашего браузера автоматически запускаются.
Так что, когда вы вводите что-то, что не выглядит как электронная почта,
тогда он будет жаловаться соответствующим образом.
Итак, давайте рассмотрим эту конкретную часть формы здесь.
Обратите внимание, что в этом случае мы добавляем в левую скобку и
правую скобку для этого конкретного поля ввода.
Так как вы добавляете вещи в свою коробку вот так?
Взглянув на код здесь, в вашем редакторе,
вы видите, что у вас все еще есть строка form-group, которую вы уже поняли.
И внизу здесь у вас есть идентификатор элемента формы ввода типа telnum
и т. Д., Это также должно быть очень ясно для вас.
Так что я не думаю, что мне нужно объяснять тебе эту часть.
Обратите внимание, как я использую классы столбцов сетки Bootstrap для каждого из них.
Таким образом, метка дается col-md-2.
А затем номер телефона один дается
кол-хс-7 кол-см-6 и кол-мд-7 здесь.
Таким образом, номер телефона, этот элемент правильно позиционируется.
Но, в частности, давайте обратим внимание на эту часть.
Итак, этот здесь находится внутри этого div.
Поэтому внутри этого div обратите внимание на класс, предоставленный ему.
Класс говорит «входная группа».
Таким образом, по существу это означает, что все, что находится внутри этого div
, будет рассматриваться как группа элементов здесь.
Вот почему данный класс является входной группой.
Теперь, для добавления чего-то подобного, вы будете использовать
класс, называемый как input-group-addon.
И затем обратите внимание, что я использую div для хранения этого элемента.
Я могу использовать все здесь, но div пригодится здесь.
Поэтому я говорю, что div класс input-group-addon.
И затем закрывающий тип div внутри, где,
обратите внимание, что у меня есть левая скобка.
Таким образом, это то, что позволяет вам добавить дополнительный
добавочный элемент в поле ввода здесь.
Аналогично, приведенный ниже здесь также является входом-группа-аддон правой скобкой.
Вот что добавляет здесь другую правую скобку.
Теперь, между этими двумя, конечно, у вас есть тип ввода.
Ввод с типом tel и класса form-control, id, name,
заполнитель, все на месте здесь.
Так что это не что иное, как часть кода района.
Поэтому, если вы используете эту входную группу вместе с входными групповы-добавками,
как это с обеих сторон.
Эти вещи будут добавлены в ваш элемент ввода, как это.
Это дает вам хороший способ проектирования вашей формы с некоторыми добавленными в.
Например, если у вас есть поле, которое принимает
деньги в качестве входных данных, вы можете просто добавить знак доллара в левую сторону,
чтобы указать пользователю, что это поле, которое принимает значение валюты в данный момент.
Прямо сейчас в этом случае это поле принимает код города.
И если вы видите, как коды районов написаны в США и
Канаде, вы знаете, что они заключены в левую и правую скобки.
Итак, это то, что позволяет мне указать что-то подобное в моей форме.
Мой следующий набор элементов, которые я собираюсь добавить в свою
форму, - это флажок и выбор.
Итак, как мы это добавим?
Итак, если вы знакомы с HTML-формами, вы понимаете, как работает выбор, и
вы понимаете, как работают флажки в HTML-формах.
Теперь Bootstrap дает вам некоторые дополнительные
классы, которые позволяют вам форматировать эти элементы соответствующим образом.
Итак, позвольте мне добавить цитату.
Давайте сохраним изменения.
Взгляните на то, что это приводит к форме здесь.
А потом взгляните на код.
Итак, вы видите, что у меня есть флажок и сообщение здесь.
И тогда это селектор, который позволяет мне выбирать среди множества вариантов здесь.
Теперь форма, как она существует здесь, это то, что вы увидите в небольших и
дополнительных маленьких размерах экрана.
Давайте взглянем на него на больший размер экрана.
Такая же форма при выложении на средних и сверхбольших
размерах экрана будет выглядеть так.
Таким образом, вы можете увидеть, как здесь расположен контактный номер телефона,
и адрес электронной почты находится здесь.
Так что обратите внимание, что эти ярлыки
выстроены на линию посередине с коробками здесь.
Это то, что класс этикеток формы col достигает первым.
Теперь давайте сосредоточимся на этом, что мы только что добавили.
Здесь мы видим, что у нас есть флажок добавлен в.
А затем текстовое поле здесь.
Так мы можем связаться с вами?
Так, например, вы ожидаете, что пользователь либо проверит его, либо выключит.
Итак, в чем причина установки флажка?
Аналогично, у вас могут быть переключатели.
Bootstrap поддерживает переключатели, доступные в HTML-формах.
И предоставить некоторые классы для их правильной стилизации.
И тогда это, конечно, селектор, который позволяет выбирать среди вариантов.
Так что, возвращаясь назад и глядя на код.
Посмотрим, как это реализовано.
Возвращаясь, чтобы взглянуть на код, вы видите, что этот снова является
строкой группы форм div здесь, которая включает две вещи здесь.
Одним из них является проверка формы
col-md-6 offset-md-2.
Таким образом, это то, что включает флажок внутри этого элемента div.
И затем внизу здесь у меня есть класс div, Col-MD-3 offset-md-1.
Поэтому обратите внимание, что здесь говорится о проверке формы col-md-6 offset-md-2.
Причина, по которой я делаю offset-md-2, заключается в том, что у меня нет ярлыка.
Поэтому я обычно использовал два столбца для меток.
Поэтому, поскольку этот флажок должен выровняться с правой стороны в форме.
Вот почему я использовал offset-md-2 здесь.
И затем внутри здесь он говорит класс label = «form-check-label».
И затем он предоставляет тег ввода
здесь с флажком типа.
Так вот как вы создаете флажок.
И затем класс, класс Bootstrap, который вы собираетесь применить к
вашему флажку, является form-check-input.
И тогда имя и начальное значение пусты.
И затем, это фактическая метка, которую вы видите,
применяется к этому конкретному флажку там.
Итак, обратите внимание, как эти два заключены внутри тега метки здесь.
Так вот как вы создаете флажок вместе с его меткой, а
затем разместите его в своей форме здесь.
Таким образом, здесь используется форма чек-этикетка.
И затем здесь у вас должен быть флажок, тип ввода = «флажок», а
затем надпись.
Итак, здесь вы видите сильного, можем ли мы связаться с вами?
Вот почему он отображается жирным шрифтом рядом с флажком здесь.
Теперь ниже в коде у вас есть класс div col-md-3 offset-md-1.
Таким образом, это занимает три столбца в пределах одного смещения столбца.
Итак, в общей сложности четыре столбца здесь.
Итак, это col-md-6 плюс 2, так что это восемь столбцов.
Итак, 8 плюс 4, 12.
Таким образом, это заботится о ваших 12 столбцах для вашей сетки там.
Теперь внутри этого вы видите выбор, примененный здесь.
Теперь это вариант выбора, который поддерживает HTML-формы файлов.
И посмотрите на класс, примененный к этому.
Он говорит, что class = «form-control» для выбора.
И затем вы даете параметры в выборе здесь.
Так Тел., Электронная почта и так далее.
Так вот как вы указываете параметры для поля выбора в своей форме здесь.
Таким образом, это использование select и флажков в вашей форме.
Аналогично, если вы проверите документацию Bootstrap, вы увидите использование
переключателей и других элементов формы.
Взглянув на нашу форму,
мы видим, что у нас уже есть много вещей, которые нам нужны в нашей форме.
У тебя есть имя и фамилия.
Таким образом, эта форма является то, что мы создаем, чтобы пользователи могли
отправлять отзывы в ресторан.
Итак, здесь у нас есть имя,
фамилия и контактный номер телефона, а затем электронное письмо.
И тогда, конечно,
возможность позволить пользователю увидеть, можно ли с ними связаться или нет.
Таким образом, это реализовано с помощью флажка и селектора здесь.
Единственное, что осталось, это кнопка отправки для нас.
Таким образом, мы добавим в кнопку отправки в эту форму
, а затем окончательно посмотрим на форму.
Перед тем, как добавить кнопку отправки, может быть, мы хотим предоставить окно для
пользователей, чтобы ввести их отзыв.
Поэтому в этом случае я собираюсь использовать текстовую область для предоставления этого.
Так что позвольте мне вставить код.
А потом мы рассмотрим код здесь.
Таким образом, этот код, как вы видите, говорит,
div class = «form-group row», который вы уже знаете, что это означает.
И тогда это ярлык, который вы уже знаете, как он построен.
И внизу вы видите тег textarea, используемый для формы.
Таким образом, он говорит, класс textarea, с классом = «form-control»,
который вы уже видели раньше.
И затем идентификатор, имя, а затем количество строк для
текстовой области, указываемой здесь.
Итак, давайте сохраним изменения и взглянем на форму.
Итак, взглянув на форму, вы видите, что вместе с этим, прямо ниже,
у вас есть большое текстовое поле, в котором комментарии обратной связи могут быть набраны пользователем.
Таким образом, ваша форма имеет имя, фамилию, номер телефона
, адрес электронной почты и разрешение на контакт с пользователем, а затем окно обратной связи.
Последнее, что будет кнопка «Отправить».
Наконец, давайте добавим в форму кнопку Submit.
Поэтому после div, в текстовой области,
я собираюсь вставить код для кнопки Submit здесь.
Таким образом, вставляя код для кнопки Submit снова, глядя на код, вы видите,
что это класс div ="form-group row">, который вы уже знаете раньше.
И тогда это говорит, div class = «offset-md-2 col-md-10">.
Вы понимаете, что это такое, а
затем, внутри этого div, вы видите кнопку, заключенную здесь.
Теперь, поскольку мы видели построение кнопки с помощью тега,
давайте обратим внимание на то, как вы создаете кнопку с помощью HTML-тега кнопки.
Поэтому, если вы используете тег HTML кнопки, вы говорите кнопку, а
затем тип отправляется.
Это будет действовать как кнопка «Отправить» для моей формы,
поэтому я сказал, что тип является отправкой.
Вы устанавливаете тип кнопки, она будет действовать как обычная кнопка здесь.
И тогда к этому я говорю, кнопка класса, кнопка первичная.
Таким образом, это кнопка синего цвета, а затем кнопка
содержит этот текст внутри кнопки, чтобы отправить текст обратной связи внутри кнопки.
Так что давайте сохраним изменения.
Так что это будет последняя модификация моей формы здесь.
Так что давайте сохраним изменения, а затем пойдем и посмотрим на кнопку.
Возвращаясь в браузер, вы увидите, что в вашей форме прямо ниже,
у вас есть кнопка Отправить отзыв.
Поэтому, когда пользователь заполняет форму,
он нажимает на кнопку Отправить отзыв, чтобы отправить отзыв компании.
Таким образом, это завершает дизайн формы.
Таким образом, это одна из таких форм, которые вы можете включить.
Есть еще много классов, которые доступны в Bootstrap для
поддержки форм.
Я настоятельно призываю вас проконсультироваться с документацией формы, чтобы увидеть
другие виды классов, которые доступны для построения по умолчанию.
Поэтому, если у вас концептуально есть форма, которую вы хотите построить,
вы просто просматриваете все различные возможные элементы, которые вы хотите включить
в форму, а затем проектируете форму соответствующим образом.
Более важная вещь, которую вы заметили при построении формы с помощью Bootstrap,
- это все доступные классы Bootstrap.
Элемент управления формы, группа форм, как вы используете классы строк и столбцов.
И все эти различные классы, которые поддерживаются
в Bootstrap для проектирования форм, фильм Bootstrap.
Последний набор, сделайте git commit, поэтому мы поднимем страницу git.
Я собираюсь прокомментировать изменения, которые я сделал о,
contactus и index.
И затем скажите кнопки и
формы Bootstrap, а затем это было бы связано
с моим репозиторием git.
С этим мы завершаем это упражнение.
Здесь мы узнали, как мы включаем кнопки и
элементы формы в наш шаг дизайна Bootstrap.
[ МУЗЫКА]