1 00:00:00,000 --> 00:00:04,797 [MUSIC] 2 00:00:04,797 --> 00:00:11,490 В этом упражнении мы рассмотрим поддержку Bootstrap для кнопок и форм. 3 00:00:11,490 --> 00:00:17,293 Таким образом, мы собираемся включить несколько кнопок и группы кнопок на нашей веб-странице. 4 00:00:17,293 --> 00:00:24,190 И мы также смотрим на проектирование форм и стиль форм с использованием классов Bootstrap. 5 00:00:25,780 --> 00:00:31,080 Чтобы начать работу, перейдите на страницу с инструкциями и 6 00:00:31,080 --> 00:00:36,900 загрузите файл contactus.html.zip, который мы там предоставили. 7 00:00:36,900 --> 00:00:39,798 Поэтому щелкните правой кнопкой мыши на этом, а 8 00:00:39,798 --> 00:00:44,969 затем сохраните эту ссылку в свою папку Mistration. 9 00:00:48,512 --> 00:00:49,568 Как, файл 10 00:00:54,264 --> 00:01:01,598 contactus.html.zip. 11 00:01:01,598 --> 00:01:08,580 И затем, как только zip-файл будет загружен, распакуйте файл, чтобы получить страницу contactus.html. 12 00:01:09,740 --> 00:01:11,580 Затем вы можете удалить zip-файл. 13 00:01:13,440 --> 00:01:18,764 После того, как вы распаковали файл и получите страницу contactus.html, 14 00:01:18,764 --> 00:01:23,084 вы заметите, что при загрузке этой страницы в своем 15 00:01:23,084 --> 00:01:28,107 браузере с помощью localhost: 3000/contactus.html, 16 00:01:28,107 --> 00:01:34,748 вы увидите, что эта страница уже предварительно сформирована с некоторым содержимым. 17 00:01:34,748 --> 00:01:38,550 Таким образом, вы можете заметить, что у вас уже есть панель навигации. 18 00:01:38,550 --> 00:01:42,846 У нас есть джамботрон уже отформатирован для нас. 19 00:01:42,846 --> 00:01:48,061 И вы заметите, что у меня есть панировочные сухари и 20 00:01:48,061 --> 00:01:52,190 контакты, направляющиеся сюда, отформатированы. 21 00:01:52,190 --> 00:01:57,730 Затем вы увидите дополнительную информацию, адрес здесь. 22 00:01:57,730 --> 00:02:04,180 А также вы заметите, что нижний колонтитул уже сформирован. 23 00:02:04,180 --> 00:02:06,580 Но вы заметите две вещи здесь, 24 00:02:06,580 --> 00:02:11,820 вы заметите, что здесь есть строка, которая говорит, что группы кнопок идут сюда, а 25 00:02:11,820 --> 00:02:15,678 затем еще одна строка здесь, которая говорит, что форма идет здесь. 26 00:02:15,678 --> 00:02:20,280 Итак, мы собираемся заменить эти два на группу кнопок и форму. 27 00:02:20,280 --> 00:02:25,380 И по пути изучите поддержку Bootstrap для кнопок и форм. 28 00:02:25,380 --> 00:02:31,015 Прежде чем мы продолжим, теперь, когда у нас есть три страницы на нашем сайте, 29 00:02:31,015 --> 00:02:34,585 это хорошая идея для нас, чтобы связать их вместе, 30 00:02:34,585 --> 00:02:39,525 как в панели навигации, так и в ссылках в нижнем колонтитуле. 31 00:02:39,525 --> 00:02:45,165 Давайте изменим эти два так, чтобы мы могли легко перемещаться между этими тремя страницами. 32 00:02:45,165 --> 00:02:52,008 Поэтому, перейдя на страницу contactus.html, вы заметите, что в панели навигации у 33 00:02:52,008 --> 00:02:56,816 меня уже есть ссылки на index.html, настроенные правильно. 34 00:02:58,908 --> 00:03:03,568 И вы заметите, что внизу 35 00:03:03,568 --> 00:03:08,450 здесь у вас есть контактная ссылка здесь. 36 00:03:08,450 --> 00:03:15,550 Но ссылка, соответствующая о, не была настроена должным образом. 37 00:03:15,550 --> 00:03:19,905 Поэтому перейдите к этой ссылке здесь, а затем обновите ее до 38 00:03:19,905 --> 00:03:24,430 aboutus.html. 39 00:03:24,430 --> 00:03:27,788 Связаться с нами можно оставить в покое. 40 00:03:27,788 --> 00:03:31,050 А затем сохраните изменения. 41 00:03:31,050 --> 00:03:35,070 Теперь аналогичным образом перейдите в нижний колонтитул этой страницы. 42 00:03:35,070 --> 00:03:40,975 И вы заметите, что в нижнем колонтитуле у нас есть эти три ссылки. 43 00:03:40,975 --> 00:03:45,215 И это может быть хорошим моментом для замены 44 00:03:45,215 --> 00:03:48,015 ссылок на соответствующие страницы. 45 00:03:48,015 --> 00:03:54,342 Так что я скажу, index.html, aboutus.html, 46 00:03:54,342 --> 00:03:59,665 и, contactus.html. 47 00:03:59,665 --> 00:04:01,325 И сохраните изменения. 48 00:04:01,325 --> 00:04:08,117 Точно так же перейдите в index.html, а затем в index.html также 49 00:04:08,117 --> 00:04:12,280 ссылка контакта с нами не была настроена. 50 00:04:12,280 --> 00:04:18,640 Итак, давайте обновим это до contactus.html. 51 00:04:18,640 --> 00:04:21,900 И затем, аналогичным образом, обновите ссылки в нижнем колонтитуле. 52 00:04:23,050 --> 00:04:27,258 Также перейдите в aboutus.html, а затем исправьте ссылки даже там. 53 00:04:27,258 --> 00:04:32,540 Поэтому в aboutus.html также в заголовке я собираюсь исправить ссылку. 54 00:04:37,461 --> 00:04:41,690 А также в нижнем колонтитуле aboutus.html. 55 00:04:41,690 --> 00:04:44,050 Так что теперь, когда вы заходите на свой веб-сайт, 56 00:04:44,050 --> 00:04:49,290 вы сможете вернуться к своей домашней странице, к вашей странице о странице. 57 00:04:49,290 --> 00:04:52,950 А со страницы «О» можно даже вернуться на страницу контактов. 58 00:04:52,950 --> 00:04:57,780 Поэтому все ссылки между тремя страницами в соответствующих заголовках, а 59 00:04:57,780 --> 00:05:01,480 также нижних колонтитулов, здесь должны быть настроены. 60 00:05:01,480 --> 00:05:06,500 Так что, если вы нажмете на любой из них, вы перейдете на соответствующую страницу. 61 00:05:08,190 --> 00:05:12,660 Теперь самое время начать работать над кнопками, которые мы собираемся 62 00:05:12,660 --> 00:05:17,040 включить в нашу страницу contactus.html. 63 00:05:17,040 --> 00:05:23,060 Так что я сделаю, я заменю эту строку кодом для 64 00:05:23,060 --> 00:05:25,580 кнопки и группы кнопок, а 65 00:05:25,580 --> 00:05:30,465 затем мы вернемся, чтобы объяснить, как все это работает. 66 00:05:30,465 --> 00:05:34,650 Открывая contactus.html в нашем редакторе, 67 00:05:34,650 --> 00:05:40,402 мы найдем место, где этот оператор, группа кнопок идет здесь, существует. 68 00:05:40,402 --> 00:05:44,230 И тогда я собираюсь заменить это кодом, соответствующим 69 00:05:44,230 --> 00:05:46,920 этой группе кнопок. 70 00:05:46,920 --> 00:05:51,600 А потом я вернусь, чтобы объяснить, как работает этот код. 71 00:05:51,600 --> 00:05:56,570 Так что давайте сохраним изменения, а затем взглянем на то, 72 00:05:56,570 --> 00:06:00,920 как выглядит эта группа кнопок в нашем браузере. 73 00:06:02,550 --> 00:06:07,224 Перейдя в ваш браузер, теперь вы можете увидеть, что 74 00:06:07,224 --> 00:06:12,310 на нашей странице создана группа кнопок. 75 00:06:12,310 --> 00:06:15,040 Таким образом, вы можете видеть, что здесь есть три кнопки: Звонок, 76 00:06:15,040 --> 00:06:17,540 Skype и Email кнопки. 77 00:06:17,540 --> 00:06:21,990 Теперь все эти три объединены в один бар или панель 78 00:06:21,990 --> 00:06:26,800 кнопок или то, что в терминах Bootstrap называется группой кнопок. 79 00:06:26,800 --> 00:06:31,350 Итак, давайте посмотрим, как мы идем о создании чего-то подобного в 80 00:06:31,350 --> 00:06:32,390 коде Bootstrap. 81 00:06:33,530 --> 00:06:41,530 Итак, здесь у меня есть окно браузера и мой код, открытые бок о бок. 82 00:06:41,530 --> 00:06:44,990 Итак, давайте посмотрим, как мы создаем этот код кнопки. 83 00:06:44,990 --> 00:06:48,536 Взглянув на код, вы заметите, что 84 00:06:48,536 --> 00:06:53,745 кнопки включены внутри div здесь. 85 00:06:53,745 --> 00:06:57,060 К div мы применяем класс, btn-group. 86 00:06:57,060 --> 00:07:02,255 Итак, если у вас есть группа кнопок, которые вы хотите объединить и 87 00:07:02,255 --> 00:07:06,225 представить как группу кнопок, как панель кнопок, 88 00:07:06,225 --> 00:07:10,990 то вы будете использовать div с классом группы кнопок и 89 00:07:10,990 --> 00:07:14,540 роль как группа здесь для этого div. 90 00:07:14,540 --> 00:07:18,332 Теперь внутри этого вы заметите, что я использую 91 00:07:18,332 --> 00:07:20,550 тег, a, чтобы определить три кнопки. 92 00:07:20,550 --> 00:07:23,590 Итак, давайте посмотрим, как мы определяем три кнопки. 93 00:07:23,590 --> 00:07:26,430 Давайте посмотрим, как мы определяем кнопку Вызов. 94 00:07:26,430 --> 00:07:30,030 Таким образом, эта конкретная строка определяет кнопку Call. 95 00:07:30,030 --> 00:07:33,718 Так что я говорю, роль равна кнопке. 96 00:07:33,718 --> 00:07:38,375 Итак, это, тег здесь, 97 00:07:38,375 --> 00:07:42,565 я использую его как кнопку здесь. 98 00:07:42,565 --> 00:07:44,955 Поэтому я указываю роль как кнопку. 99 00:07:44,955 --> 00:07:46,545 Так что это важно. 100 00:07:46,545 --> 00:07:49,591 А затем посмотрите на классы, которые я применяю к этому. 101 00:07:49,591 --> 00:07:54,926 Таким образом, первый из них является классом btn. Класс 102 00:07:54,926 --> 00:07:59,880 btn является классом кнопки Bootstrap. 103 00:07:59,880 --> 00:08:03,720 Таким образом, он будет отображать это как классическая кнопка Bootstrap. 104 00:08:03,720 --> 00:08:07,300 Во второй части говорится, что btn-первичный. 105 00:08:07,300 --> 00:08:10,940 Итак, это то, что определяет цвет кнопки здесь. 106 00:08:10,940 --> 00:08:15,910 Таким образом, в этом случае цвет кнопки синий. 107 00:08:15,910 --> 00:08:18,750 Итак, это основной цвет в Bootstrap. 108 00:08:18,750 --> 00:08:20,670 Итак, btn-первичный. 109 00:08:20,670 --> 00:08:25,510 А затем после этого посмотрите на использование href здесь. 110 00:08:25,510 --> 00:08:30,850 Итак, поскольку это тег A, я могу использовать атрибут href в этом теге A. 111 00:08:30,850 --> 00:08:33,610 Таким образом, атрибут href указывает на номер телефона. 112 00:08:35,110 --> 00:08:40,940 И затем после этого вы заметили, что я использую значок шрифта здесь для телефона. 113 00:08:40,940 --> 00:08:47,560 Вот почему у меня есть я класс fa fa-телефон, а затем после слова звонок. 114 00:08:47,560 --> 00:08:53,170 Итак, это то, что позволяет построить эту 115 00:08:53,170 --> 00:08:58,550 синюю кнопку, которая входит в эту панель кнопок здесь. 116 00:08:58,550 --> 00:09:04,150 Аналогично, следующий, вы заметите, что это также говорит кнопку роли. 117 00:09:04,150 --> 00:09:07,795 И тогда, когда вы проходите, вы видите, что btn-info. 118 00:09:07,795 --> 00:09:12,235 BTN-info дает ему цвет светло-голубого цвета. 119 00:09:12,235 --> 00:09:18,665 Таким образом, по умолчанию btn-info ссылается на светло-голубую цветную кнопку здесь. 120 00:09:18,665 --> 00:09:22,975 И тогда вы можете увидеть, что у меня есть Skype, определенный здесь. 121 00:09:22,975 --> 00:09:28,172 И затем третий, который, это зеленая кнопка там с электронной почтой. 122 00:09:28,172 --> 00:09:34,542 Обратите внимание, что я указываю буквы роль = класс кнопки = btn btn-success. 123 00:09:34,542 --> 00:09:38,132 Итак, когда вы говорите btn-success, это будет зеленая кнопка здесь. 124 00:09:38,132 --> 00:09:44,102 Итак, у вас есть некоторые цвета, которые уже определены в Bootstrap. 125 00:09:44,102 --> 00:09:48,322 Первичный относится к синему в первый, светло-голубой успех относится к 126 00:09:49,390 --> 00:09:54,250 зеленому цвету, то у вас есть предупреждение, которое будет бледно-желтый цвет, а 127 00:09:54,250 --> 00:09:56,150 затем опасность, которая является красным цветом. 128 00:09:56,150 --> 00:09:59,763 Таким образом, это цвета по умолчанию, которые были настроены в Bootstrap. 129 00:10:01,712 --> 00:10:06,602 И затем настройка href, с mailto здесь, а 130 00:10:06,602 --> 00:10:10,140 затем, после этого, у вас есть. 131 00:10:11,972 --> 00:10:16,030 Шрифт как значок здесь, а затем адрес электронной почты там. 132 00:10:16,030 --> 00:10:21,410 Таким образом, эти три э-тэга, которые в настоящее время действуют как кнопки, 133 00:10:21,410 --> 00:10:26,780 заключены в сторону тех div, которые действуют как btn-group. 134 00:10:26,780 --> 00:10:32,100 Итак, вот как мы отображаем группу кнопок в Bootstrap. 135 00:10:32,100 --> 00:10:34,470 Если вы просто хотите одну кнопку, 136 00:10:34,470 --> 00:10:37,220 все, что вам нужно сделать, это включить только одну из этих строк. 137 00:10:38,270 --> 00:10:41,130 Таким образом, вы также можете использовать тег кнопки. 138 00:10:41,130 --> 00:10:44,270 Если вы используете тег кнопки, вам не нужно указывать роль, 139 00:10:44,270 --> 00:10:46,730 вместо этого вы просто говорите кнопку типа. 140 00:10:46,730 --> 00:10:49,700 Потому что кнопка также может выступать в качестве кнопки отправки там. 141 00:10:49,700 --> 00:10:54,140 Поэтому позже, в формах мы рассмотрим использование тега кнопки, 142 00:10:54,140 --> 00:10:57,040 чтобы создать кнопку, которая будет включена в нашу форму. 143 00:10:58,600 --> 00:11:03,900 Продолжая упражнение, наш следующий шаг будет начать, 144 00:11:03,900 --> 00:11:08,790 разрабатывая форму, которую мы собираемся включить на странице contactus.html. 145 00:11:08,790 --> 00:11:13,350 Мы будем делать это шаг за шагом, чтобы на каждом шаге мы узнаем немного о 146 00:11:13,350 --> 00:11:17,610 том, как вы включаете некоторые элементы в их форму. 147 00:11:17,610 --> 00:11:24,480 Итак, в начале, когда вы переходите на страницу contactus.html, 148 00:11:24,480 --> 00:11:29,430 прямо там, вы увидите это заявление называется, форма идет здесь. 149 00:11:29,430 --> 00:11:34,771 Теперь, что я собираюсь сделать, это изменить это с col-sm 150 00:11:34,771 --> 00:11:39,480 на col-md, чтобы для 151 00:11:39,480 --> 00:11:44,290 дополнительных маленьких и малых размеров экрана моя форма была выложена, 152 00:11:44,290 --> 00:11:49,352 занимая всю ширину экрана, потому что она использует col-xs-12. 153 00:11:49,352 --> 00:11:53,024 Но с экрана среднего размера в палатах 154 00:11:53,024 --> 00:11:57,290 он будет занимать только 9 из 12 столбцов. 155 00:11:57,290 --> 00:11:59,600 Итак, давайте начнем строить форму. 156 00:11:59,600 --> 00:12:05,470 Итак, то, что я собираюсь сделать, это, я собираюсь заменить это, моим первым фрагментом кода. 157 00:12:06,580 --> 00:12:11,300 Мы собираемся включить два поля в нашу форму, для 158 00:12:11,300 --> 00:12:14,280 имени и фамилии пользователя. 159 00:12:14,280 --> 00:12:17,440 Позвольте мне добавить в код, затем мы посмотрим на результат. 160 00:12:17,440 --> 00:12:19,750 А потом мы вернемся и изучим код. 161 00:12:19,750 --> 00:12:23,190 Итак, добавляя код в этот момент, 162 00:12:23,190 --> 00:12:27,820 как всегда этот фрагмент кода находится в инструкциях. 163 00:12:27,820 --> 00:12:30,510 Итак, позвольте мне сохранить изменения. 164 00:12:30,510 --> 00:12:35,690 А потом мы вернемся и посмотрим, как выглядит эта форма в браузере. 165 00:12:35,690 --> 00:12:40,250 Взглянув на форму, вы увидите, что теперь у них есть две темы в форме здесь. 166 00:12:42,060 --> 00:12:46,790 Первый, имеет метку на левой стороне с надписью First Name 167 00:12:46,790 --> 00:12:49,780 , а затем у вас есть поле ввода здесь. 168 00:12:49,780 --> 00:12:52,800 И затем Фамилия, а затем поле ввода здесь. 169 00:12:52,800 --> 00:12:56,710 Теперь вы заметили также, что эта форма выложена, так 170 00:12:56,710 --> 00:13:00,510 что эта часть занимает получасть экрана, а 171 00:13:00,510 --> 00:13:03,620 оставшуюся часть занимает оставшуюся часть экрана. 172 00:13:03,620 --> 00:13:08,400 Ты начинаешь задаваться вопросом, как нам это делать? 173 00:13:09,720 --> 00:13:15,095 Помогает ли сетка Bootstrap нам решать эти размеры. 174 00:13:15,095 --> 00:13:18,725 Это был бы очень хороший вопрос для вас, чтобы задать себе. 175 00:13:18,725 --> 00:13:21,695 Давайте посмотрим код и поймем, как он выглядит. 176 00:13:21,695 --> 00:13:26,595 Прежде чем мы это сделаем, давайте посмотрим на тот же макет форм, 177 00:13:26,595 --> 00:13:29,595 в очень маленьком размере экрана. 178 00:13:29,595 --> 00:13:32,795 Таким образом, переключение на дополнительный маленький размер экрана. 179 00:13:32,795 --> 00:13:34,425 Так что мы поедем в Galaxy S5. 180 00:13:35,490 --> 00:13:40,060 Вы заметили, как форма выкладывается в дополнительный маленький размер экрана. 181 00:13:40,060 --> 00:13:44,304 Итак, вы увидите, что метка находится сверху, а 182 00:13:44,304 --> 00:13:50,590 затем сама коробка, сама коробка ввода является нижней, аналогично для фамилии. 183 00:13:50,590 --> 00:13:53,420 Итак, вы заметили этот бутстрап. 184 00:13:53,420 --> 00:13:57,500 Кстати, он предоставляет эти классы форм. 185 00:13:57,500 --> 00:14:02,460 Автоматически, делает вашу форму отзывчивой, так что, когда она 186 00:14:02,460 --> 00:14:07,450 выложена на разных размерах экрана, форма будет надлежащим образом выложена, 187 00:14:07,450 --> 00:14:12,550 так что она не получит все раздавленные на небольших размерах экрана. 188 00:14:13,610 --> 00:14:17,220 Но для больших размеров экрана, потому что у вас больше недвижимости, 189 00:14:17,220 --> 00:14:23,480 вы можете растянуть форму, чтобы использовать дополнительное пространство, которое у вас есть. 190 00:14:24,830 --> 00:14:31,150 Взглянув на этот исходный код и форму бок о бок, очевидно, 191 00:14:31,150 --> 00:14:36,140 первое, что вы заметили, это то, что ваша форма начинается с тега формы здесь. 192 00:14:36,140 --> 00:14:40,160 Итак, форма, а затем закрывающая форма, тег здесь. 193 00:14:40,160 --> 00:14:45,970 Итак, внутри вы описываете различные части вашей формы. 194 00:14:45,970 --> 00:14:49,150 Итак, давайте посмотрим, как построено первое имя, 195 00:14:49,150 --> 00:14:54,390 фамилия, очевидно, как это выглядит, должна использовать аналогичный подход. 196 00:14:54,390 --> 00:15:01,240 Итак, по умолчанию вы замечаете, что здесь есть div. 197 00:15:01,240 --> 00:15:06,480 Div элемент здесь, с закрывающим div здесь. 198 00:15:06,480 --> 00:15:10,515 Таким образом, этот элемент div имеет класс, называемый form-group. 199 00:15:11,920 --> 00:15:15,108 А затем следует класс строки. 200 00:15:15,108 --> 00:15:17,080 Таким образом, класс form-group по существу 201 00:15:17,080 --> 00:15:22,580 говорит, что все, что находится внутри этого div, будет рассматриваться как группа элементов. 202 00:15:22,580 --> 00:15:26,120 И тогда они будут выложены соответствующим образом. 203 00:15:26,120 --> 00:15:30,902 И вторая часть, вы видите использование строки здесь. 204 00:15:30,902 --> 00:15:35,740 Итак, вы увидите, что строка группы Bootstrap вступает в игру здесь. 205 00:15:35,740 --> 00:15:40,610 И поэтому эта конкретная группа форм может быть выложена 206 00:15:40,610 --> 00:15:45,480 с помощью классов строк и столбцов, которые у вас есть из сетки Bootstrap. 207 00:15:45,480 --> 00:15:48,506 Итак, теперь, если вы примените строку к этому div, 208 00:15:48,506 --> 00:15:52,956 что бы там ни было, вы можете использовать классы столбцов, 209 00:15:52,956 --> 00:15:58,741 чтобы точно решить, сколько места каждый из них будет занимать на экране. 210 00:15:58,741 --> 00:16:05,390 Теперь, так что это делает его более понятным, поэтому эта группа форм заключает. 211 00:16:05,390 --> 00:16:06,650 Это подразделение. 212 00:16:06,650 --> 00:16:08,570 Мы будем видеть это повторение снова и 213 00:16:08,570 --> 00:16:14,460 снова, когда мы разрабатываем различные элементы формы. 214 00:16:14,460 --> 00:16:20,020 Затем, ниже, вы видите этот тег ярлыка здесь. 215 00:16:20,020 --> 00:16:25,180 Для тега метки есть определенные атрибуты, которые ему были назначены. 216 00:16:25,180 --> 00:16:28,740 Таким образом, вы видите, что тег метки использует для firstname. 217 00:16:28,740 --> 00:16:33,650 Таким образом, эта метка для чего-то с идентификатором firstname. 218 00:16:33,650 --> 00:16:37,690 Итак, каково поле ввода, которое следует прямо под этим. 219 00:16:37,690 --> 00:16:39,790 Мы посмотрим на это через короткое время. 220 00:16:39,790 --> 00:16:46,136 А затем посмотрите на классы, которые применяются к классу меток, col-md-2. 221 00:16:46,136 --> 00:16:50,029 Таким образом, это означает, что для средних и сверхбольших экранов 222 00:16:50,029 --> 00:16:56,040 этот конкретный элемент будет занимать 2 столбца пространства. 223 00:16:56,040 --> 00:16:57,884 А потом обратите внимание на другой. 224 00:16:57,884 --> 00:17:00,764 Тут написано «Col-form-label». 225 00:17:00,764 --> 00:17:05,957 Таким образом, col-form-label по существу указывает, 226 00:17:05,957 --> 00:17:11,780 что эта метка должна быть расположена для выравнивания с 227 00:17:11,780 --> 00:17:18,270 другим элементом, который является частью этой группы форм. 228 00:17:18,270 --> 00:17:20,576 Итак, в этом случае, поле ввода. 229 00:17:20,576 --> 00:17:24,508 И поэтому это также означает, что 230 00:17:24,508 --> 00:17:29,868 метка должна быть выстроена в середине, 231 00:17:29,868 --> 00:17:35,550 горизонтально с полем ввода. 232 00:17:35,550 --> 00:17:39,535 Поэтому мы используем класс col-form-label. 233 00:17:39,535 --> 00:17:43,725 Если вы не примените это, ваша метка будет 234 00:17:43,725 --> 00:17:48,185 выровнена в верхней части вашего поля ввода. 235 00:17:48,185 --> 00:17:53,551 Какая ваша форма не будет выглядеть так здорово на средних и очень больших размерах экрана. 236 00:17:53,551 --> 00:17:59,727 Теперь, с левой стороны, конечно, потому что это окно браузера раздавлено, 237 00:17:59,727 --> 00:18:05,360 поэтому он показывает вид в маленьком или очень маленьком размере экрана здесь. 238 00:18:05,360 --> 00:18:11,650 Вот почему вы видите метку, складывающуюся поверх поля ввода здесь. 239 00:18:11,650 --> 00:18:14,560 Таким образом, это метка, которая указывает. 240 00:18:14,560 --> 00:18:18,380 Поэтому, если у вас есть метка, которую вы хотите назначить элементу, 241 00:18:18,380 --> 00:18:20,890 так что вы собираетесь назначить метку. 242 00:18:20,890 --> 00:18:25,740 Ниже здесь вы видите класс div col-md-10. 243 00:18:25,740 --> 00:18:29,120 Таким образом, это занимает оставшиеся 10 из 12 столбцов. 244 00:18:29,120 --> 00:18:31,670 Таким образом, два столбца, которые заняты меткой. 245 00:18:31,670 --> 00:18:36,070 И оставшиеся десять столбцов заняты этим, но заключены внутри div. 246 00:18:36,070 --> 00:18:38,230 И внутри этого div 247 00:18:38,230 --> 00:18:43,493 вы видите, что есть элемент входного тега с текстом типа. 248 00:18:43,493 --> 00:18:49,734 Таким образом, это означает, что это поле ввода принимает текстовый ввод. 249 00:18:49,734 --> 00:18:52,170 И класс, посмотрите на класс здесь. 250 00:18:52,170 --> 00:18:54,800 Здесь написано «контроль формы». 251 00:18:54,800 --> 00:18:57,730 Это важно, чтобы применить к поле ввода здесь. 252 00:18:57,730 --> 00:19:01,301 Таким образом, контроль формы и идентификатор firstname. 253 00:19:01,301 --> 00:19:04,550 И имя, которое является первым. 254 00:19:04,550 --> 00:19:07,630 Затем местозаполнитель Имя. 255 00:19:07,630 --> 00:19:12,840 Таким образом, заполнитель - это то, что появляется внутри коробки в качестве 256 00:19:12,840 --> 00:19:14,610 заполнителя для поля ввода. 257 00:19:14,610 --> 00:19:17,470 Таким образом, все эти атрибуты назначаются. 258 00:19:17,470 --> 00:19:18,690 Что более важно, 259 00:19:18,690 --> 00:19:23,810 обратите внимание на использование класса form-control, применяемого к типу ввода. 260 00:19:23,810 --> 00:19:29,960 Так вот как вы структурируете эти два элемента в своей форме. 261 00:19:29,960 --> 00:19:35,425 Для небольших размеров экрана и ниже, он складывает две вещи. 262 00:19:35,425 --> 00:19:37,118 Но для средних и очень больших, 263 00:19:37,118 --> 00:19:41,500 вы видели, что он позиционирует их горизонтально бок о бок. 264 00:19:41,500 --> 00:19:45,645 То же самое относится и к коду lastname. 265 00:19:45,645 --> 00:19:49,670 Это будет очень похоже на то, как структурировано первое имя. 266 00:19:49,670 --> 00:19:54,380 Поэтому я хотел бы, чтобы вы потратили немного времени, взглянув на этот код. 267 00:19:54,380 --> 00:19:58,150 Так что вы видите, исходя из вашего понимания этого, 268 00:19:58,150 --> 00:20:00,230 как это также отформатировано. 269 00:20:01,550 --> 00:20:08,360 Следующий вид формального события, которое мы добавим, является элементом группы ввода. 270 00:20:08,360 --> 00:20:09,330 Позвольте мне добавить код. 271 00:20:09,330 --> 00:20:13,111 Посмотрим, какая форма получилась. 272 00:20:13,111 --> 00:20:15,560 А потом мы вернемся и изучим код. 273 00:20:15,560 --> 00:20:19,542 Поэтому прямо здесь, после второго div, после поля lastname, 274 00:20:19,542 --> 00:20:24,840 я собираюсь включить код для следующего элемента здесь. 275 00:20:25,880 --> 00:20:28,142 И тогда давайте сохраним изменения. 276 00:20:28,142 --> 00:20:30,466 А затем, сразу, 277 00:20:30,466 --> 00:20:36,360 вы увидите еще пару вещей, добавленных в вашу форму. 278 00:20:36,360 --> 00:20:38,975 Вы видите поле номера телефона, добавленное здесь. 279 00:20:38,975 --> 00:20:42,985 Это, судя по всему, вы видите, что это очень похоже на это. 280 00:20:42,985 --> 00:20:45,335 Поэтому я не собираюсь объяснять код для этого. 281 00:20:45,335 --> 00:20:48,110 Это должно быть очень просто, чтобы вы поняли. 282 00:20:48,110 --> 00:20:52,073 И тогда это поле электронной почты также должно быть очень простым для 283 00:20:52,073 --> 00:20:53,747 вас, чтобы понять. 284 00:20:53,747 --> 00:20:56,537 Потому что это очень похоже на последнее имя. 285 00:20:56,537 --> 00:21:02,477 За исключением того, что для этого поле ввода, тип будет установлен на email. 286 00:21:02,477 --> 00:21:06,739 Таким образом, встроенные возможности проверки формы 287 00:21:06,739 --> 00:21:10,094 вашего браузера автоматически запускаются. 288 00:21:10,094 --> 00:21:14,113 Так что, когда вы вводите что-то, что не выглядит как электронная почта, 289 00:21:14,113 --> 00:21:16,860 тогда он будет жаловаться соответствующим образом. 290 00:21:16,860 --> 00:21:21,780 Итак, давайте рассмотрим эту конкретную часть формы здесь. 291 00:21:21,780 --> 00:21:27,500 Обратите внимание, что в этом случае мы добавляем в левую скобку и 292 00:21:27,500 --> 00:21:31,430 правую скобку для этого конкретного поля ввода. 293 00:21:31,430 --> 00:21:36,570 Так как вы добавляете вещи в свою коробку вот так? 294 00:21:36,570 --> 00:21:41,330 Взглянув на код здесь, в вашем редакторе, 295 00:21:41,330 --> 00:21:45,750 вы видите, что у вас все еще есть строка form-group, которую вы уже поняли. 296 00:21:45,750 --> 00:21:50,942 И внизу здесь у вас есть идентификатор элемента формы ввода типа telnum 297 00:21:50,942 --> 00:21:54,460 и т. Д., Это также должно быть очень ясно для вас. 298 00:21:54,460 --> 00:21:57,360 Так что я не думаю, что мне нужно объяснять тебе эту часть. 299 00:21:57,360 --> 00:22:04,366 Обратите внимание, как я использую классы столбцов сетки Bootstrap для каждого из них. 300 00:22:04,366 --> 00:22:08,060 Таким образом, метка дается col-md-2. 301 00:22:08,060 --> 00:22:12,062 А затем номер телефона один дается 302 00:22:12,062 --> 00:22:16,880 кол-хс-7 кол-см-6 и кол-мд-7 здесь. 303 00:22:16,880 --> 00:22:23,100 Таким образом, номер телефона, этот элемент правильно позиционируется. 304 00:22:23,100 --> 00:22:27,310 Но, в частности, давайте обратим внимание на эту часть. 305 00:22:27,310 --> 00:22:31,470 Итак, этот здесь находится внутри этого div. 306 00:22:32,670 --> 00:22:36,250 Поэтому внутри этого div обратите внимание на класс, предоставленный ему. 307 00:22:36,250 --> 00:22:38,689 Класс говорит «входная группа». 308 00:22:38,689 --> 00:22:43,587 Таким образом, по существу это означает, что все, что находится внутри этого div 309 00:22:43,587 --> 00:22:45,350 , будет рассматриваться как группа элементов здесь. 310 00:22:45,350 --> 00:22:49,030 Вот почему данный класс является входной группой. 311 00:22:49,030 --> 00:22:53,600 Теперь, для добавления чего-то подобного, вы будете использовать 312 00:22:53,600 --> 00:22:59,000 класс, называемый как input-group-addon. 313 00:22:59,000 --> 00:23:04,490 И затем обратите внимание, что я использую div для хранения этого элемента. 314 00:23:04,490 --> 00:23:08,200 Я могу использовать все здесь, но div пригодится здесь. 315 00:23:08,200 --> 00:23:12,980 Поэтому я говорю, что div класс input-group-addon. 316 00:23:12,980 --> 00:23:16,250 И затем закрывающий тип div внутри, где, 317 00:23:16,250 --> 00:23:18,500 обратите внимание, что у меня есть левая скобка. 318 00:23:18,500 --> 00:23:25,477 Таким образом, это то, что позволяет вам добавить дополнительный 319 00:23:25,477 --> 00:23:30,963 добавочный элемент в поле ввода здесь. 320 00:23:30,963 --> 00:23:38,390 Аналогично, приведенный ниже здесь также является входом-группа-аддон правой скобкой. 321 00:23:38,390 --> 00:23:42,350 Вот что добавляет здесь другую правую скобку. 322 00:23:42,350 --> 00:23:46,270 Теперь, между этими двумя, конечно, у вас есть тип ввода. 323 00:23:46,270 --> 00:23:51,094 Ввод с типом tel и класса form-control, id, name, 324 00:23:51,094 --> 00:23:54,310 заполнитель, все на месте здесь. 325 00:23:54,310 --> 00:23:57,190 Так что это не что иное, как часть кода района. 326 00:23:57,190 --> 00:24:02,049 Поэтому, если вы используете эту входную группу вместе с входными групповы-добавками, 327 00:24:02,049 --> 00:24:04,440 как это с обеих сторон. 328 00:24:04,440 --> 00:24:10,070 Эти вещи будут добавлены в ваш элемент ввода, как это. 329 00:24:10,070 --> 00:24:15,880 Это дает вам хороший способ проектирования вашей формы с некоторыми добавленными в. 330 00:24:15,880 --> 00:24:20,170 Например, если у вас есть поле, которое принимает 331 00:24:22,450 --> 00:24:27,360 деньги в качестве входных данных, вы можете просто добавить знак доллара в левую сторону, 332 00:24:27,360 --> 00:24:33,050 чтобы указать пользователю, что это поле, которое принимает значение валюты в данный момент. 333 00:24:33,050 --> 00:24:37,558 Прямо сейчас в этом случае это поле принимает код города. 334 00:24:37,558 --> 00:24:43,330 И если вы видите, как коды районов написаны в США и 335 00:24:43,330 --> 00:24:47,640 Канаде, вы знаете, что они заключены в левую и правую скобки. 336 00:24:47,640 --> 00:24:52,680 Итак, это то, что позволяет мне указать что-то подобное в моей форме. 337 00:24:53,900 --> 00:24:56,460 Мой следующий набор элементов, которые я собираюсь добавить в свою 338 00:24:56,460 --> 00:25:01,530 форму, - это флажок и выбор. 339 00:25:01,530 --> 00:25:03,460 Итак, как мы это добавим? 340 00:25:03,460 --> 00:25:09,014 Итак, если вы знакомы с HTML-формами, вы понимаете, как работает выбор, и 341 00:25:09,014 --> 00:25:13,070 вы понимаете, как работают флажки в HTML-формах. 342 00:25:13,070 --> 00:25:15,880 Теперь Bootstrap дает вам некоторые дополнительные 343 00:25:15,880 --> 00:25:20,080 классы, которые позволяют вам форматировать эти элементы соответствующим образом. 344 00:25:20,080 --> 00:25:21,740 Итак, позвольте мне добавить цитату. 345 00:25:23,400 --> 00:25:25,120 Давайте сохраним изменения. 346 00:25:25,120 --> 00:25:29,695 Взгляните на то, что это приводит к форме здесь. 347 00:25:29,695 --> 00:25:32,480 А потом взгляните на код. 348 00:25:32,480 --> 00:25:38,060 Итак, вы видите, что у меня есть флажок и сообщение здесь. 349 00:25:38,060 --> 00:25:45,372 И тогда это селектор, который позволяет мне выбирать среди множества вариантов здесь. 350 00:25:47,324 --> 00:25:53,309 Теперь форма, как она существует здесь, это то, что вы увидите в небольших и 351 00:25:53,309 --> 00:25:56,080 дополнительных маленьких размерах экрана. 352 00:25:56,080 --> 00:25:59,940 Давайте взглянем на него на больший размер экрана. 353 00:25:59,940 --> 00:26:04,740 Такая же форма при выложении на средних и сверхбольших 354 00:26:04,740 --> 00:26:06,760 размерах экрана будет выглядеть так. 355 00:26:06,760 --> 00:26:11,440 Таким образом, вы можете увидеть, как здесь расположен контактный номер телефона, 356 00:26:11,440 --> 00:26:14,500 и адрес электронной почты находится здесь. 357 00:26:14,500 --> 00:26:19,825 Так что обратите внимание, что эти ярлыки 358 00:26:19,825 --> 00:26:26,510 выстроены на линию посередине с коробками здесь. 359 00:26:26,510 --> 00:26:32,640 Это то, что класс этикеток формы col достигает первым. 360 00:26:32,640 --> 00:26:36,940 Теперь давайте сосредоточимся на этом, что мы только что добавили. 361 00:26:36,940 --> 00:26:40,060 Здесь мы видим, что у нас есть флажок добавлен в. 362 00:26:40,060 --> 00:26:43,312 А затем текстовое поле здесь. 363 00:26:43,312 --> 00:26:44,650 Так мы можем связаться с вами? 364 00:26:44,650 --> 00:26:51,370 Так, например, вы ожидаете, что пользователь либо проверит его, либо выключит. 365 00:26:51,370 --> 00:26:53,500 Итак, в чем причина установки флажка? 366 00:26:53,500 --> 00:26:56,330 Аналогично, у вас могут быть переключатели. 367 00:26:56,330 --> 00:27:02,020 Bootstrap поддерживает переключатели, доступные в HTML-формах. 368 00:27:02,020 --> 00:27:05,650 И предоставить некоторые классы для их правильной стилизации. 369 00:27:05,650 --> 00:27:10,850 И тогда это, конечно, селектор, который позволяет выбирать среди вариантов. 370 00:27:10,850 --> 00:27:13,113 Так что, возвращаясь назад и глядя на код. 371 00:27:13,113 --> 00:27:15,250 Посмотрим, как это реализовано. 372 00:27:16,340 --> 00:27:22,030 Возвращаясь, чтобы взглянуть на код, вы видите, что этот снова является 373 00:27:22,030 --> 00:27:28,630 строкой группы форм div здесь, которая включает две вещи здесь. 374 00:27:28,630 --> 00:27:32,859 Одним из них является проверка формы 375 00:27:32,859 --> 00:27:38,731 col-md-6 offset-md-2. 376 00:27:38,731 --> 00:27:45,120 Таким образом, это то, что включает флажок внутри этого элемента div. 377 00:27:45,120 --> 00:27:53,902 И затем внизу здесь у меня есть класс div, Col-MD-3 offset-md-1. 378 00:27:53,902 --> 00:27:59,979 Поэтому обратите внимание, что здесь говорится о проверке формы col-md-6 offset-md-2. 379 00:27:59,979 --> 00:28:04,197 Причина, по которой я делаю offset-md-2, заключается в том, что у меня нет ярлыка. 380 00:28:04,197 --> 00:28:08,166 Поэтому я обычно использовал два столбца для меток. 381 00:28:08,166 --> 00:28:13,160 Поэтому, поскольку этот флажок должен выровняться с правой стороны в форме. 382 00:28:13,160 --> 00:28:16,591 Вот почему я использовал offset-md-2 здесь. 383 00:28:16,591 --> 00:28:22,654 И затем внутри здесь он говорит класс label = «form-check-label». 384 00:28:22,654 --> 00:28:28,042 И затем он предоставляет тег ввода 385 00:28:28,042 --> 00:28:32,790 здесь с флажком типа. 386 00:28:32,790 --> 00:28:35,070 Так вот как вы создаете флажок. 387 00:28:35,070 --> 00:28:38,300 И затем класс, класс Bootstrap, который вы собираетесь применить к 388 00:28:38,300 --> 00:28:41,768 вашему флажку, является form-check-input. 389 00:28:41,768 --> 00:28:49,390 И тогда имя и начальное значение пусты. 390 00:28:49,390 --> 00:28:54,262 И затем, это фактическая метка, которую вы видите, 391 00:28:54,262 --> 00:28:58,670 применяется к этому конкретному флажку там. 392 00:28:58,670 --> 00:29:04,260 Итак, обратите внимание, как эти два заключены внутри тега метки здесь. 393 00:29:04,260 --> 00:29:09,070 Так вот как вы создаете флажок вместе с его меткой, а 394 00:29:09,070 --> 00:29:12,980 затем разместите его в своей форме здесь. 395 00:29:12,980 --> 00:29:15,840 Таким образом, здесь используется форма чек-этикетка. 396 00:29:15,840 --> 00:29:19,880 И затем здесь у вас должен быть флажок, тип ввода = «флажок», а 397 00:29:19,880 --> 00:29:21,340 затем надпись. 398 00:29:21,340 --> 00:29:23,620 Итак, здесь вы видите сильного, можем ли мы связаться с вами? 399 00:29:23,620 --> 00:29:29,770 Вот почему он отображается жирным шрифтом рядом с флажком здесь. 400 00:29:29,770 --> 00:29:37,390 Теперь ниже в коде у вас есть класс div col-md-3 offset-md-1. 401 00:29:37,390 --> 00:29:40,760 Таким образом, это занимает три столбца в пределах одного смещения столбца. 402 00:29:40,760 --> 00:29:42,980 Итак, в общей сложности четыре столбца здесь. 403 00:29:42,980 --> 00:29:50,113 Итак, это col-md-6 плюс 2, так что это восемь столбцов. 404 00:29:50,113 --> 00:29:51,480 Итак, 8 плюс 4, 12. 405 00:29:51,480 --> 00:29:55,140 Таким образом, это заботится о ваших 12 столбцах для вашей сетки там. 406 00:29:55,140 --> 00:30:01,740 Теперь внутри этого вы видите выбор, примененный здесь. 407 00:30:02,880 --> 00:30:07,320 Теперь это вариант выбора, который поддерживает HTML-формы файлов. 408 00:30:07,320 --> 00:30:09,240 И посмотрите на класс, примененный к этому. 409 00:30:09,240 --> 00:30:12,870 Он говорит, что class = «form-control» для выбора. 410 00:30:12,870 --> 00:30:15,830 И затем вы даете параметры в выборе здесь. 411 00:30:15,830 --> 00:30:18,638 Так